var let const 의 차이 + Hoisting

냥무룩·2022년 1월 26일

JavaScript const hoisting let node.js var

Javascript

목록 보기

2/2

변수 선언

var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.

변수를 한 번 더 선언해도 에러가 나지 않고 각기 다른 값이 출력된다.
이는 나중에 코드량이 많아지게 되면 중복선언으로 값이 바뀌거나 하는 문제가 생길 수 있다.

ES6 이후로 추가된 것이 let과 const 이다.

위의 코드에서 var 대신 let을 쓰게되면

let은 재선언이 되지 않는다. (const도 마찬가지다)

그리고 let과 const의 차이는 변수의 재할당에 있다.

let의 경우 변수의 재할당이 가능하다.

const의 경우 변수의 재할당이 불가능하다. 정적인 상수의 경우 const를 사용하여 선언하면 되겠다.

스코프

var는 function-scoped 이고, let, const는 block-scoped 이다.

var는 함수스코프라 varTest에서 보는 바와 같이 재선언이 되는 것을 볼 수 있지만 let은 블록스코프라 다른 변수로 취급되어 다루어지는 것을 볼 수 있다.
var를 사용하면 혼동될 우려가 많다.

그렇다면 var는 재선언이 가능한 걸까?
var을 잘 사용하지 않는 이유를 더 자세히 알아보자
먼저 호이스팅의 개념을 먼저 짚고 가겠다.

호이스팅(Hoisting)의 개념

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

호이스팅이란

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
유효 범위: 함수 블록 {} 안에서 유효
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
실제 메모리에서는 변화가 없다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.

하지만, var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.