📥📤 자바스크립트의 함수

🤔 함수란 무엇일까?

코드블럭 속에 작성된 특정행동을 호출되어 하도록 하는 객체이다. 또는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
함수는 함수 정의(function definition)을 통해 생성하며, 인수(argument)를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해 함수 호출(function call/invoke)할 수 있다.
함수는 코드의 반복을 줄이고, 재활용하기 위해서 사용한다. 이를 통해 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높일 수 있다.

---

🗂️ 함수 정의

함수는 함수 정의를 통해 생성하고, 함수 호출 통해 실행할 수 있다고 했다. 먼저 함수 정의를 어떤 방법을 통해 할 수 있는지 살펴 보자. 함수는 함수 리터럴, 함수 선언문, 함수 표현식, Function 생성자 함수, 화살표 함수로 정의할 수 있다. (Function 생성자 함수는 일반적인 방법도 아니고, 바람직한 방법도 아니기 때문에 생략하도록 하겠다)
아래에서 각각에 대해 자세히 살펴보자.

함수 리터럴

자바스크립트의 함수는 객체 타입의 값이다. 따라서 함수도 함수 리터럴로 생성할 수 있다. 코드를 통해 문법을 살펴보고, 함수 리터럴이 무엇으로 구성되는지 알아보자.

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

// function add 에서 add가 함수 이름이다.
// function add(x, y) 에서 (x, y)가 매개변수 목록이다.
// {} 내부가 함수 몸체이다

함수 리터럴은 함수 이름, 매개변수 목록, 함수 몸체로 이루어져 있다. 함수 이름은 함수 내에서만 참조할 수 있고, 생략가능하다. 함수 리터럴은 값으로 (객체 타입의 값)으로 평가되기 때문에 변수에 할당할 수 있다.

함수 이름을 함수 내에서만 참조할 수 있다니 이게 무슨 소릴까?

이는 함수 몸체 외부에서는 함수 이름으로 함수를 참조할 수 없으므로 함수 몸체 외부에서는 함수 이름으로 함수를 호출할 수 없다는 의미이다.그러나 우리는 함수 외부에서 함수를 호출할 수 있으니 이상하다.
이 의문은 그대로 간직하고 있다가 아래 함수 선언문을 살펴보면서 해결해보자.

---

함수 선언문

함수 선언문은 함수 리터럴과 형태가 동일하다. 그러나, 형태는 동일하지만 다른 특징이 있다.

• 함수 선언문은 이름을 생략할 수 없다.
• 함수 선언문은 표현식이 아닌 문이다. 즉, 값으로 평가되지 않는다.

그러나, 이름이 생략되지 않은 기명함수 리터럴의 경우 함수 선언문과 형태가 완전히 동일하기때문에 함수 선언문과 구분할 수 없다. 이를 자바스크립트 엔진은 어떻게 구분할까?
자바스크립트 엔진은 문맥에 따라서 이를 구분한다. {}를 코드블럭으로 볼 것이냐, 객체 리터럴로 볼 것이냐는 {}가 단독으로 있는 문맥에서는 코드블럭으로, {}가 피연산자로 존재하는 문맥에서는 객체 리터럴로 평가한다.

아래의 예시 코드로 좀 더 살펴보자.

// 값으로 평가되어 변수에 할당된다 === 함수 리터럴로 자바스크립트 엔진이 해석
const add = function add(x, y) {
	return x + y;
}

// 단독으로 사용된다 === 함수 선언문으로 자바스크립트 엔진이 해석
function add(x, y) {
	return x + y;
}

혹시 위에서 함수 이름으로 함수를 호출할 수 없다고 했던 얘기가 기억나는가?
이제 의문을 해결할 시간이다. 먼저 아래의 코드를 보자.

function foo() {
	console.log('foo');
}

foo(); // foo

우리는 foo 라는 이름을 통해 foo 함수를 호출할 수 있었다. 어떻게 된 일일까? 사실 우리는 함수 이름 foo 를 통해서 함수를 호출한 것이 아니다. foo 는 자바스크립트 엔진이 암묵적으로 생성한 식별자다. 함수 이름은 함수 몸체 내에서만 참조할 수 있으므로, 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.

즉, 함수는 함수 이름이 아닌 함수 객체를 가리키는 식별자로 호출한다.

---

함수 표현식

위에서 함수 리터럴을 살펴보면서 이런 코드를 본 적이 있다.

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

자바스크립트의 함수는 객체 타입의 값이다. 이처럼 값의 성질을 갖는 객체를 일급 객체라고 하는데, 자바스크립트의 함수는 일급 객체이므로 함수를 값처럼 자유롭게 사용할 수 있다. 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. (일급 객체에 대해서는 아래에서 더 자세히 다룰 예정이다.)
이러한 함수 정의 방식을 함수 표현식(function expression)이라 한다.

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

보통 함수 표현식으로 함수를 표현할 때 위 코드와 같이 함수 이름을 생략하는 것이 일반적이다.

---

화살표 함수

ES6에서 도입된 화살표 함수(arrow function)은 function 키워드 대신 화살표(fat arrow) ⇒ 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다.

const add = (x, y) => x + y;
const multiply = (x, y) => {
  return x * y; 
}

console.log(add(2, 5)); // 7
console.log(multiply(2, 5)); // 10

//화살표 함수는 항상 익명 함수로 정의한다.

화살표 함수는 기존의 함수 선언문 또는 함수 표현식과 다른 특징을 가진다. 지금은 어떻게 정의하는지만 알아보고 아래에서 ES6 함수의 추가 기능을 살펴보며 화살표 함수에 대해 더 자세히 다뤄보도록 하자.

---

📞 함수 호출

함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다. 함수 호출 연산자 내에는 0개 이상의 인수를 쉼표로 구분해서 나열한다. 함수 호출은 표현식이기 때문에 return 키워드가 반환한 표현식의 평가 결과인 반환값으로 평가된다. (명시적으로 return문을 지정하지 하지 않으면 undefined를 반환한다.)

// 함수 정의
function add(x, y) {
	return x + y;
}

// 함수 호출
const result = add(1, 2);
// 인수 1,2가 매개변수 x,y에 순서대로 할당된다.
// 그 이후 함수 몸체의 문들이 실행된다.

매개변수는 함수를 정의할 때 선언하며, 함수 몸체 내부에서 변수와 동일하게 취급된다. 즉, 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성되고 undefined로 초기화된 이후 인수가 순서대로 할당된다. 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
자바스크립트의 함수는 함수가 호출될 때, 매개변수의 개수와 인수가 일치하는지 체크하지 않는다.

function add(x, y) {
	console.log(x);
	console.log(y);
	console.log(arguments);
	return x + y;
}

console.log(add(2)); 
// 2 
// undefined 
// Arguments(1) [2, callee: f, Symbol(Symbol.iterator): f]

console.log(add(2,5,10)
// 2 
// 5
// Arguments(3) [2, 5, 10, callee: f, Symbol(Symbol.iterator): f]

위 코드처럼 인수가 모자라 매개변수에 전달되지 않은 경우, 매개변수의 값은 undefined가 된다. 인수가 매개변수보다 많은 경우 무시되고, 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

---

💡 함수와 일급 객체

다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.

1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에 전달할 수 있다.
4. 함수의 반환값으로 사용할 수 있다.

함수는 이미 위에서 얘기했지만 위 모든 것이 가능한 일급 객체이다.

---

🧬 함수 객체의 프로퍼티

함수는 객체이므로 프로퍼티를 가질 수 있다. 함수 객체가 가지고 있는 프로퍼티를 알아 보자.
함수 객체에는 arguments, caller, length, name, prototype, __proto__ 프로퍼티가 있다.
함수의 모든 프로퍼티의 프로퍼티 어트리뷰트를 확인해보면 다음과 같다.

function square(number) {
	return number * number;
}

console.log(Object.getOwnPropertyDescriptors(square));
/*
{
	length: {value: 1, writable: false, enumerable: false, configurable: true},
	name: {value: "square", writable: false, enumerable: false, configurable: true},
	arguments: {value: null, writable: false, enumerable: false, configurable: false},
	caller: {value: null, writable: false, enumerable: false, configurable: false},
	prototype: {value: {...}, writable: true, enumerable: false, configurable: false},
}
*/

// __proto__는 Object.prototype 객체의 접근자 프로퍼티이다.
// square 함수는 Object.prototype 객체로부터 __proto__ 접근자 프로퍼티를 상속받는다.

arguments 프로퍼티

함수 객체의 arguments 프로퍼티 값은 arguments 객체다. arguments 객체는 함수 호출 시 전달된 인수(arguments)들의 정보를 담고 있는 순회 가능한 유사 배열 객체(array-like object)이다. arguments 프로퍼티는 함수 내부에서만 지역 변수처럼 참조할 수 있다.

함수 객체의 arguments 프로퍼티는 ES3부터 표준에서 폐지되었으므로 Function.arguments와 같은 사용법은 권장되지 않으며 함수 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체를 참조하도록 하자.

선언된 매개변수의 개수와 함수를 호출할 때 전달하는 인수의 개수를 확인하지 않는 자바스크립트의 특성 때문에 함수가 호출되면 인수 개수를 확인하고 이에 따라 함수의 동작을 달리 정의할 필요가 있을 수 있다. 이 때 유용하게 사용되는 것이 arguments 객체다.

arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다.

function sum() {
	let result = 0;

	for (let i = 0; i < arguments.length; i++) {
		result += arguments[i];
	} 

	return result;
}

console.log(sum()); // 0
console.log(sum(1,3,4)); // 8

caller 프로퍼티

함수 객체의 caller 프로퍼티는 함수 자신을 호출한 함수를 가리킨다. 비표준 프로퍼티이며 표준화될 예정도 없으므로 사용하지 말고 알아만 두자.

length 프로퍼티

함수 객체의 length 프로퍼티는 함수를 정의할 때 선언한 매개변수의 개수를 가리킨다.

name 프로퍼티

함수 객체의 name 프로퍼티는 함수 이름을 나타낸다. name 프로퍼티는 ES6에서 정식 표준이 되었는데, ES5와 ES6에서의 동작이 다르다. 익명 함수 표현식에서 name 프로퍼티의 경우, ES5에서는 빈 문자열을 값으로 갖고, ES6에서는 함수 객체를 가리키는 식별자를 값으로 갖는다.

__proto__ 접근자 프로퍼티

이미 자바스크립트의 Prototype에서 한참을 설명했으니 설명하지 않겠다.

prototype 프로퍼티

이미 자바스크립트의 Prototype에서 한참을 설명했으니 설명하지 않겠다.

---

✨ ES6 함수의 추가 기능

함수의 구분

ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있었다. 일반적인 함수로도 호출할 수 있고, new 연산자와 함께 호출하여 생성자 함수로서 호출할 수 있으며, 객체에 바인딩되어 메서드로서 호출할 수도 있었다. ES6 이전의 모든 함수는 callable 이면서 constructor이다. constructor는 prototype 프로퍼티를 가지며 프로토타입 객체를 생성한다. 이는 실수를 유발할 수 있으며 성능면에서도 손해다.

이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분했다. 아래에서 각각에 대해서 더 자세히 알아보도록 하자. (사실 제너레이터 함수와 async 함수가 추가로 존재하기만 나중에 비동기 처리를 공부해며 알아 보자.)

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수(Normal)	O	O	X	O
메서드(Method)	X	X	O	O
화살표 함수(Arrow)	X	X	X	X

---

메서드

ES6 사양부터 메서드에 대한 정의가 메서드 축약 표현으로 정의된 함수만으로 명확하게 규정되었다. ES6의 메서드는 non-constructor이며, 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다. 이를 통해 super 키워드를 사용할 수 있다.
이처럼 ES6 메서드는 본연의 기능(super)을 추가하고 의미적으로 맞지 않는 기능(constructor)은 제거했다. 따라서 메서드를 정의할 때 메서드 축약 표현을 통해서만 정의하는 것이 좋다.

---

화살표 함수

화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이며, 일반 함수와 다르게 중복된 매개변수 이름을 선언할 수 없다. (엄격모드에서는 일반 함수도 중복된 매개변수 이름을 선언할 수 없다.) 또한 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

this

화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라 한다. 만약 화살표 함수가 중첩되어 있다면 상위 화살표 함수에도 this 바인딩이 없으므로 스코프 체인 상에서 가장 가까운 상위 함수 중 화살표 함수가 아닌 함수의 this를 참조한다.

super

화살표 함수는 함수 자체의 super 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다.

arguments

마찬가지로 상위 스코프의 arguments를 참조한다.

---

Rest 파라미터

Rest 파라미터(나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

function foo(...rest) {
	console.log(rest); // [1, 2, 3, 4, 5]
}

// 다른 매개변수들과 사용할 때 반드시 마지막 파라미터이어야한다.
function bar(x, y, ...rest) {
	console.log(x) // 1
	console.log(y) // 2
	console.log(rest); // [3, 4, 5]]
}

foo(1, 2, 3, 4, 5);
bar(1, 2, 3, 4, 5);

Rest 파라미터는 하나만 정의할 수 있으며, 함수 객체의 length 프로퍼티에 영향을 주지 않는다.
위에서 사용했던 arguments 객체 대신 Rest 파라미터를 활용할 수 있다. Rest 파라미터는 배열이기 때문에 배열 메서드를 사용하기 위해 배열로 변환해야하는 번거로움이 없다.

---

매개변수 기본값

자바스크립트는 매개변수의 개수만큼 인수를 전달하는지 확인하지 않기 때문에, 매개변수가 undefined로 남아 의도치 않은 결과를 초래할 수 있다. 아래의 예시 코드를 보자.

function sum(x, y) {
	return x + y;
}

console.log(sum(1)); // NaN

ES6에서는 이러한 상황을 방지하기 위해 매개변수 기본값이 도입되었다. 매개변수 기본값은 매개변수에 인수를 전달하지 않은 경우와 undefined를 전달한 경우에만 유효하다. 또한 Rest 파라미터에는 기본값을 지정할 수 없다.

function sum(x = 0, y = 0) {
	return x + y;
}

console.log(sum(1)); // 1

매개변수 기본값은 함수 정의시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티와 arguments 객체에 아무런 영향을 주지 않는다.

---

🧐 정리

• 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
• 함수는 주로 함수 선언문, 함수 표현식, 화살표 함수로 정의한다.
• 자바스크립트는 함수의 매개변수와 인수의 개수가 동일한지 확인하지 않는다.
• 그렇기 때문에 arguments 객체, Rest 파라미터, 매개변수 기본값을 활용할 수 있다.
• 함수는 일급 객체이다.
• ES6에서 함수는 일반 함수, 메서드, 화살표 함수로 구분된다.

---

📖 참고자료

• 모던 자바스크립트 Deep Dive
  • 12장. 함수 (154p~186p)
  • 18장. 함수와 일급객체 (249p~258p)
  • 26장. ES6 함수의 추가 기능 (469p~490p)