ES는 브라우저에서 동작하는 스크립트 언어들의 표준을 정하는 ECMAscript의 줄임말이고, ES6는 ES 중 가장 최신 버전을 의미한다. 자바스크립트 또한 ES의 표준을 참고하여 만들어지며, 브라우저 업체들은 ES에 따라서 브라우저를 만들게 된다.

ES6가 2015년에 release되었을 때 일어난 큰 변화중 하나는 let 과 const의 등장이다. 기존에 사용되었던 var을 대체하기 위함인데, var을 사용하지 않고 let 과 const를 사용해야 하는 이유를 스코프 개념과 함께 설명하겠다.

스코프 이슈

let 과 const 는 블록 레벨 스코프이다.

블록은 자바스크립트 코드에서 객체를 생성하지 않는 중괄호 쌍을 하나의 단위 기준으로 하는 용어이다. 따라서 중괄호를 사용하는 if문, for문 모두 각각의 블록을 형성한다. 블록과 반대되는 개념으로 '전역'이라 할 수 있겠다. 따라서 각각을 지칭할 때 블록 레벨(수준,단계) 스코프(범위), 전역 레벨 스코프라 한다.

물론 let 과 const를 블록 외부에서도 선언과 초기화가 가능한 것은 모두들 알 것이다. 이렇게 되면 let과 const는 전역 레벨 변수로서도 활용 가능하다.

if(a<b){
 let name = "MIN"
}

 console.log(name) // 오류 발생, 블록 레벨 변수를 외부에서 참조할 수 없다.

쉐도잉이 존재한다.

let과 const가 블록 레벨 스코프이기 때문에 등장한 개념이 "쉐도잉"이다.
전역 레벨과 블록 레벨에 동일한 변수명이 존재할 경우, 블록레벨에서 해당 이름의 변수를 참조할 때, 전역 레벨의 변수를 참고하지 않고, 블록레벨의 변수를 참고하는 현상을 쉐도잉이라고 한다. 이것이 중요한 이유는, 이 현상이 일어난 이유가 let과 const가 블록 레벨 스코프의 성질을 띄기 때문이다.

let name = "KIM"

if(a<b){
 name = "MIN"
 console.log(name) // KIM
}

var는 함수 레벨 스코프이다.

이와는 반대로 var 함수 레벨 스코프이다. 이 말은, 함수 안에서 var로 선언하였을 경우 블록 레벨 스코프로 인정되지만, 그 외의 for,if 문 안에서 선언 할 경우 블록 레벨로 인정되지 않고 전역 변수로 선언된다. 따라서 블록 안에서 vat로 선언하여도, 전역 레벨로 선언되는 것이다. 따라서 쉐도잉이라는 개념 또한 존재하지 않으며, var를 블록 안에서 선언해도, 블록 밖에서 해당 변수를 참조할 수 있게 된다. 이렇게 되면 사용자가 자신이 해당 블록 안에서 사용하기 위해 선언한 변수 조차도 외부에서 사용할 수 있게 되어 문제를 야기할 수 있게 된다.

호이스팅의 존재, 하지만 처리 방식은 달라진

자바스크립트를 브라우저에서 실행할 경우, 브라우저는 스크립트 파일 전체를 분석한 뒤 함수와 변수를 따로 저장하여 필요할 경우에 사용한다. 이는 스크립트에 존재하는 함수와 변수의 선언을 스크립트 파일 최상단으로 이동시킨 것과 동일한 효과를 주는데(실제로 이동하는 것이 아니다), 따라서 우리는 함수의 경우 선언과 호출 코드의 순서에 상관없이 오류가 출력되지 않는다. 하지만 변수의 경우 let과 const로 선언하면, 함수와 동일하게 호이스팅의 과정을 거치지만, 개발자가 변수 선언 전에 변수를 참조하고자 하면 함수와는 다르게 오류를 내놓게 된다.

console.log(name);
var name = "kim"

var 또한 let과 const와 동일하게 호이스팅의 과정을 거치지만, 변수 선언 전에 참조하여도 오류가 발생하지 않는다. (동일한 코드로 실행한 모습)

이러한 현상은 코드를 이해하기 어렵게 만들며, 실수를 유발할 수 있다.

이와는 별개로 var로 변수를 선언할 시 동일한 이름의 변수를 재선언해도 오류가 발생하지 않으며, 이 또한 개발 과정에서 실수를 유발할 수 있으므로 var는 사용하지 말아야 한다.

참고로 스크립트 파일 최상단에 'use strict';을 작성하면 '엄격 모드'가 실행되어 위에서 나온 var의 이상한 동작에 대해 오류를 발생한다. 하지만 딱히 쓸모 없을 것 같으며 나는 빨리 자바스크립트 공부하고 타입스크립트로 넘어갈 것이다.
fuck javascript