호이스팅(hoisting)

📄 호이스팅(hoisting)

• 정의: 자바스크립트 엔진이 식별자들을 최상으로 끌어올리는 것

⭐ 규칙

1. 변수는 선언부만 끌어올린다.
2. 함수 선언은 전체를 끌어올린다.
3. 함수 표현식은 할당된 변수 선언부만 끌어올린다.
4. let을 이용한 호이스팅은 불가능하다.

hello2(); // 함수 호출

function hello2() {
  //함수 선언
  console.log("hello2");
}

함수뿐만 아니라 var키워드를 통한 호이스팅도 가능합니다.

age = 6;
age++;
console.log(age);

var age;

주의할 점

var로 변수를 선언함과 동시에 값을 지정했다면, 값을 제외한 선언만 호이스팅 됩니다.

console.log(name);

name = "Mark";

console.log(name);

var name = "Sujin";

결과

이렇게 호이스팅되어 먼저 출력된 name은 값을 제외한 선언만 끌어올리기 때문에 undifined라고 출력됩니다.

함수를 선언했을 때는 함수 전체를 끌어올립니다.

function a() {
  var b; // 수집 대상 1. 변수는 선언부만 끌어올립니다.
  function b() {} // 수집 대상 2. 함수 선언은 전체를 끌어올립니다.

  console.log(b);
  b = "bbb";
  console.log(b);
  console.log(b);
}
a();

결과

[Function: b]
bbb
bbb

만약 함수 표현식을 이용해서 함수를 선언했다면, 전체가 아닌 변수 선언부만 끌어올립니다.

📄 let을 이용한 호이스팅은 불가능!

let을 이용한 호이스팅은 불가능 합니다.

let은 무조건 선언이 우선시 되어야 합니다.

console.log(name);

name = "MARK";

console.log(name);

let name;

결과

출처

• 패스트캠퍼스 프론트엔드 강의
• 코어 자바스크립트