I am 호이스팅 에요.

호이스팅이란 js 코드가 실행되면 선언된 변수, 함수, 클래스, import가 최상단에서 선언되는 특성이다!

하지만 실제 코드의 함수나 변수가 올라가지는 않는다!

변수

• var
• const, let

var

var은 호이스팅 되면 최상단에서 선언과 초기화가 된다 그리고 변수에 할당하는 코드를 만나면 값을 할당한다!

 

이게 무슨 소리냐? 코드로 확인해보자

console.log("선언 전", a); // 선언 전 undefined
var a = "어 나 a";
console.log("선언 후", a); // 선언 후 어 나 a

 

코드를 실행하면 아래의 순서로 작동한다

1.  호이스팅 되어 a를 선언하고 undefined로 초기화 한다
2. log를 남긴다 // 선언 전 undefined
3. a에 "어 나 a" 값을 할당한다
4. log를 남긴다 // 선언 후 어 나 a

const, let

const와 let은 var 와는 다르게 TDZ(Temporal Dead Zone)이라는 개념이 존재한다

 

TDZ는 변수를 선언하고 초기화를 할때까지를 TDZ 라고 부른다 

var는 TDZ가 없는 이유는 호이스팅 되면 바로 선언하고 초기화가 되기 때문이다!!

 

const는 재할당을 하면 안되므로 선언과 할당을 같이 해야한다

console.log(a); //ReferenceError
const a = 10;
console.log(a); // 10

 

코드를 실행하면 아래와 같은 순서로 작동한다

1. 호이스팅 되어 a를 선언하고 TDZ에 들어간다
2. 첫번째 console.log는 초기화가 되지 않아 ReferenceError 발생
3. 실제 선언, 할당하는 코드를 만나면 a를 초기화 하고 바로 값을 할당한다
4. log를 남긴다 // 10

 

let도 똑같이 선언만 최상단에서 진행지만 코드가 실행됨에 따라 실제 변수를 선언하는 코드를 만나면 undefined로 초기화 되고 할당하는 코드를 만나면 값을 할당한다

 

console.log(a); //ReferenceError
let a;
console.log(a); // undefined
a = "나 let ㅅㄱ";
console.log(a); // 나 let ㅅㄱ

 

코드를 실행하면 아래와 같은 순서로 작동한다

1. 호이스팅 되어 a를 선언하고 TDZ에 들어간다
2. 첫번째 console.log는 초기화가 되지 않아 ReferenceError 발생
3. 실제 선언 하는 코드를 만나면 undefined로 초기화
4. log를 남긴다 // undefined
5. 할당하는 코드를 만나면 "나 let ㅅㄱ" 할당
6. log를 남긴다 // 나 let ㅅㄱ

함수

자바스크립트에서는 함수도 호이스팅을 한다!

하지만 모든 함수에서 호이스팅이 일어나지는 않고 함수 선언식만 가능하다

 

함수 선언식

a();

function a() {
  console.log("I am 선언식 에요");
}

 

이런식으로 a함수를 선언전에 사용해도 함수가 호이스팅되어 정상적으로 작동한다

 

다른 경우 ex) 표현식, 람다식

표현식과 람다식의 경우는 호이스팅 되지 않는다!

a(); // ReferenceError

const a = function() { console.log("aaaa")} // 함수 표현식

 

b(); // ReferenceError

const b = () => console.log("bbbbb");

 

마무리

원래는 그냥 호이스팅 하면 변수나 함수들이 위로 올라간다? 이렇게만 알고 있었는데 자세하게 알아보니

이제는 다른사람들이 물어본다면 자신있게 설명할수 있을것 같다!