[js] hoisting(호이스팅)

javascript_호이스팅(hoisting) 이란?

 = 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것이다. (var, 함수의 경우가 있다)

 

변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것이다.

변수를 정의하는 코드보다 사용하는 코드가 먼저 선언될 수 있다.

* 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태

 

function sayHello(name) {
  console.log("안녕하세요 제 이름은 " + name + "입니다");
}

sayHello("홍길동");

 

위의 코드가 일반적으로 코드를 작성하는 순서이다.

 

출력값

안녕하세요 제 이름은 홍길동입니다.

 

 

아래의 코드는 js에서 함수 호출이 함수 자체보다 앞서 존재하는 방식이다.

sayHello("홍길동");

function sayHello(name) {
  console.log("안녕하세요 제 이름은 " + name + "입니다");
}

출력값

안녕하세요 제 이름은 홍길동입니다.

 

이 코드 역시 잘 동작하고 실제 JavaScript에서 동작하는 방식 (c와 같은 언어에서는 동작하지 않음)

 

 

호이스팅은 다른 자료형과 변수에도 잘 동작, 변수를 선언하기 전에 먼저 초기화하고 사용할 수 있다.

 

---

 

var 선언 시

console.log(number); // 호이스팅한 var 선언으로 인해 undefined 출력
var number; // 선언
number = 11; // 초기화

위의 코드는 var로 호이스팅된 변수 number로 인해 undefined가 출력된다. (let과 const는 error 발생)

 

출력값

undefined

 

---

 

let 선언 시

console.log(number); // ReferenceError
let number; // 선언
number = 11; // 초기화

출력값

ReferenceError: cannot access 'number' before initialization

 

---

 

const 선언 시

console.log(number); // SyntaxError
cosnt number; // 선언
number = 7; // 초기화

 

출력값

SyntaxError: Missing initailizer in const declaration

 

console.log(number); // ReferenceError
number = 6; // 초기화

 

출력값

ReferenceError: number is not defined

 

 

 

참고:

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN