-
[JS] 호이스팅JavaScript 2019. 8. 2. 14:44
호이스팅
변수의 호이스팅
function foo() { console.log(a); // undefined var a = 100; console.log(a); // 100 } foo();
다른 프로그래밍 언어의 경우 위의 코드를 실행하면 a가 선언되지 않았는데 a를 호출했기 때문에 에러가 발생합니다. 하지만 자바스크립트의 경우는 호이스팅을 통해 a의 선언을 함수 제일 위에서 해주기 때문에, 에러 없이 undefined가 출력됩니다. 위 코드는 사실 아래와 같은 코드입니다.
function foo() { var a; console.log(a); // undefined var a = 100; console.log(a); // 100 } foo();
함수의 호이스팅
foo(); function foo() { console.log('출력'); }
위와 같은 코드의 경우, 변수 호이스팅과 마찬가지로 함수선언이 위로 끌어올려지기 때문에 제대로 동작합니다. 하지만 아래와 같은 함수 표현식의 경우에는 오류가 발생합니다.
foo(); // foo is not a function var foo = function() { console.log('출력'); };
위의 코드는 아래와 같기 때문에 오류가 난다.
var foo; foo(); // foo is not a function foo = function() { console.log('출력'); };
위와 같이 foo 선언을 위로 호이스팅 해버리기 때문에, foo가 실행될 때는 아직 변수로 선언이 된 상태일 뿐인 것입니다. 따라서 foo는 함수가 아니라는 에러 메세지를 보게 됩니다.
호이스팅 이해가 어렵다면 호출 전에 선언하는 습관을 들이자
'JavaScript' 카테고리의 다른 글
[JS] input 입력값 byte 체크 (키보드이벤트) (0) 2018.12.19 [JS] jQuery .on() 이벤트 (0) 2018.12.11 [JS] jQuery .trigger() 함수 (이벤트/이벤트핸들러/함수 비교) (0) 2018.12.11 [JS] ES6 기본 (0) 2018.11.21 [JS] javascript 이벤트 버블링 (0) 2018.11.21 댓글