[JS인터뷰준비] 호이스팅

Bonggus·2021년 10월 31일
0

자바스크립트

목록 보기
22/23
post-thumbnail

호이스팅

1. 현상파악

console.log(test());
console.log(testValue());

function test() {
  return 'test';
}

var testValue = function() {
   return "testValue"
}

예상

  • 둘다 undefined?

실제

  • test: test
  • testValue:Error

함수의 두가지 리터럴

  1. 함수선언식: function name() {}
  2. 함수표현식: const name = function() {}

함수선언은 코드를 실행할 때 함수를 포함하는 스코프 최상단으로 끌어올려진다. 그래서 함수 선언 전에 함수를 실행해도 에러가 발생하지 않는다. 이렇게 함수선언식은 선언 전에 호출이 되어도 먼저 선언된것 처럼 상단으로 끌어올려지데 이러한 현상을 호이스팅(hoisting)이라고 한다.

반면 함수표현식은 변수를 통해서 함수를 참조하기 때문에 호이스팅이 일어나지 않는다. 그렇다면 왜 표현식은 호이스팅이 일어나지 않을까?

변수 호이스팅

console.log(testValue);
console.log(undeclared);

var testValue = 100;

예상

  • undeclared: error
  • testValue: 100

실제

  • undeclared: error
  • testValue: undefined

선언하지 않은 변수는 당연히 에러가 난다. 하지만, 선언한 변수도 까지 끌어올려지지는 않는다.

즉, 함수표현식의 경우 변수에 선언하기 때문에 호이스팅이 일어나긴한다. 하지만, 까지 끌어올려지는 것이 아니기 때문에 함수가 실행되지는 않는다.

다시 함수 호이스팅

console.log(testValueVar())

var testValueVar = function testValue() {
  return 'hoist test';
}

예상

  • testValueVar: 'hoist test'

실제

  • testValueVar: Error

변수는 함수와 달리 선언만 끌어올려진다. 함수에 이름이 있다 하더라도 변하지 않는다.

블록 단위에서 선언이 이루어 진다면?

console.log(test);

var condition = false;

if (condition) {
  var test = 'this is test';
}

예상

  • test: undefined

실제

  • ttest: undefined

에러가 발생하지 않는 이유는 무엇인가? if문 안에 있는 공간은 전역공간이다. 그래서 test라는 선언 자체가 호이스팅되어 위로 올라와서 undefined가 출력된다

함수 안에서 변수선언과 초기화가 이루어지는 경우

console.log(test());
console.log(value);

function test() {
  var value = 'hoist';
  return value + ' TEST';
}

예상

  • test: undefined
  • value: error

실제

  • test: hoist TEST
  • value: error

함수선언은 호이스팅되어 실행이 가능하다. value 변수선언이 이루어졌는데, 변수선언의 경우코드를 실행할 때 변수를 포함하는 스코프 최상단으로 끌어올려진다. value는 함수스코프 안에 있기 때문에 자신이 속한 공간의 최상단(함수스코프)으로 끌어올려진다.

2. 호이스팅이 일어나지 않는 상황

console.log(tset1);
console.log(tset2);
console.log(Tester);

let test1 = 'let';
const test2 = 'const';
class Tester {
  constructor() {
    this.name = 'test';
  }
}

let tester = new Tester();

예상

  • tset1: error
  • tset2: error
  • Tester: error

실제

  • tset1: error
  • tset2: error
  • Tester: error

**블록 스코프를 생성하는 let, const는 호이스팅이 일어나지 않는다. class 또한 마찬가지 이다.

var로 선언된 변수는 호이스팅되지만 let, const로 선언된 변수와 상수는 TDZ(Temporal Dead Zone 임시 접근 불가구역)구역에 배치된다. 이 값들은 선언이 실행된 후에 TDZ에서 제거되어 사용이 가능한 상태가 된다.

정리

  • 함수 선언과 변수 선언은 코드를 실행할 때 해당 선언 스코프 최상단으로 끌어올려진다. 이러한 현상을 호이스팅이라고 한다.
  • 선언한 변수의 값은 끌어올려지지 않는다.
  • 함수선언식으로 만들었을 경우 실행까지 가능하다.
  • let, const, class 선언은 호이스팅 현상이 일어나지 않는다.

출처

profile
프론트엔드

0개의 댓글