[javascript] JavaScript 함수 순서 : 왜 중요한가요?

tl; dr 모든 것이로드 될 때까지 아무것도 호출하지 않으면 괜찮습니다.

편집 : 일부 ES6 선언 ( let, const)을 다루는 개요 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Scope_Cheatsheet

이 이상한 행동은

1. 기능을 정의하는 방법 및
2. 당신이 그들을 부를 때.

다음은 몇 가지 예입니다.

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()오류가 발생합니다.

답변

function foo(){ ... }

var foo = function() { ... };

/*globals foo1 foo2 foo3*/

function bigProcess() {
    var step1,step2;
    step1();
    step2();

    step1 = function() {...};
    step2 = function() {...};
}