[JavaScript문법]Hoisting

들어가며

이 글은 코드팩토리님의 JavaScript 문법강의를 본 후 정리한 글입니다.

Hoisting

Hoisting이란 모든 변수의 선언문이 코드의 위쪽으로 이동한 것처럼 느껴지는 현상을 의미합니다. 이렇게 말로 적으면 무슨말인지 감이 잘 안잡힐 수도 있습니다. 그래서 예를 들어볼게요.

var name = "한상욱";
console.log(name);

>> 한상욱

이 코드는 먼저 name이라는 변수에 "한상욱"이라는 값을 할당한 후, 콘솔에서 출력하는 코드입니다. 자바스크립트는 코드를 위부터 아래로 실행하기 때문입니다.

그렇다면 아래 코드는 어떻게 될까요?

console.log(name);
var name = "한상욱";
console.log(name);

>> undefined
>> 한상욱

당연히 선언이전에 log 함수는 에러가 발생할 줄 알았으나, 오히려 undefined가 출력되었습니다. undefined는 선언만 하고 값을 할당하지 않을 경우입니다. 그래서 위 코드는 아래처럼 동작한 것과 일치하게 됩니다.

var name;
console.log(name);
name = "한상욱";
console.log(name);

>> undefined
>> 한상욱

하지만 실제로 첫번째 줄의 코드는 없는것이죠. 이처럼 변수를 선언하지 않았지만, 변수를 선언하는 부분이 코드의 맨 위로 이동한 것처럼 느껴지는 것이 Hoisting 현상입니다.

let과 const

let과 const로 선언한 변수도 Hoisting 현상이 일어납니다. 이 코드는 어떻게 될까요?

console.log(name);

>> ReferenceError: name is not defined

name 변수는 이미 hoisting으로 undefined로 정의되어 있지만, 값이 할당되지 않았다는 의미입니다. 그렇다면 밑줄에 let을 이용해서 name변수에 값을 할당하고 다시 실행해보겠습니다.

console.log(name);
let name = "한상욱";
>> ReferenceError: Cannot access 'name' before initialization

이러한 경우에는 name을 초기화하기 전에는 접근할 수 없다는 에러로 변경됩니다. 즉, let으로 선언한 변수들은 Hoisting 현상을 방지해줄 수 있습니다. const도 마찬가지죠. 그래서 변수는 var 보다 let, const로 선언하는 것이 hoisting 현상을 막을 수 있기 때문에 바람직합니다.