[JavaScript] 함수 선언(Function Declaration), 함수 선언문, 함수 표현식, Function 생성자 함수, 화살표 함수(Arrow Function)

JavaScript에서 함수를 생성하는 방법에는 크게 4가지가 존재한다.

함수 정의 방식	에	표현식 여부
함수 선언문	function mul(a,b){     return a*b; }	표현식 아닌 문
함수 표현식	var mul = function(a,b){     return a*b; }	표현식
Function 생성자 함수	var mul = new Function('a', 'b', 'return a*b');	표현식
화살표 함수	var mul = (a,b)=> a*b	표현식

 

표현식이 아닌 문의 경우에 변수에 넣을 수 없다. 하지만 표현식으로 평가되는 경우에는 변수에 넣어 사용할 수 있게된다.

---

 

함수 선언문

가장 익숙한 함수 선언 형식일 것이다. JavaScript에서는 인자 타입을 적지 않는다.

function mul(a,b){
	return a*b;
}

console.log(mul(3,4)); // 12

 

가장 일반적인 함수 선언문은 표현식이 아니기 때문에 변수에 저장하여 사용할 수 없다.

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

console.log(a(3,4)); // 12

하지만 위 코드에서는 정상적으로 실행이 된다.

 

그 이유는 자바스크립트 엔진이 함수 선언문을 함수 리터럴로 인식하고 평가하였기 때문이다.

var a = function(a,b){ // 함수 리터럴은 함수 선언문에서 이름만 없는 것임
	return a*b;
}

console.log(a(3,4)); // 12

 

위 형태로 인식하여 가능한 것이고, 실제로 함수 선언문은 표현식이 아니므로 변수에 담아 사용할 경우 문제를 초래할 수 있다. 유의하도록 하자.

 

출처 - 자바스크립트 Deep Dive

정리하자면 , 기본적으로 식별자의 이름으로 함수명이 지정되지만, 함수 선언문처럼 변수에 저장하는 게 아닌 경우에는 함수의 이름을 자바스크립트 엔진이 찾아 식별자로 지정하게 된다는 말이다.

 

---

함수 표현식

위에서 조금 살펴본 함수 리터럴을 사용하여 함수를 선언하는 방식이다.

function(a,b){ // 함수 리터럴
	return a*b;
}

 

위 함수 리터럴을 변수에 넣어 사용하는 방법이다.

 

var mul = function(a,b){ // 함수 표현식
	return a*b;
}

 

 

---

Function 생성자 함수

자바스크립트의 기본 빌트인 함수인 Function 생성자 함수를 사용할수도 있다.

var mul = new Function('a', 'b', 'return a*b');

console.log(mul(3,4)); // 12

 

위처럼 new 키워드와 Function() 생성자 함수를 사용하여 함수를 생성할수도 있다. 

function 생성자 함수 또한 표현식으로 평가되기 때문에 값으로 사용할 수 있다.

 

기본적으로 Function 생성자 함수는 잘 사용하지 않는다. 

클로저를 생성하지 않고 다른 함수 선언 방식과는 조금 다르게 동작하기 때문이다. 

따라서 이런 방식도 존재하구나 정도로 알아두면 좋을 거 같다.

 

---

화살표 함수(Arrow Function)

화살표 함수는 ES6에서 도입된 함수 선언 방식이다.

=> 를 사용하여 훨씬 간략하게 함수를 작성할 수 있다.

var mul = (a,b) => a*b;

console.log(mul(3,4)); // 12

 

화살표 함수는 기본적으로 완전한 함수 선언 방식이라기 보다는, 간략화한 방식이기 때문에 이 방식 또한 다른 함수 선언 방식에 비해 동작 방식이 다르다.

• this 바인딩 방식의 차이
• prototype 프로퍼티가 없음
• arguments 객체를 생성하지 않음

 화살표 함수에 대해서는 추후에 자세히 포스팅해보겠다.

 

 

---

이처럼 함수의 선언 방식은 다양하고, 현재 웹개발에서 많이 사용되는 방식은 아무래도 화살표 함수 방식인 거 같다. 화살표 함수의 차이점을 잘 이해하고 사용한다면 보다 더 안정적인 코드를 작성할 수 있을거라 믿는다.