15장 let, const 키워드와 블록 레벨 스코프

해당 포스팅은 위키북스의 "모던 자바스크립트 Deep Dive"라는 책을 독학하며 기록하는 글입니다.

ES6 이전의 변수 선언

ES6에 let과 const키워드가 추가되기 전에는 'var'키워드를 사용해서 변수를 선언했다. 하지만 var키워드를 사용해서 변수를 선언하는 것은 몇 가지 문제점이 있고 이는 다음과 같다.

• 중복선언이 가능하다.
  -> 중복선언이 가능하다는 말은 이전에 이미 선언되고 사용중인 변수에 대해서 개발자가 잊어버리고 다시 선언해도 오류가 나지 않는다는 것이다. 만약 이전에 생성한 변수를 다시 사용하지 않는다면 프로그램을 동작시켜도 티가 안나겠지만 사용하게 되면 프로그램에 치명적인 오류를 야기할 수 있다. (어디서 오류가 났는지 찾는 것도 힘들다)

• 함수 레벨 스코프를 제공한다.
  -> var키워드로 선언한 변수는 함수 레벨의 스코프를 사용하기 때문에 대부분의 변수가 전역변수로 등록이 된다. 이는 변수를 찾아가는 시간적인 면에서도 그렇고 의도치 않게 중복 선언를 사용할 수도 있다.

• 변수 호이스팅이 일어난다.
  -> 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 이 말은 실제 변수를 선언한 선언문 이전에 해당 변수를 참조할 수 있다는 말이다. (물론 undefined를 반환한다)

ES6부터는 변수 선언에 있어서 let과 const키워드가 추가되었다. 각각을 알아보도록 하자.

let 키워드

• var과 다르게 변수 중복 선언이 금지되어있다.
  -> 변수 중복 선언시 SyntaxError(문법오류)발생

• 블록 레벨 스코프 제공
  -> 중괄호 {}로 묶인 블록 각각의 스코프를 제공한다. 즉 함수, if문, for문, while문, try/catch문 등이 각각의 스코프를 가지게 된다는 말이다.

• 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
  -> let으로 선언한 변수를 변수 선언문 이전에 참조(접근)하려고 하면 ReferenceError(참조오류)가 발생한다.

마지막 항목인 변수 호이스팅에 대해 좀 더 자세히 알아보자. var키워드로 선언한 변수는 암묵적으로 "선언 단계"와 "초기화 단계"가 한 번에 진행된다. 여기서 초기화 단계에서 자동으로 undefined로 초기화되기 때문에 실제 선언문 이전에 접근해도 undefined값을 반환하는 것이다.
하지만 let키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행된다. 선언 단계는 var과 같이 런타임 이전에 자바스크립트 엔진에 의해 실행되지만, 초기화 단계는 실제 변수 선언문을 만날때 할당 단계와 한 번에 진행된다.

즉 변수 선언문을 만나기 전에 해당 변수를 참조하면 undefined값조차 할당되어 있지 않기 때문에 ReferenceError(참조오류)가 나게 되고 이렇게 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(Temporal Dead Zone; TDZ)라고 한다.

그럼 실제로 호이스팅이 일어나지 않는것인가? 그건 또 아니다. 위에서 적었던 것처럼 변수 호이스팅이 발생하지 않는 것처럼 동작한다는 것이다. 기본적으로 모든 선언(var, let, const, function, function*, class)들은 호이스팅이 일어나지만 ES6부터 도입된 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않은 것처럼 동작하는 것일일 뿐이다.

const 키워드

• 상수를 선언하기 위해 사용한다.
  -> const로 선언한 변수는 재할당이 불가능하다. 상수는 재할당이 금지된 변수를 말하며 이러한 상수를 선언하기 위한 키워드가 const이다.

• 선언과 동시에 초기화해야 한다.
  -> const로 선언한 변수는 상수를 표현하기 위한 키워드로 재할당이 불가능하므로 선언과 동시에 값을 할당해줘야 한다.

위의 목록에 추가하진 않았지만 const도 기본적으로 let과 같이 블록 레벨 스코프를 가지며 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

추가적으로 상수에 대해 좀 더 설명하면 상수는 프로그램 전체에서 공통적으로 사용하므로 나중에 해당 값이 변경되면 상수만 변경하면 되기 때문에 유지보수성이 대폭 향상되는 장점이 있다. 보통 대문자로 표현하며 여러 단어를 사용하면 스네이크 케이스로 표기한다. 또한 const키워드는 재할당을 금지할 뿐 "불변"을 의미하지는 않는다는 점을 꼭 기억하고 있어야 한다.(객체를 할당한 경우 값을 변경할 수 있다는 말)

마치며...

그럼 해당 책에서 권장하는 변수의 선언방법에 대해 적고 마무리하겠다.

1. ES6를 사용한다면 var키워드는 사용하지 않는다.
2. 재할당이 필요한 경우에 한정해 let키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
3. 변경이 발생하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const키워드를 사용한다. const키워드는 재할당을금지하므로 var, let키워드보다 안전하다.