[JS]함수의 정의 방법 3가지

 

안녕하세요.

오늘은 함수의 정의 방법 3가지에 대해서 정리해보려고 합니다.

 

함수를 정의하는 방식은 3가지가 있습니다.

• 함수 선언문
• 함수 표현식
• Function 생성자 함수

 

함수 선언문은 function 키워드와 함수명, 매개변수 목록, 함수 몸체로 구성이 됩니다.

function minus(first, second){
	return first - second;
}

아마 함수 선언문은 우리가 가장 흔히 볼 수 있는 익숙한 방식일 겁니다.

 

그 다음으로 함수 표현식은 함수 리터럴 방식으로 함수를 정의하고 변수에 할당하는 방식입니다.

var minus = function(first, second){
	return first - second;
}

이런식으로 함수를 변수에 넣는 방식입니다. 이 또한 자주 보셨을 수 있습니다.

보통 함수 표현식 방식으로 정의를 할 때는 함수명을 생략해서 무명 함수(anonymous function)로 사용합니다.

//기명 함수 표현식
var namedFunction = function plus(first, second){
	return first + second;
};

//익명 함수 표현식
var anonymousFunction = function(first, second){
	return first + second;
};


console.log(namedFunction(10, 15)); //15
console.log(plus(10, 15)); //Error

변수 안에는 함수를 가르키는 참조값이 저장됩니다.

함수 호출시 함수명이 아닌 함수를 가르키는 변수명을 사용해야합니다.

 

var minus1 = function(first, second){
	return first - second;
};

var minus2 = minus1;

console.log(minus1(10,2)); //8
console.log(minus2(10,2)); //8

변수 minus1과 minus2는 동일한 익명 함수의 참조값을 갖게됩니다.

함수가 할당된 변수를 사용하지 않고 기명 함수를 사용해서 호출할 경우 에러가 발생합니다. 이는 함수 표현식에서 사용한 함수명은 외부 코드에서 접근이 불가능하기 때문입니다. 또한 이는 함수 선언문 또한 마찬가지입니다.

 

함수 표현식과 함수 선언문에서 사용한 함수명은 함수 몸체에서 자신을 재귀적 호출을 할 때 사용되거나 자바스크립트 디버거가 해당 함수를 구별할 수 있는 식별자 역할을 합니다.

 

여기서 의문을 느끼시는 분들도 있으실 겁니다. 함수 선언문 때는 함수명으로 호출했는데 어째서 에러가 나지 않았지?

그 이유는 바로 자바스크립트 엔진에 의해 아래와 같은 함수 표현식으로 형태가 변경되었기 때문입니다.

var minus = function minus(first, second){
	return first - second;
};

결과적으로 함수 선언문도 함수 표현식과 동일하게 함수 리터럴 방식으로 정의되는 것입니다.

 

마지막으로 Function 생성자 함수를 보겠습니다.

 

함수 표현식으로 함수를 정의할 때 함수 리터럴 방식을 사용합니다. 또한 함수 선언문도 내부적으로 자바스크립트 엔진이 기명 함수 표현식으로 변환하므로 결국 함수 리터럴 방식을 사용합니다.

 

따라서 함수 선언문과 함수 표현식은 모두 함수 리터럴 방식으로 함수를 정의하는데 이것은 결국 내장 함수 Function 생성자 함수로 함수를 생성하는 것을 단순화 시킨 short-hand(축약법)입니다.

 

Function 생성자 함수로 함수를 생성하는 방법은 다음과 같습니다.

new Function(arg1, arg2, ... argN, functionBody) //원형

var minus = new Function('first','second', 'return first - second');
console.log(minus(10,2)); //8

 

Function 생성자 함수로 함수를 생성하는 방식은 일반적으로 사용하지 않습니다.

 

 

 

잘못된 점 및 오타지적은 댓글로 달아주시면 수정하도록 하겠습니다!

참고 : https://poiemaweb.com/js-function