[내보내번] JavaScript - Function Declarations vs. Function Expressions

GitHub에 있는 33 Concepts Every JavaScript Developer Should Know 라는 리포지토리의 내용 중 공부하고 싶은 아티클을 내가 정리할 겸 기억할 겸 작성하는 번역글이다. 33가지 중 두 번째인 기본형과 관련된 내용이다.

※ 내보내번(내가 보려고 내가 번역한): 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 오타도 많을 수 있다. 정확한 내용은 원문을 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.
(하지만 댓글 피드백도 환영합니다😃 )

이번에 고른 아티클은 Mandeep Singh 님이 작성하신 Function Declarations vs. Function Expressions 이다. 내용 중간 중간 🤔이 아이콘은 본문에 나와 있지 않은 번역하며 추가한 말이다.

Function Declarations vs. Function Expressions

---

자바스크립트에서 함수문(Statement)/선언문(Declarations)이란?

함수문은 함수를 정의한다. 

정의된 함수는 "나중에 사용되기 위해 저장"되며, 후에 호출될 때 실행될 것이다. 

변수 정의는 var로 시작해야되는 것처럼, 함수 정의는 "function"으로 시작되어야한다. 

예시.

function bar() {
  return 3;
}

• 함수는 이곳에만 정의되어 있다. 함수를 사용하기 위해서는 함수 이름을 사용하여 호출되어야 한다. 예시. bar();

 

함수 표현식이란?

자바스크립트 함수는 표현식을 사용하여 정의될 수 있다. 

함수 표현식은 변수에 저장될 수 있다: 

var x = function (a, b) {return a * b};

함수 표현식이 변수에 저장되고 난 후에, 변수는 함수로서 사용될 수 있다. 변수에 저장된 함수는 함수 이름이 필요하지 않다. 항상 변수 이름으로 호출되어진다. 

 

함수 표현식 VS. 함수문(Statement)

예시: 함수 표현식

alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function() { return 5; }

예시: 함수 선언문

alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; }

• 함수 선언문은 다른 코드가 실행되기 전에 로드되는 반면 함수 표현식은 인터프리터가 코드의 해당 라인에 도달해야만 로드된다. 
• var 문과 비슷하게, 함수 선언문은 다른 코드들 위로 호이스팅된다. 함수 표현식은 호이스팅되지 않으므로 함수 표현식이 정의된 스코프의 지역 변수의 복사본을 유지할 수 있다. 

 

함수 표현식의 이점

아래의 내용들은 함수 표현식이 함수 선언식보다 더 유용해질 수 있는 몇 가지 다른 이유들이다. 

• 클로저
• 다른 함수의 인수
• 즉시 호출 함수 표현식(IIFE)

Credits : Angus Croll , www.sitepoint.com