Hoisting
호이스팅에는 한가지 오해가 있다.
호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 알고 있을 수도 있지만, 실제로는 그렇지 않다.
변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일차한 곳에 있다.
catName("Chloe");
function catName(name) {
console.log("My cat's name is " + name);
}
함수를 작성하기 전에 호출하였지만 함수가 정상 작동하는 것을 확인할 수 있다.
var x = 1; // x 초기화
console.log(x + " " + y); // '1 undefined'
var y = 2;
// 아래 코드는 위 코드와 같은 방식으로 동작한다.
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y
Hoisting의 흔한 오해
이번에도 Taehoon님의 호이스팅 설명 영상을 참고해서 다시 머릿속에, 그리고 글로 정리해보려고 한다.
호이스팅은 간단하게, 변수나 함수를 호이스팅 덕에 선언하기 전에도 사용할 수 있다는 의미이다.
사실 호이스팅은 누군가 이렇게 작동하도록 추가로 만든 것이 아니라 그냥 놔두면 이렇게 작동하는 것이다.
이를 선배 개발자들이 친절하게 호이스팅이라는 용어로 만들어주었지만 오해가 생겨버린 것이다.
우리가 자바스크립트 인터프리터를 직접 만든다고 생각해보자. 가장 먼저 뭘 하는 것이 좋을까?
선언된 변수나 함수가 뭐가 있는지 긁어모아서 사전을 만든 다음, 코드가 실행되서 변수를 부르면 사전에서 하나씩 꺼내서 주는 방식이 간단할 것이다.
변수에 값을 넣는 것은 코드가 실행되어야 하기 때문에 값을 미리 불러다가 쓸 수는 없게 해야 한다.
let이랑 const는 상대적으로 나중에 추가된 변수 선언 방법이다.
let과 const는 호이스팅이 지원되지 않는다고 생각할 수 있지만 그렇지는 않다. 단지 기능이 추가된 것 뿐이다.
var와는 다르게 let과 const는 코드를 선언하는 구문에 도달하기 전에는 변수를 사용할 수 없도록 하는 기능을 갖고 있는 것이다.
const hello = 100;
function print1() {
console.log(hello); // 100
}
function print2() {
console.log(hello); // Error
const hello = 200;
}
'JavaScript > Vanilla' 카테고리의 다른 글
DOM (Document Object Model) (0) | 2021.07.24 |
---|---|
객체의 얕은 복사와 깊은 복사 (0) | 2021.07.24 |
Spread와 Rest 문법 (0) | 2021.07.24 |
Closure가 어렵다면 내 탓이 아니라 JS 탓이다! (0) | 2021.07.22 |
let / const / var 그리고 scope (0) | 2021.07.18 |