[JS ES6]-[7] 호이스팅 핵심만 이해하기

안녕하세요

이번 글에서는 자바스크립트에서의  호이스팅 핵심만 알려드리겠습니다.

 

썸네일

1. 호이스팅의 개념

변수나, 함수를 선언하면, 변수나 함수의 선언 부분을 범위 맨 위로 끌어올려서 해석하는 현상을 의미합니다.

 

선언 부분에 대한 이해가 없으시면 아래 블로그를 참조해 주세요

(javascript) 변수 핵심만 이해하기

 

1.1 예제로 설명하기

function say_hello(){
  console.log('hello');
  var name = 'kim';
}

위에선 함수를 하나 만들었습니다.

그런데 보이진 않지만, 자바스크립트에선 코드를 호이스팅을 통해 해석합니다.

 

 

function say_hello(){
  var name; 
  console.log('hello');
  name= 'Kim';
}

위에서 호이스팅의 개념을 보시면 선언 부분을 맨 위로 끌어올린다고 했죠?

그래서 위에 코드처럼 동작합니다.

함수나 변수는 다 호이스팅이 동작합니다.

 

위에 예시에서 name을 출력하려고 해 보겠습니다.

  console.log(name);  
  var name = 'kim';
  console.log(name);

 

그럼 호이스팅이 일어나 선언 부분을 끌어올리기 때문에 아래와 같이 동작합니다.

var name;
console.log(name);  //undefined
name = 'kim'
console.log(name);  //kim

js는 값을 할당받지 못한 변수는 undefined를 가지기에, 처음 undefined가 찍힙니다.

 

1.2 let, const에서의  호이스팅

function say_name() {
  console.log(name);  //err
  let name = 'kim';
}

let, const 키워드도 호이스팅이 되지만 위에 예시에선 에러가 나는데요.

왜 그런지 설명해 드릴게요.

 

 

변수를 사용할 수 있게, 처음 값을 할당하는걸, 변수의 초기화(initialization)라고 부릅니다.

 

 

변수는 어떠한 값도 할당되지 않으면, 자동으로 ‘undefined’가 할당(초기화) 되는데요.

let과 const의 호이스팅은 변수의 선언 부분만 끌어올립니다.

자동으로 undefined를 할당하는 초기화는 그 위치에 그대로 있어서 err가 나는 거죠.

console.log(name)  //err
let name;
console.log(name); // undefined

 

 

var는 선언 + 초기화가 호이스팅 되기 때문에 err가 안 나고 undefined가 출력됩니다.

console.log(name)  //undefined
var name;
console.log(name); // undefined

 

그냥 let, const는 엄격하게 사용할 수 있는 변수구나라고 외우면 됩니다.