let, const와 블록 레벨 스코프 (feat. var)

1. var로 선안한 변수의 문제점

1.1 변수 중복 선언 허용

• 같은 스코프 내에서 변수를 중복 선언하면 나중에 작성된 변수 선언문은 자바 스크립트 엔진에 의해 var 키워드가 없는 것 처럼 동작한다.
• 먼저 선언된 변수값이 변경되는 부작용 발생
• 문법적으로 허용, 하지만 사용하지 않는 것이 좋다.

1.2 함수 레벨 스코프

• 오직 함수 코드블록만을 지역 스코프로 인정한다.
• 함수 외부에서 var 키워드 선언 -> 전역 변수(코드 블록 내에 있더라도 for문 등등..)

1.3 변수 호이스팅

• 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다.
• 변수 선언문 이전에 변수를 참조하는 것은 변수 호이스팅에 의해 에러를 발생시키지는 않지만 가독성을 떨어뜨리고 오류를 발생시킬 가능성이 있다.

  2. let 키워드

var 를 보안하기 위해 ES6에서 let, const 도입

2.1 변수 중복 선언 금지

• let 키워드로 동일한 변수를 중복 선언하면 SyntaxError가 발생한다.

2.2 블록 레벨 스코프

let 키워드로 선언한 변수는 모든 코드블록 (함수, if, for, while, try/catch문 등)을 지역 스코프로 인정하는 블록레벨 스코프를 따른다. 블록레벨스코프 = 지역 스코프 = 지역변수

1
2
3
4
5
6
7
8
9
10

let i = 10;          // <- 전역 스코프
function foo() {     // <= 함수 레벨 스코프
  let i = 100;
  for (let i = 1; i < 3; i++) {     
    console.log(i);   // 1, 2   <= 블록 레벨 스코프
  }
  console.log(i);  // 100
}
foo ();
console.log(i);  //10

2.3 변수 호이스팅

let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

1
2

console.log(x);   //ReferenceError: foo is not defined
let x;

• let 키워드로 선언한 변수는 선언단계와 초기화 단계가 분리되어 진행한다 (!== var)
• 런타임 이전에 암묵적으로 선언 단계 먼저 실행(자바스크립트 엔진에 의해)
• 초기화 단계는 선언문에 도달했을 때 실행된다.
• 초기화 단계가 실행되기 이전에 변수에 접급하려고 하면 참조에러가 발생된다.
• 스코프의 시작지점부터 초기화 시작 지점까지 변수를 참조할 수 없다. (TDZ)
• let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것 처럼 동작한다.

2.4 전역객체와 let

• let, const 키워드로 선언한 전역 변수는 전역 객체(window)의 프로퍼티가 아니다.
• let 전역 변수는 보이지 않는 개념적인블록 내에 존재하게 된다.

3.1 const

3.1 선언과 초기화

• const 키워드로 선언한 변수는 반드시 선언과 동시에 할당이 이루어져야 한다.
• 그렇지 않으면 SyntaxError
• 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
• 블록 레벨 스코프를 갖는다.

3.2 재할당 금지

const로 선언한 변수 재할당 금지 (let, var 가능)

3.3 상수

• 상수. 값을 저장하기 위하 메모리 공간이 필요함으로 변수라고 할 수 있다. (재할당금지)
• 상태 유지와 가독성, 유지보수의 편의를 위해 사용해야한다.

3.4 const와 객체

• const 키워드로 선언된 변수에 객체를 할당한 경우, 값을 변경할 수 있다.
• 재할당을 금지할 뿐 불변을 의미하지 않는다.
• 객체의 내용이 변경되더라도 변수에 할당된 참조값은 변경되지 않는다.

  1 2 3 4 5 6

  const person = { age: '32' }; person.name = '20'; console.log(person); // {age: '20'}