/ JAVASCRIPT

호이스팅이란 , var, let, const 차이

JavaScript 관련 글입니다.

호이스팅에 대해서

“hoisting”의 사전적 의미는 “끌어올리기”라는 뜻이다. 일단 hoisting은 함수가 실행되기전에 안에 있는 변수들을 그 유효범위의 최상단으로 끌어올리는 것을 의미합니다.

var 키워드의 문제점?

ES6 이전까지는 변수를 선언할 때 var 키워드만 사용할 수 있었습니다. 하지만 var 키워드는 문제점이 있었습니다.

1) 변수의 중복 선언 허용 문제

var x = 1;
var x = 2;
console.log(x);

x라는 동일한 이름의 변수가 선언된 것을 확인할 수 있는데, 먼저 선언된 x의 값이 변경되버리는 문제가 발생합니다.

2) 함수 레벨 스코프

var 키워드로 선언한 변수는 함수의 코드블록만 지역 스코프로 인정합니다. 함수를 제외하고 if나 for문안에 var 키워드를 사용하여 변수를 선언했다면? 지역변수로 취급을 하지않고 전역변수로 취급됩니다. 따라서 함수레벨스코프는 전역변수를 남발할 가능성을 높입니다.

3) 변수 호이스팅

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 그 선언문이 범위의 최상단으로 끌어 올려진 것처럼 동작합니다. 변수 선언문 이전에 그 변수를 참조할 수 있다는 것인데, 에러를 발생시키지 않지만 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남기는 문제가 있습니다.

let과 const의 등장

이런 var의 문제를 해결하고자 ES6에서 let과 const를 도입하였습니다. let 키워드부터 살펴보겠습니다.

let은 변수 중복 선언을 금지하고, 함수의 코드블록만 지역스코프로 인정하는 var와 달리 모든 코드블록을 지역스코프로 인정하는 블록레벨스코프를 따릅니다. 또한 let키워드로 선언한 변수는 “선언”과 “초기화”단계가 분리되어 진행됩니다. 런타임 이전에 자바스크립트 엔진에 의해 선언단계가 먼저 진행되지만 초기화 단계는 실제 변수 선언문에 도달했을 때 실행됩니다.

let 키워드로 선언한 변수는 스코프의 시작부터 초기화단계가 시작되는 시점(변수 선언문)까지 변수를 참조할 수 없습니다. 이 구간을 일시적 사각지대(Temporal Dead Zone) 라고 합니다.


이번엔 const 키워드를 알아보겠습니다.

const 키워드는 상수를 선언하기 위해서 사용되는데, 꼭 상수만을 위해 사용하는 것은 아닙니다.
const는 대부분 let과 동일하지만 const 키워드로 선언된 변수는 꼭 선언과 동시에 초기화를 해주어야하고 변수의 재할당이 불가능합니다. 주의해야할 점이 있는데, const로 선언된 변수에 원시값을 할당한 경우는 값을 변경하지 못하는게 맞지만 const로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있습니다. const는 재할당을 금지하는 것이지 불변을 의미하는 것이 아닙니다.

그럼 무엇을 보통 쓸까?

변수 선언은 기본적으로 const를 사용하는 것이 좋고 let은 재할당이 필요할 때 사용하는 것이 좋습니다. 추가적으로 var는 권장하지 않는 방법입니다.

End.