[Javascript] function 명령과 Function 명령/함수 리터럴

study-repo를 만들면서 함수에 대한 내용들이 부족하다고 느끼게 되어 2~3개의 포스트에서 함수에 대한 내용을 다시 다뤄보려고 합니다.

function 명령과 Function 명령/함수 리터럴은 작동시 동작에서 차이점을 보입니다. 이번 포스트에서는 이들이 어떤식으로 동작하는지 그 차이점을 분석해보려고 합니다.

---

1. function 명령

우선 function 명령에 대해 알아보겠습니다. function 명령에 의한 함수 선언을 다시 살펴보면 다음과 같습니다.

function(인수, ...) {  }

다음과 같은 코드를 생각해봅시다. 일반적인 프로그래밍 사고에 따르면 아래의 코드는 에러를 내보내야합니다. 왜냐하면 함수가 먼저 호출되고 그 이후에 선언/정의 되었기 때문입니다. 하지만 실행해보면 정삭적으로 작동합니다.

console.log(getStr());

function getStr() {
    return 'function!';
}

이 점에서 우리가 알 수 있는 것은 다음과 같습니다.

function 명령을 통해 정의된 함수는 코드가 해석(interpret)되는 시점에 함수가 등록되어 코드의 어디에서나 호출될 수 있다는 것 입니다.

 

 

 

2. Function 생성자와 함수 리터럴

이번에는 Function 생성자와 함수 리터럴의 경우입니다. (애로우 함수는 함수 리터럴의 간결 문법이므로 언급을 생략하겠습니다.)

마찬가지로 동일한 코드를 Function 생성자와 리터럴 방식으로 작성했습니다. 이번에는 선언되기 전에 사용했다고 에러를 띄웠습니다.

console.log(getStr());

const getStr = new Function('return Function!;');

console.log(getStr());

const getStr = () => 'function!';

이 점에서 우리가 알 수 있는 것은 다음과 같습니다.

Function 생성자와 함수 리터럴 방식은 실행 되는 순간, 즉 변수에 함수가 할당되는 순간에 등록되게 됩니다. 그러므로 Function 생성자와 리터럴 방식을 이용하는 경우에는 함수를 호출하기 이전에 선언부를 먼저 작성해야 한다는 것 입니다.