Hoisting

 

JavaScript는 호이스팅이란 아주 유명한 특징이 있다.

 

특히 변수 var의 호이스팅은 장점도 있겠으나 여러 문제를 일으켰고, 이를 방지하기 위해 let과 const라는 새로운 변수가 생겼다.

그 후로는 let과 const를 사용하면서 호이스팅의 문제가 줄어들었지만, JS의 특별한 작동 방법을 알기 위해서라도 호이스팅을 알아볼 필요가 있다.

 

변수의 Hoisting

 

변수의 호이스팅은 변수의 선언이 발생한 스코프 최상단으로 이동하는 듯한 현상이다.

이는 자바스크립트를 실행하면 제일 먼저 코드 안의 모든 변수를 선언하는 과정을 거치기 때문이다.

 

변수는 결국 메모리 주소를 의미한다.

var a = 10; 의 뜻은 a에 해당하는 메모리 주소에 10이라는 숫자를 넣어놓는다는 의미이다.

메모리 주소는 외우기가 극도로 힘들기 때문에 이를 변수명으로 대체하여 사용할 뿐이다.

 

이런 변수를 정의하기 위해서는 3단계를 거치게 된다.

1. 선언

2. 초기화

3. 할당

 

var은 선언과 동시에 그 값을 undefined로 초기화를 진행한다.

따라서 var로 정의한 변수는 그 위치와 상관없이 출력이 되긴한다.

 

console.log(hello) // undefined

var hello = 'Hello World!'

console.log(hello) // Hello World!

 

하지만 변수가 정의된 위치보다 이전에 변수를 사용하려고 하면 아직 값이 undefined에서 멈춰있기 때문에 우리가 원하는 값이 아니라 undefined가 출력된다.

 

이것이 호이스팅의 문제이다.

에러를 출력하여 우리에게 실행구문이 잘못되었음을 알리는 게 아니라 일단 돌아간다.

그럼 개발자의 입장에서 어떤 구문이, 어떤 순서가 잘못 되었는지 알기가 쉽지않다.

 

이런 문제점을 막기 위해서 생긴 변수가 let, const이다.

let과 const는 처음에 선언만 진행되고 초기화는 그 이후에 이루어진다.

따라서 아무런 값도, 메모리 주소도 할당되지 않았기 때문에 이를 불러올 수 없다.

 

console.log(hello) // Reference error

const hello = 'Hello World!'  //let의 결과와 같다.

console.log(hello) // Hello World!

 

위와 같이 let과 const를 사용하면 그 이전에 변수를 불러올 수 없다. (에러가 일어난다.)

따라서 개발자 입장에서 어디에서 어떤 문제가 있는지 쉽게 알아차릴 수 있다.

 

이런 편의성 때문에 현재 var는 거의 사용되지 않고 있다.

같은 이유로 변수에서 호이스팅 때문에 큰 문제가 발생할 가능성도 전보다 훨씬 줄었다고 한다.

 

함수의 Hoisting

 

자바스크립트는 함수도 마치 변수처럼 사용된다.

특히 자바스크립트의 함수는

1. 함수 선언문

2. 함수 표현식

 

// 함수 선언문
function hello1() {console.log("test");}

// 함수 표현식
let hello2 = function () {console.log("test");};

 

으로 쓸 수 있는데, 이때 함수표현식은 성질이 변수와 완전히 같다고 볼 수있다.

따라서 호이스팅 단계에서 함수의 내용을 가지지 않고 호이스팅이 된다.

만약 var를 이용해서 함수표현식을 사용하면 함수를 정의하는 코드 전에서는 그냥 undefined가 변수에 담겨있는 것이다.

 

console.log(hello);  //undefined

var hello;

hello = function () {
  console.log("test");
};

hello();  // test

 

하지만 함수 선언문은 변수와는 다르게 호이스팅이 이루어진다.

 

그냥 함수 선언문은 무조건 내용을 다 가지고 호이스팅이 이루어진다.

사실 어디에서 선언하든 아무곳에서나 사용할 수 있는 것이다.

 

hello(); // test

function hello() {
  console.log("test");
}

hello(); // test

 

-끝-