JavaScript의 함수 선언 VS 함수 표현식

기본적으로 함수 선언과 함수 표현은 JavaScript에서 함수를 만드는 두 가지 방법입니다. 그러나 어떻게 다릅니까? 그리고 함수를 생성할 때 어떤 것을 사용해야 하는지 어떻게 알 수 있습니까?

함수 선언



여기에서 함수는 function 키워드로 시작하여 이름 뒤에 괄호가 오고 그 다음 문장이 작성될 중괄호로 정의됩니다.

//Example of Function declaration 
function calcAge(birthYear) {
    return 2021 - birthYear;
}


함수 표현



함수 선언과 달리 함수 표현식에는 이름이 없으며 일반적으로 익명 함수라고 합니다. 함수의 값은 변수에 저장될 때까지 사용할 수 없습니다.

//Example of Function expression
const calcAge = function(birthYear) {
    return 2021 -birthYear;
}


둘의 차이점은 무엇입니까?



실제적인 주요 차이점은 정의하기 전에 함수 선언을 호출할 수 있고 코드는 잘 작동하지만 함수 표현식에서는 불가능하며 JavaScript에서 오류가 발생한다는 것입니다.

//Calling Functiion declaration before defining it

calcAge(2000);

function calcAge(birthYear) {
    return 2021 - birthYear;
}


위의 함수 식으로 동일한 작업을 시도했지만 그 대가로 다음 오류가 발생했습니다.

Uncaught ReferenceError: Cannot access 'calcAge' before initialization


이것은 "호이스팅"이라는 프로세스 때문에 발생합니다. 호이스팅은 실행 전에 모든 선언을 코드 맨 위로 이동하는 JavaScript 동작입니다.
함수 선언은 호이스트되지만 함수 표현식은 호이스팅되지 않습니다. 이것이 함수 선언으로 정의하기 전에 함수를 호출하는 것이 가능한 이유입니다.

함수를 작성할 때 어느 것을 사용해야 합니까?



대부분의 경우 선호도의 문제일 뿐입니다. 개인적으로 저는 함수 표현식을 사용하는 것을 선호합니다. 코드 맨 위에 모든 함수를 정의해야 하기 때문입니다. 이런 식으로 더 깨끗하고 읽기 쉬운 코드를 작성할 수 있습니다.

좋은 웹페이지 즐겨찾기