JS Deep Dive 18장. 함수와 일급 객체

개념 알아보기

아래 조건을 만족하는 객체를 일급 객체라고 합니다.

 

- 무명의 리터럴로 생성할 수 있다. 즉 런타임 생성이 가능하다.

- 변수 또는 자료구조(객체, 배열)에 저장할 수 있다.

- 함수의 매개변수에 전달할 수 있다.

- 함수의 반환값으로 사용할 수 있다.

 

자바스크립트의 함수는 위 조건들을 모두 만족하므로 일급 객체입니다.

 

함수는 일급 객체이므로, 함수는 객체처럼 쓸 수 있습니다.

또 객체는 값이므로 함수는 값처럼 쓸 수 있습니다.

따라서 함수는 값이 들어갈 수 있는 자리에 다 들어갈 수 있어요.

(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문 등)

 

함수가 일급 객체면 뭐가 좋냐, 바로 함수형 프로그래밍이 가능하다는 것입니다.

아래와 같은 짓을 할 수 있어요.

 

function add(a, b) {
  return a + b;
}

// 함수를 인수로 넣을 수 있다!
add(1, add(2, 3)); // 6

 

함수가 일반 객체와 구별되는 점이라면, 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다는 점입니다.

 

const normalObject = {};
const functionObject = function () {};

normalObject(); // Uncaught TypeError: normalObject is not a function
functionObject(); // 에러 없이 실행됨

 

함수 객체에만 있는 메서드들이 있습니다. `call()`, `bind()`, `apply()` 같은 것들이 있습니다. 요것들이 뭔지 궁금하시다면 MDN Web Docs로...

 

그리고 또 함수 객체는 일반 객체한테는 없는 프로퍼티들이 있어요. `arguments, caller, length, name, prototype`이 있습니다. 하나씩 살펴보겠습니다.

 

arguments

arguments는 iterable한 유사 배열 객체입니다. 이게 무슨 말이냐, for...of로 순회 가능하다는 말입니다.

 

function foo() {
  for (const argument of arguments) {
    // ...
  }
}

 

하지만 어디까지나 "유사" 배열이기 때문에 slice같은 배열 메서드는 사용할 수 없습니다. 꼭 사용하고 싶으면 Array.prototype.slice.call()을 사용해서 간접 호출해야 합니다.

 

arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있습니다. 이들은 함수 내부에서 지역 변수처럼 사용됩니다. (함수 외부에서는 참조 불가)

arguments[0] arguments[1] 처럼 참조 가능합니다.

 

재밌는 사실은 함수에 선언된 매개변수의 개수보다 인수를 적게 전달했을 때, 초과된 인수들이 버려지지 않고 arguments 객체에 들어간다는 점입니다.

이런 성질을 이용해서 매개변수 개수가 정해지지 않은 함수(가변 인자 함수)를 구현하는 것도 가능합니다.

 

function sum() {
  let result = 0;
  for (const argument of arguments) {
    result += argument;
  }
  return result;
}

 

ES6에서는 arguments 객체 대신 Rest 파라미터 방식을 써서 좀 더 깔끔하게 구현할 수 있어요.

 

function sum(...args) {
  return args.reduce((acc, cur) => acc + cur, 0);
}

 

caller

자기 자신을 호출한 함수를 가리킵니다.

자세히 알아보지는 않겠습니다. 어차피 비표준이라서요.

 

length

매개변수의 개수를 가리킵니다.

주의점! 함수의 length와 함수 arguments 객체의 length는 다를 수 있답니다.

 

function foo(a, b, c) {
  return arguments.length;
}

console.log(foo.length); // 매개변수의 개수가 나옵니다. 3
console.log(foo(1, 2, 3, 4, 5)); // 전달한 인수의 개수가 나옵니다. 5

 

name

함수 이름을 나타냅니다.

 

function hello() {}
console.log(hello.name); // "hello"

const world = function() {}
console.log(world.name); // ES5 이전에는 "". ES6 이후에는 "world".

 

prototype

prototype 프로퍼티는 모든 함수의 프로퍼티는 아니고, 생성자 함수로 쓰일 수 있는 함수만 가지는 프로퍼티입니다.

즉 constructor 만이 소유하는 프로퍼티입니다.

생성자 함수가 생성하는 인스턴스의 프로토타입 객체를 나타냅니다.

프로토타입은 이 글의 범위를 벗어나므로 다음 글에서 더 자세히 알아보도록 하겠습니다.

 

실무에 적용해보자! 리빙 포인트

이 글에 나온 개념은 실무에 거의 사용되지 않습니다. 하나만 빼구요.

함수를 일급 객체로 사용하는 것은 자바스크립트 실무에서 굉장히 많이 쓰입니다.

함수를 매개변수로 받는 메서드들이 많이 있죠. 위에서 본 reduce만 해도 그렇구요. map 같은 것도 함수를 받습니다.

브라우저의 addEventListener() 메서드도 함수를 받는 대표적인 메서드입니다.

 

// 웹페이지에서 클릭 이벤트가 발생할때마다 count가 올라갑니다.
// 두번째 인자로 함수를 받고 있죠!
let count = 0;
function addCount() {
  count++;
}
document.addEventListener("click", addCount);