JavaScript의 함수 표현식과 함수 선언 - 차이점은 무엇입니까?

JavaScript에서 함수 선언과 함수 표현식의 차이점에 대해 알아보세요.

이것은 함수 표현식입니다:

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

이것은 함수 선언입니다:

// Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

함수 표현식과 선언은 거의 같은 일을 합니다. 위의 두 예에서 모두 다음과 같이 호출합니다. executeMe() 그런 다음 코드 블록 {..} 안에 있는 모든 코드를 실행합니다. .

그러나 차이점이 있습니다. 그들이 하는 것이 아니라 어떻게 그들은 실행됩니다 — 또는 오히려 주문 그것들은 읽고 실행되며 이것이 중요합니다.

이 기능은 잘 실행됩니다:

// Call function declaration
executeMe()

// Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

그러나 기능은 않습니다. 잘 실행(오류 발생):

// Call function
executeMe()

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

첫 번째 예제(함수 선언)는 작동하지만 두 번째 예제(함수 표현식)는 작동하지 않는 이유를 이해하려면 호이스팅이 무엇인지 배워야 합니다. JavaScript로 되어 있으면 이해가 되기 시작할 것입니다.

호이스팅

JavaScript에서 코드는 위에서 아래로 실행됩니다. 일반적으로 스크립트 파일에서 변수를 선언한 후에만 변수를 사용할 수 있지만(순서대로) 함수 선언 코드가 실행되기 전에 웹 브라우저에 의해 맨 위로 호이스트됩니다.

호이스팅은 브라우저의 코드 인터프리터가 항상 함수 선언이 호출되기 전에(실행하기 전에) 함수 선언에 대해 알고 있습니다(읽었습니다).

따라서 어디서나 함수 선언을 호출하고 실행할 수 있습니다. JavaScript 파일에서 함수 선언이 실제로 스크립트 파일에 존재하기 전에도 순서에 따라. 이것은 함수 선언을 고유하게 만듭니다.

함수 선언

코드가 실행되기 전에 브라우저는 전체 JS 스크립트 파일을 로드(읽기)하고 함수 선언이 실행 순서의 맨 위로(호이스트) 이동되기 때문에 코드는 실제로 인터프리터에 의해 다음 순서로 실행됩니다.

// 1. Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

// 2. Call to function declaration
executeMe()

코드가 물리적으로 스크립트 파일에 반대 순서로 작성된 경우에도:

// Call to function declaration
executeMe()

// Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

그렇기 때문에 스크립트 파일에 정의되기 전이나 후에 함수 선언을 물리적으로 호출하는 것은 중요하지 않습니다. JavaScript는 항상 함수 선언을 로드하기 때문에 두 접근 방식 모두 작동합니다. 함수 호출을 실행하기 전에 그 함수 선언에.

함수 표현식이 호이스트되지 않음

함수 표현식은 호이스팅되지 않습니다(먼저 읽지 않음). 함수 표현식은 인터프리터가 스크립트 파일의 해당 코드 행에 도달할 때만 읽습니다. 따라서 함수 표현식이 이후 함수 호출(순서에 따라)을 수행하면 브라우저에서 실행되는 JavaScript 인터프리터가 이를 실행할 수 없습니다.

따라서 작동하지 않습니다.

// Call function expression
executeMe()

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

위의 코드는 함수(executeMe() ) 브라우저의 코드 인터프리터가 함수 표현식의 존재를 알기도 (읽기 전에)

코드 순서를 바꾸면 작동합니다:

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

// Call function expression
executeMe()

위의 코드는 코드 순서 때문에 작동합니다. 브라우저는 먼저 let executeMe 변수가 있는 행(위에서 아래로)을 읽습니다. 함수 표현식이 포함된 다음 executeMe()를 사용하여 나중에 실행하라는 메시지가 표시됩니다. .

어느 것을 사용해야 합니까?

중요한 것은 함수 선언이나 함수 표현식을 사용하는지 여부가 아닙니다. 어느 쪽도 당신의 경력을 만들거나 망치지 않을 것입니다. 일관성을 유지하는 것이 훨씬 더 중요합니다. 최소한 같은 프로젝트 내에서 스타일을 선택하고 고수하세요.

더 중요한 것은, 함수 표현식을 사용하는 팀에 합류한다면 개인 취향이 무엇이든 상관없이 코드베이스를 일관성 있게 유지하기 위해 그들의 레시피를 따라야 한다는 것입니다.

함수 표현식을 사용하는 좋은 사례 중 하나는 더 엄격한 코드 구조를 사용하도록 하여 코드를 더 예측 가능하게 만드는 것입니다. 함수 선언은 스크립트의 어느 곳에서나 호출할 수 있고 따라서 할 수 있기 때문에 관대합니다. 특히 여러 개발자가 동일한 프로젝트에서 작업하는 경우 일관성 없는 코드 구조로 이어집니다.

함수 선언을 사용하는 좋은 사례(논쟁의 여지가 있음)는 다른 함수를 호출하는 함수가 있지만 순서가 혼동되어 함수 표현식을 실행할 수 없는 경우입니다.