var, let, const, scope, state

이효범·2022년 4월 6일
0

ES6 - OOP & FRP

목록 보기
7/15
post-thumbnail

var, let, const, scope, state

// var - old style
// let - of which value can be changed in the scope below.
// const - oppsite of let

// state management
// 1. reactive
// 2. collaboration
// 3. scope

const statuses = [
  { code: 'OK', response: 'Request successful' },
  { code: 'FAILED', response: 'There was an error with your request' },
  { code: 'PENDING', response: 'Your Request is still pending' },
];
let message = '';
const currentCode = 'OK';

for (let i = 0; i < statuses.lenght; i++) {
 if (statuses[i].code === currentCode) {
  message = statuses[i].response; 
 }
 console.log(i);
}
console.log(i);  // scope error

var, let, const를 잘 구별해야하는 이유는 무엇일까? 상태의 관리가 중요하기 때문이다.
state는 a value of a variable at a moment이다. 즉 어떤 한 순간에 가지는 변수의 상태를 뜻하는데 이를 관리하는 것을 state management라고 한다.

이게 왜 중요하냐? 두 가지 이유가 있다.
첫번째, 컴퓨터 프로그래밍 환경이 reactive하게 변하기 때문이다. reactive는 끊임없이 외부로부터 정보를 전송을 받고 또 내가 외부로 정보를 전송을 하고 하는 식의,
즉 외부와 나 사이의 끊임없는 상호작용이 유지되는 것을 reactive라고 한다. 그런데 이 reactive한 상황에서는 프로그래밍에 정의되어있는 데이터가 어떤 값을 가지고 있는 지에 따라서 상당히 민감하게 달라지는 결과를 도출하게 된다. 따라서 원하지 않는 결과값이 도출되는 것을 방지하고자 하는 여러가지 대책 중의 하나가 바로 state management이다. 이를 잘 방지하려면 각 변수에 포함되어 있는 값들을 관리하는 것, 즉 state management를 잘 해야만 한다.

두번째는 점점 프로그램이 커지게 되면 collaboration이 중요하다. 즉 여러 사람이 동시에 프로그램을 작성하고 또 동시에 이용을 하는데, 만약 collaboration을 하는 도중에 A라는 사람이 한 변수의 값을 바꿨는데 이러한 사실을 B라고 하는 다른 사람이 미쳐 알지 못하고 예전의(0.000001초 전의) 값을 가져가서 자신의 프로그램에다가 입력하는 바람에 뭔가 큰 에러가 발생했다거나하는 문제가 발생할 수 있다는 것이다. 그래서 결국 state management가 점점 중요해짐에 따라서 각 변수에 들어가는 값의 타입이 예전처럼 그냥 뭉그뜨려서 var이라고 하는 것이 아니라,
앞으로 바뀔 가능성이 있는 것은 let, 바뀔 가능성이 없는 것은 const 이렇게 구분을 하게 된다.

좀 더 진보적으로 나아가면 기본적으로는 왠만하면 const를 쓰고 그 외에 const를 써서는 안된다라는 특별한
상황에만 let을 쓰는 것이 좋다.

한 가지 더 보태어 얘기하자면 scope에 대한 얘기를 할 수 있다. scope에 대한 얘기는 추후에 다시 다루겠다만은 어떤 변수는 그 변수가 영향을 미치는 범주가 있다. 위의 예시를 보자면 for 문안의 변수 i는 for 문안에서만 영향을 미칠 수 있는 범주를 가진다. for 문 밖에서는 i를 볼 수 없다.

그래서 쉽게 얘기하자면 변수는 각 나라의 신분증 같은 것이다. 국내에서는 주민등록증을 유효하게 사용 가능하지만 다른 나라에 가서는 한국의 신분증을 제시한다고 해서 아무런 영향을 미칠 수 없다.
변수도 이와 마찬가지이다.
var같은 경우에는 상당히 애매한 경우가 많았다. 그런데 es6이후로 let과 const를 도입하면서부터 이제는 정확하게 이 변수가 어디에서만 영향을 끼칠 수 있는 범주를 가지는지를 알 수 있게 되었다. scope에 대한 좀 더 깊은 얘기는 추후 포스팅하도록 하겠다.

const 연습

const로 선언이 되어있다고 해서 그 값이 전혀 바뀌지 않는 것은 아니다.
const로 선언이 되어있다고 하더라도 그 안에 들어있는 값을 얼마든지 변화시킬 수 있다.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    moveBy(dx, dy) {
        this.x = dx;
        this.y = dy;
    }
}

const pointA = new Point(0, 0); // Point { x: 0, y: 0 }
const pointB = new Point(0, 0);

console.log(pointA);

pointA.moveBy(3, 5);
// pointA = pointB;  // const는 이런 방법으로는 바뀔 수 없다. 

console.log(pointA.x, pointA.y);  // 3 5

위의 예시를 보면 const로 정의되어있지만, 그 안에 들어있는 값들은 얼마든지 바뀔 수 있다.
다만 pointA = pointB 와 같이는 바뀔 수 없다. 즉, pointA라는 변수에다가 pointB라는 변수를 할당하는 것, 치환하는 것은 안된다. 그 점이 const라는 것을 기억하자.

profile
I'm on Wave, I'm on the Vibe.

0개의 댓글