[JavaScript] 호이스팅(Hoisting)

2022. 7. 13. 16:26WEB/Javascript

# Hoisting

- 코드를 실행하기 전 실행 가능한 코드를 형상화 하고 구분하는 과정을 거치는데 이 과정에서 var, let, const, function등 을 스코프에 등록을 한다.

- 위의 과정 덕분에 해당 코드가 실행전에 이미 변수 or 함수 선언이 되어 있기 때문에 선언문보다 호출문이 먼저 나와도 오류 없이 동작이 가능하다. 그러나 var키워드로 선언한 문장만 오류가나지 않고 값은 undefined인 상태이다. 

- const는 재할당이 불가능 하기때문에 호이스팅현상이 일어날 수 없다.

- let, const는 선언만 메모리에 저장이되고 초기화 되지 않은 상태이기 때문에 변수를 참조할 수 없다. 따라서 에러가 난다.

/* 정상 작동 */
console.log(text); //undefined
text = 'hello hoisting!';
var text;
console.log(text);	//hello hoisting

 

foo1(); // 작동
foo2(); // error - foo2 is not a function
function foo1() {
  console.log('Hello');
}
var foo2 = function() {
  console.log('world');
}

- 2번째줄의 foo2는 undefined이기 때문에 호출시 함수가 아니라는 오류를 낸다. 호이스팅현상은 일어난 상태이다.

- 함수 선언식은 호이스팅 현상(foo1)이 일어나고 함수 표현식(foo2)은 호이스팅이 일어나지 않는다.

- foo1은 var과 다르게 undefined로 나오지 않고 function으로 나오고 실행도 된다.

- es5가 많이 때문에 아직까지는 var가 어떻게 동작하는지 알고 있어야함...

 

'WEB > Javascript' 카테고리의 다른 글

[JavaScript] DOM(Document Objecet Model)  (0) 2022.07.14
[JavaScript] 배열, 객체  (0) 2022.07.14
[JavaScript] 블록 스코프 vs 함수 스코프  (0) 2022.07.13
[JavaScript] 클로져  (0) 2022.07.12
[JavaScript] 깊은복사, 얕은복사  (0) 2022.07.10