[JavaScript] 호이스팅(Hoisting)
2022. 7. 13. 16:26ㆍWEB/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 |