tl; dr 모든 것이로드 될 때까지 아무것도 호출하지 않으면 괜찮습니다.
편집 : 일부 ES6 선언 ( let, const)을 다루는 개요 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet
이 이상한 행동은
- 기능을 정의하는 방법 및
- 당신이 그들을 부를 때.
다음은 몇 가지 예입니다.
bar(); //This won't throw an error
function bar() {}
foo(); //This will throw an error
var foo = function() {}
bar();
function bar() {
foo(); //This will throw an error
}
var foo = function() {}
bar();
function bar() {
foo(); //This _won't_ throw an error
}
function foo() {}
function bar() {
foo(); //no error
}
var foo = function() {}
bar();
이것은 호이 스팅 이라고 불리는 것 때문입니다 !
함수를 정의하는 방법에는 함수 선언 과 함수 표현식의 두 가지가 있습니다 . 차이점은 성가신, 분, 그래서 그냥이 약간 잘못된 말을하자 : 당신처럼 작성하는 경우 function name() {}, 그것은의 선언 , 그리고 당신처럼 쓸 때 var name = function() {}(또는 반환에 할당 된 익명 함수, 그런 일이), 그것의 함수 표현식 .
먼저 변수가 처리되는 방법을 살펴 보겠습니다.
var foo = 42;
//the interpreter turns it into this:
var foo;
foo = 42;
이제 함수 선언 이 처리되는 방법 :
var foo = 42;
function bar() {}
//turns into
var foo; //Insanity! It's now at the top
function bar() {}
foo = 42;
이 var진술은 생성 을 foo맨 위에 "던져" 지만 아직 가치를 할당하지는 않습니다. 함수 선언이 다음 줄에 나오고 마지막으로 값이에 할당됩니다 foo.
그리고 이것은 어떻습니까?
bar();
var foo = 42;
function bar() {}
//=>
var foo;
function bar() {}
bar();
foo = 42;
만 선언 의 foo상단으로 이동합니다. 할당은 bar모든 호이 스팅이 발생하기 전인 호출 이 이루어진 후에 만 이루어집니다.
그리고 마지막으로 간결함을 위해 :
bar();
function bar() {}
//turns to
function bar() {}
bar();
이제 함수 표현식은 어떻습니까?
var foo = function() {}
foo();
//=>
var foo;
foo = function() {}
foo();
그냥 일반 변수처럼, 처음 foo됩니다 선언 다음에 값이 할당되고, 범위의 가장 높은 지점에서.
두 번째 예제에서 오류가 발생하는 이유를 살펴 보겠습니다.
bar();
function bar() {
foo();
}
var foo = function() {}
//=>
var foo;
function bar() {
foo();
}
bar();
foo = function() {}
이전에 보았던 것처럼 생성 만 foo게양되고 할당은 "원본"(게재되지 않은) 코드에 나타난 위치에 제공됩니다. bar를 호출 하면 이전 foo에 값이 할당되므로 foo === undefined. 이제의 함수 본문에서 bar마치 수행하는 것처럼 undefined()오류가 발생합니다.