[JS] 자바스크립트 함수를 변수에 할당할 수 있는 이유

이 본문은 자바스크립트 함수의 개념을 다룹니다💪🏼

 

본문을 시작하기에 앞서 자바스크립트의 리터럴과 표현식에 대한 개념을 간단히 정리하고자 한다.

 

리터럴(Literal)

사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 말한다.

// number literal 3
123;

이 예제의 123은 단순한 숫자값이 아닌 숫자 리터럴이다. 사람이 이해할 수 있는 아라비아 숫자 표현을 사용해 숫자 123을 코드에 기술하면 자바스크립트 엔진은 이를 숫자값 123으로 평가한다.

즉, 사람이 이해할 수 있는 표현을 사용하여 자바스크립트 엔진이 값을 생성하는 것이다.
아래에서 다시 언급하겠지만, 자바스크립트는 함수를 하나의 객체로 정의한다. 즉, 객체 리터럴로 객체를 생성하는 것처럼 함수 리터럴로 함수를 생성할 수 있고 이는 하나의 객체(값)으로 처리된다. 이 점을 기억해두자.

 

표현식(Expression)

표현식의 핵심은 값을 생성하는 문이라는 점이다. 표현식이 평가되면 반드시 새로운 값을 생성하거나 기존의 값을 참조하게 된다.

123 숫자 리터럴은 숫자값을 생성한다. 이는 값을 생성하는 구문이므로 표현식이다.
var score = 50 + 50; 숫자 리터럴과 연산자로 이루어진 50+50은 숫자값 100을 생성하므로 역시 표현식이다.
score; // 100 이 구문은 숫자값 100을 참조한다. 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.

표현식은 값으로 평가된다. 이 말은 값과 동일하게 여겨진다는 말이다.

값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다는 점이다.
이를 활용하면 표현식인 리터럴이 구문(statement)의 값 자리에 위치할 수도 있게 된다.

이 흥미로운 개념이 자바스크립트의 함수 개념에 적용되어 신박한 표현을 가능하게 한다.

---

함수(Function)

위에서 언급한 것처럼 자바스크립트에서 함수는 객체 타입의 값이다. 따라서 숫자 리터럴로 숫자값을 생성하는 것처럼 함수 리터럴로 함수를 생성할 수 있고, 이를 변수에 할당할 수도 있다. 함수가 객체라는 사실은 자바스크립트만의 중요한 특징이다.

var func = function add(x, y) {
  return x + y;
}

위의 코드는 함수 표현식이라고 정의한다. 함수 리터럴을 통해 함수 객체(값)를 생성하고, 이를 변수에 할당하는 것이다.
함수 리터럴 표현식은 함수 객체를 생성한다는 점을 이용하면 이런 syntax sugar도 가능하다👾

(function func() {return 10;}) // ƒ func() {return 10;}

그룹 연산자의 피연산자로 함수 리터럴을 전달하는 코드이다.
이 구문은 함수 선언문이 아닌 함수 표현식으로 평가되고, 함수 객체를 생성하게 된다. 함수 표현식은 아래와 같이 더욱 간단하게 만들 수도 있다.

// 함수 선언문이 아닌 함수 표현식은 함수 이름(식별자)을 생략할 수 있다.
// 이 함수 리터럴은 값으로 평가되는 표현식으로 평가되므로 다음과 같은 표현도 가능하다.
(function () {return 10;})  // ƒ () {return 10;}
// ES6의 화살표 함수를 사용하면 더 간단하게 할 수 있다.
(() => {return 10;})  // () => {return 10;}

이를 또 활용하면, 함수를 즉시 실행시키는 코드로 만들 수 있다.

즉시 실행 함수(IIFE: Immediately Invoked Function Expression)라고 부른다.

// 두 가지 모두 기능은 동일하지만, 첫 번째 방식을 더 많이 사용한다.

(function func() {return 10;}()); // 10
(function func() {return 10;})(); // 10

// 인자를 전달하여 사용할 수도 있다.
res = (function (a, b) {
	return a * b;
}(3, 5)); // 15

 

마무리

자바스크립트에서 변수에 함수를 값으로 할당할 수 있는 이유는 함수가 하나의 객체로 존재하기 때문이다.
바닐라 자바스크립트를 공부하면서 언어의 특징을 더욱 깊게 이해하게 되는 것 같다. 뽜샤🔥🔥

 

Reference

모던 자바스크립트 Deep Dive 12장 함수