안녕하세요, 김현지입니다.
오늘은 자바스크립트에서 ES6 이후에 변수 사용의 변화에 대해 포스팅하겠습니다.
ES6 이전에는 자바스크립트에서의 변수 키워드는 var 뿐이었습니다.
하지만, ES6로 개편되면서 var의 사용은 없어지고 대안으로 const let을 사용합니다.
var를 사용하지 않는 이유가 무엇인지, const let을 사용해야 하는 이유는 무엇인지 살펴보겠습니다.
var의 특징
var 키워드로 선언된 변수는 함수 스코프를 갖는다.
스코프라는 것은 쉽게 말하면 해당 변수가 사용될 수 있는 유효범위를 말하는데요,
함수 스코프라고 하는 것을 다르게 말한다면 함수 밖에서 선언된 변수들은 모두 전역 변수로 할당된다는 뜻입니다.
브라우저의 경우 var로 선언된 변수는 전역 객체인 window의 프로퍼티로 할당됩니다.
if(true) {
var num = 2
}
console.log(num) // 2
window.num // 2위 코드를 보면 if문 안에서 선언된 num이라는 변수를 if문 밖에서 접근했을 때 사용할 수 있는 것을 볼 수 있습니다.
코드 라인 수가 몇 줄 되지 않는 간단한 예제문에서는 큰 문제로 보이지 않지만, 대형 프로젝트를 진행중이라고 했을 때 실수로 다른 변수에 접근해 값을 바꾸면 서비스 자체에 문제가 생길 위험이 있습니다.
따라서, 함수 스코프로 할당되는 var 변수는 장점이 아닌 큰 단점이라고 볼 수 있겠습니다.
변수의 중복 선언이 가능하다.
var 키워드로 선언한 변수를 똑같이 선언해도 오류가 발생하지 않습니다.
var x = 1
var x = 2
console.log(x) // 2위 코드를 보면 x라는 변수가 중복으로 선언되었음에도 오류가 발생하지 않고 정상 실행됩니다.
이 문제 또한 코드 라인 수가 길어지면 이전에 선언했던 변수를 다시 선언하는 실수를 모르고 지나칠 가능성이 있습니다.
변수 호이스팅의 문제가 발생한다.
호이스팅이라는 것이 낯설게 느껴질 수 있을 것 같습니다.
변수가 생성되면 선언 ➔ 초기화 ➔ 할당 의 3단계를 거칩니다.
스코프에 변수를 등록한 후 변수를 저장할 공간을 확보한 후(선언) 변수를 undefined로 초기화합니다.(초기화)
그 다음에 할당문에 도달해 값이 할당되었을 때 할당된 값으로 변수를 초기화합니다.(할당)
이 3단계의 과정에서 변수에 값이 할당되었을 때 사용되는 것이 오류의 위험이 적을 것입니다.
하지만 변수 호이스팅의 문제는 변수가 선언될 때 선언과 초기화가 동시에 이루어지기에 발생합니다.
console.log(example) // undefined
var example = 'ex'
console.log(example) // ex위의 코드는 ES5 환경에서의 코드입니다.
코드를 보면 example이라는 변수가 선언이 되지 않았음에도 에러가 발생하지 않고 undefined가 출력됩니다.
이런 문제를 변수 호이스팅이라고 하며, 쉽게 말하면 변수가 할당되지 않았음에도 참조가 가능한 상태를 말합니다.
위와 같은 문제들이 ES5까지에는 빈번하게 있었습니다.
ES6(ESNext) 이후에는 var의 대체제로 const와 let을 사용하면서 var의 문제점들을 해결했습니다.
const/let의 특징
const/let 키워드로 선언된 변수는 블록 스코프를 갖는다.
여기서 블록의 범위는 쉽게 if, while, for, function 등의 중괄호를 기준으로 생각하시면 됩니다.
함수 스코프 대신 블록 스코프를 사용하면서 var을 사용했을 때의 변수 호이스팅과 같은 문제도 해결되고 코드 관리(변수 관리)도 수월해졌습니다.
if(true) {
const block = 2
}
console.log(block) // Uncaught ReferenceError: block is not definedvar 키워드를 사용했을 때는 발생하지 않던 에러가 const 키워드를 사용하니 에러가 발생합니다.
블록 단위로 변수를 관리하기 때문에 무작위로 변수를 가져다 쓰던 var의 문제점을 해결할 수 있습니다.
또한, const let 으로 선언된 변수는 전역객체의 프로퍼티가 아닙니다.
변수의 중복 선언이 불가능하다.
var 키워드의 중복 선언 부분에서 사용한 예제를 ES6+ 환경에서 실행해보겠습니다.
const duplicate = 1
const duplicate = 2 // Uncaught SyntaxError: Identifier 'dup' has already been declared위에서는 발생하지 않았던 SyntaxError가 발생합니다.
이처럼 변수의 중복 선언이 불가능해졌습니다.
변수의 호이스팅 문제점이 해결된다.
const let 은 변수를 생성할 때 선언과 초기화가 분리되어 진행됩니다.
변수를 생성하고 선언까지 한 후 일시적 사각지대라고 불리는 TDZ 구간에 들어갑니다.
TDZ 구간에 있는 변수는 선언은 되어있지만 아직 초기화가 되지 않아 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태라고 할 수 있습니다.
또한, 변수 값이 할당될 때 초기화 및 값 할당이 이루어집니다.
console.log(hoisting) // Uncaught ReferenceError: hoisting is not defined쉽게 말하자면 ES5까지에서는 선언 ➔ 초기화 할당 이렇게 되어있었다면, ES6 이후부터는 선언 초기화 ➔ 할당 으로 바뀌어 값이 할당되지 않으면 변수에 메모리가 할당되지 않아 변수가 선언이 되어야만 참조 가능합니다.
그렇다면, const와 let의 차이점은 무엇일까요?
const
한 번 값을 대입하면 다른 값을 대입할 수 없습니다.(값을 변경할 수 없습니다.)
다른 값을 대입하려고 하면 Uncaught TypeError: Assignment to constant variable 라는 에러가 발생합니다.
const 는 초기화 시 값을 대입하지 않으면 Uncaught TypeError: Missing initializer in const declaration라는 에러가 발생합니다.
let
값이 변경될 가능성이 있는 변수에 사용합니다.(값의 변경이 가능합니다.)
let 은 초기화 시 값을 대입하지 않아도 에러가 발생하지 않습니다.
Google Javascript Style Guide
구글의 자바스크립트 스타일 가이드에 따르면, 아래와 같이 나와있습니다.
Declare all local variables with either const or let.
Use const by default, unless a variable needs to be reassigned.
The var keyword must not be used.
모든 로컬 변수들은 const와 let을 사용해서 변수를 사용해야 합니다.
값을 재할당하는 경우가 아니라면 const 를 디폴트로 사용합니다.
var 는 절대 사용하지 않아야 합니다.
참고자료
Node.js 교과서
[자바스크립트] 변수 선언 방식 차이: var / let / const
JavaScript let, const 란? 그리고 왜 써야만 하는가? (ES6)
