Javascript - 변수 (Var, Const, Let)

해당 포스팅은 GOAT 자바스크립트 책으로 공부한 내용을 정리한 것이다.

자바스크립트에서 변수는 var, const, let의 키워드를 이용하여 정의하거나 키워드 없이 정의할 수 있다.

변수를 나누는 3가지 기준

1. 유효범위: 전역변수와 지역변수

const와 let은 ES6에서 새롭게 추가된 것이다. 추가되면서 스코프의 구분이 조정되었는데, 지역 스코프를 함수 스코프와 블록 스코프로 세분화하였다.

프로그램 최상위에서 사용할 경우 var는 전역 객체에 속성을 추가하지만 let은 추가하지 않습니다. - MDN 공식 문서

const와 마찬가지로 let 역시 전역 범위 선언에 사용(최상위 스코프 선언)해도 window 객체에 새로운 속성을 추가하지 않습니다. - MDN 공식 문서

var, let, const 모두 전역변수로 사용할 수 있다.
하지만 MDN 공식 문서를 참조하면 var로 선언한 전역변수는 브라우저 최상위 객체인 window 객체에 속성으로 추가되지만, let과 const으로 선언한 전역변수는 window 객체에 추가되지 않는다. 즉, let과 const는 window 객체에만 추가가 되지않는 전역변수로 해석이 된다.

2. 값의 변화: 정적변수와 동적변수

• 정적 변수: 보통 상수 형태로 한번 선언되면 잘 변경되지 않는 값이다. const은 중복 선언이 될 수 없을 뿐만 아니라 재할당도 되지 않는다.
• 동적 변수: 연산 결과에 따라 값이 변경 가능한 형태로 var은 중복선언 뿐만 아니라 재할당도 가능하다.
  

3. 값의 개수: 스칼라 변수와 오브젝트 변수

• 스칼라 변수: 하나의 변수명에 대응하는 변수값이 한가지만 있는 경우
• 오브젝트 변수: 하나의 변수명에 대응하는 변수값이 여러개 있는 경우. ex) 배열

var의 문제점

var를 사용할 시 따라오는 취약점이 존재한다.

var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

time > 3가 true를 반환하기 때문에 greeter는 "say Hello instead"로 재정의된다. 의도적으로 재정의한 것이라면 괜찮겠지만, 변수 greeter가 이미 정의되어 있다는 사실을 인식하지 못한 경우에는 문제가 된다.

만약 코드의 다른 부분에서 greeter를 사용한 적이 있다면 다른 결과가 나와버리는 것이다. 그리고 많은 버그를 발생시킬 수 있기 때문에 let과 const가 필요하게 된 것이다.

let 키워드

• 한 번 선언하면 동일한 변수 이름으로 재선언 불가
• 재할당 가능하나 사용하기 전에 반드시 선언 (호이스팅 문제)
• 선언만 할 시 자동으로 undefined 할당
• 유효한 범위로 블록 스코프를 가짐

    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

let 키워드를 썼을 때 두 변수는 다른 범위를 가지기 때문에 (블록변수) 다른 변수로 취급되어 결과가 다르게 나온다. 변수가 범위 내에서만 존재하기 때문에 이전에 이미 사용한 적이 있는 변수 명에 대해서 더 이상 신경쓰지 않아도 된다.
따라서 var보다 let이 더 나은 선택이 될 수 있는 것이다. 또한, 범위 내에서 동일한 변수를 두 번 이상 선언할 수 없기 때문에 앞서 설명한 var의 문제가 발생하지 않다.

const 키워드

• 한 번 선언하면 동일한 변수 이름으로 재선언 불가
• 재할당 불가
• 일정한 상수 값을 유지하기 때문에 선언과 함께 반드시 초기값 할당 (안할 시 에러 발생)
• 유효한 범위로 블록 스코프를 가짐

const 개체는 업데이트할 수 없지만, 개체의 '속성'은 업데이트할 수 있다.
const 객체를 다음과 같이 선언했다면

  const greeting = {
        message: "say Hi",
        times: 4
    }

이와 같은 할당은 불가능하지만,

    greeting = {
        words: "Hello",
        number: "five"
    } // error:  Assignment to constant variable.

개체의 속성에 접근하여 재할당이 가능하다.

  greeting.message = "say Hello instead";