Javascript에서 함수를 생성하는 방식/함수표현식, 함수선언식

F사의 기술면접에 다녀왔다. 면접을 마치고 면접에 대해 궁금한 것은 없는지 물어보셔서, ‘Javascript에 대해 자세한 질문을 하실 줄 알았는데, 그런 질문은 없으셔서 (다행입니다.)’라고 답했다. 괄호친 다행입니다는 입밖으로 못 낸 말이다. 한국말은 끝까지 들어야하는것뿐만 아니라, 끝까지 해야하는 것이었다.

면접관님께서 어떤걸 준비하고 왔는지 물어보시기에, 기존 함수와 ES6의 화살표 함수에 대해 준비한 내용을 말씀드렸다. 그리고나서 함수의 선언 방식은 몇 가지가 있고, 어떤 차이가 있는지 여쭤보셨다. 나도 내가 평소에 삽질을 잘 하는 줄은 알고 있었는데, 이번 기회에 내 묫자리도 잘 판다는 걸 깨달았다. 선언방식은 대답할 수 있었지만 차이점은 얘기할 수 없었다. (new 키워드를 이용해서 함수 객체를 선언하는 방법도 대답하지 못했다. 면접관님 말씀대로 이 방식은 다들 크게 신경쓰지 않는가보다.)

준비해오셨다기에 딥하게 물어봤습니다, 라고 말씀하셔서 돌아오는 길에 검색해봤다. 딥하다기보다는 기본개념에 가까웠다. 뭐 어찌됐건 그래서 조사 후 정리해보기로 했다.

---

함수 선언식(Function Declarations)

다른 언어와 마찬가지로 함수를 선언하는 방식이다.
호이스팅의 영향을 받는다. 즉, 함수 선언식으로 함수를 선언하면 스코프 내의 어디서든 호출할 수 있다.
선언하는 방법은 다음과 같다.

//Function Declarations
function <함수명>() {
  //구현 로직
}

//Example
function HelloWorld() {
  return "Hello World!";
}

console.log(HelloWorld()); //Hello World!를 콘솔에 출력한다.

함수 표현식(Function Expressions)

이름없는 함수를 변수에 할당하는 방식이다.
호이스팅의 영향을 받지 않는다. 다시 말해서 함수 표현식으로 함수를 생성하면, 생성한 이후 시점의 코드에서만 호출할 수 있다. 선언하는 방법은 다음과 같다.

//Function Expressions
var <함수명> = function() {
  //구현 로직
}

//Example
var HelloWorld = function() {
  return "Hello World!";
}

console.log(HelloWorld()); //Hello World!를 콘솔에 출력한다.

new Function 문법

new 키워드를 이용해서 함수 객체를 호출하는 방식이다.
인자와 함께 함수 내부의 로직을 텍스트로 넘겨야한다. 왜 중요하지 않다고 말하는지, 왜 다루는 사람이 없는지 알 것 같았다. 선언하는 방법은 다음과 같다. * new Function Syntax를 이용해서 생성한 함수도 호이스트의 영향은 받지 않는다.

//new Function Syntax
var <함수명> = new Function([arg1, arg2, ... , argN], <함수 본문>)

//Example
var HelloWorld = new Function("return 'Hello World!'");

console.log(HelloWorld()); //Hello World!를 콘솔에 출력한다.

---

참조1: Captain Pangyo님의 ‘함수 표현식 vs 함수 선언식’
참조2: JAVASCRIPT.INFO의 ‘The “new Function” syntax’

​