JavaScript 함수: 선언 또는 표현?

오, 자바스크립트... 우리 개발자들이 길들이려고 하는 장엄하고 애매한 짐승.. (저는 대부분 실패합니다).
JS 지식에 대한 초보자 탐구에서 함수를 "선언"하는 것과 함수를 "표현"하는 개념을 발견했습니다. 뭐야? 🤔

나는 내가 항상 하던 일을 했다. 나는 봤어. 그리고 좀 더 구글링을 했습니다. 나는 기사와 공식 문서 및 트윗의 토끼 굴에 빠졌습니다. 그리고 이것은 (요약해서) 제가 생각해낸 것입니다.

함수 선언:

function calcRectArea(width, height) {
  return width * height;
}

console.log(calcRectArea(5, 6));
// expected output: 30

var 선언은 function 로 시작해야 하므로 유효한 함수 선언은 항상 var 로 시작해야 합니다.

대

함수식:

const getRectArea = function(width, height) {
  return width * height;
};

console.log(getRectArea(3, 4));
// expected output: 12

함수 선언 구문과 매우 유사하지만 익명 함수를 만들기 위해 함수 이름을 생략할 수 있습니다.
그런 다음 논리는 getRectArea에 저장되고 이를 사용하여 호출할 수 있습니다.

"좋아요. 하지만 실제로 차이가 있나요?" 물어봐줘서 기뻐!

게양에 관한 모든 것

JavaScript의 함수 선언은 "호이스팅"됩니다. 이것이 의미하는 바는 선언된 함수가 코드의 "상단에서"사용 가능하다는 것입니다. 둘러싸는 기능의 맨 위에서 전역 범위를 제공하거나 적어도 범핑합니다.

실제로 함수 선언은 다른 코드가 실행되기 전에 로드됩니다. 따라서 다음이 가능합니다.

hoisted(); // logs "foo" even when it's called BEFORE the declaration

function hoisted() {
  console.log('foo');
}

그러나 함수 표현식은 호이스팅되지 않으며 이로 인해 오류가 발생합니다.

notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {
   console.log('bar');
};

선언보다 함수 표현식을 사용하는 이유는 무엇입니까?

위치와 타이밍에 관한 모든 것

함수의 목적이 무엇인지, 코드에서 함수를 사용할 방법과 위치를 고려해야 합니다.
전역적으로 액세스해야 합니까 아니면 다른 함수에 대한 인수로 액세스해야 합니까? 재사용할 것인가? 아니면 일회성인가요?

일부 사용 사례:

IIFE [즉시 호출된 함수 표현식]:
이것은 필요/호출되는 정확한 순간에 런타임에 동적으로 선언되는 함수입니다. 사용한 다음 버리십시오!

(function() {
    console.log('This is my first blog post!')
})();

IIFE 사용 사례에 대한 매우 자세한 목록은 this article에서 확인할 수 있습니다(이 기사의 범위를 벗어난 것 같습니다... 알겠습니까? 😂)

콜백 [다른 함수의 인수로서의 함수]:

button.addEventListener('mouseover', function(event) {
    console.log('Click that button!!!')
})

요약해서 말하자면:

전역적으로 함수에 액세스할 필요가 없으면 함수 표현식을 사용하십시오. 임시로 사용하고 익명으로 유지하고 범위를 제한하고 코드를 깨끗하고 간결하게 유지하는 것이 가장 좋습니다. 그렇지 않으면 함수 선언을 사용하십시오.

추신. I spotted a record of someone mentioning a performance difference between declaration and expression, depending on the browser/javascript engine they used. 다만 제가 직접 먹어본게 아니라서 소금 한알 넣고... 🤷🏻‍♀️

PPS. '호이스트'라는 단어를 싫어하는 사람이 있습니까? 아니? 나만? 그래 그리고 나서...

면책 조항: 이 블로그는 전문가 가이드가 아니며, 내용을 이해하기 위한 제 시도일 뿐입니다. 눈에 띄는 실수를 발견하거나 피드백이 있으면 알려주세요.
이 기사는 Hashnode Technical Writing Bootcamp II 동안 Chris Bongers가 할당한 첫 번째 작업에 대한 제 제출물입니다.

자, 다음으로!

참조:

MDN Function Declaration

MDN Function Expression

MDN Callback Function

W3Schools JS Hoisting

Anonymous functions, callbacks and chaining essentials in JS

Callback and Anonymous functions in JavaScript

Function Declarations vs. Function Expressions

When to use a function declaration vs. a function expression

Use Cases for JavaScript's IIFEs

What is a Callback Function in JavaScript?