[JS] function & first-class object

일급 객체

객체와 동일하게 사용할 수 있다는 의미. 자바스크립트의 함수는 일급 객체인데, 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다.

// 일급 객체 - 다음과 같은 조건을 만족하는 객체
// 1. 무명의 리터럴로 생성할 수 있다. (런타임에 생성이 가능)
// 2. 변수/자료구조(객체, 배열)에 저장할 수 있다.
// => 런타임에 함수 리터럴이 평가되어 함수 객체가 생성되고, 변수에 할당된다.
const increase = function (num) {
  return ++num;
};
const decrease = function (num) {
  return --num;
};
const predicates = { increase };

// 3. 함수의 매개변수에 전달할 수 있다.
// 4. 함수의 반환값으로 사용할 수 있다.
function makeCounter(predicate) {
  let num = 0;
  return function () {
    num = predicate(num);
    return num;
  };
}

// 3. 함수는 매개변수에게 함수를 전달할 수 있다.
const increaser = makeCounter(predicates.increase);
const decreaser = makeCounter(predicates.decrease);
increaser();  // 1
decreaser();  // 0

함수 객체의 프로퍼티

• 일반 객체에는 없는 함수 객체 고유의 프로퍼티
  • arguments
  • caller
  • length
  • name
  • prototype
• __proto__ 는 접근자 프로퍼티이며, 함수 객체 고유의 프로퍼티가 아니라, Object.prototype 객체의 프로퍼티를 상속받은 것. (모든 객체가 사용할 수 있는 접근자 프로퍼티)

1) arguments property

arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사배열 객체.
함수 내부에서 지역 변수처럼 사용된다. (함수 외부에서 참조 불가)

function multiply(x, y) {
  console.log(arguments);
  return x * y;
}

multiply(1, 2);  // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// ES6 Rest parameter
function sum(...args) {
  return args.reduce((pre, cur) => pre + cur, 0);
}

sum(1, 2);  // 3
sum(1, 2, 3);  // 6

• 함수가 호출되면, 함수 몸체 내에서 암묵적으로 매겨변수가 선언되고, undefined로 초기화된 이후 인수가 할당된다.
• 선언된 매개변수 개수보다 인수를 적게 전달했을 경우, 인수가 전달되지 않은 매개변수는 undefined로 초기화된 상태를 유지.
• 매개변수 개수보다 인수를 더 많이 전달한 경우, 초과된 인수는 무시되나, arguments 객체의 프로퍼티로 보관된다.
• callee 프로퍼티는 호출되어 arguments 객체를 생성한 함수, 즉 자신을 가리킴.
• length 프로퍼티는 인수의 개수를 가리킴.
• Symbol(Symbol.iterator) 프로퍼티는 arguments 객체를 순회 가능한 자료구조인 이터러블로 만들기 위한 프로퍼티.
• arguments는 유사배열 객체. 즉, 배열이 아니므로 배열 메서드를 사용하려면 Function.prototype.call, Function.prototype.apply를 사용해 간접 호출해야 함.
  • ES6 Rest parameter로 해결 가능

2) caller property

함수 자신을 호출한 함수를 가리킴. (비표준 프로퍼티로, 알아만 두자)

3) length property

함수를 정의할 때 선언한 매개변수의 개수

function foo(x, y) {
  console.log(arguments.length);
  return x + y;
}
console.log(foo.length);  // 2
foo(1, 2, 3);  // 3

4) name property

함수 이름을 나타냄.

// 함수 선언문
function foo() {}
console.log(foo.name);  // foo

// 기명함수 표현식
const namedFunc = function foo() {}
console.log(namedFunc.name);  // foo

// 익명함수 표현식
const anonymousFunc = function() {}
console.log(anonymousFunc.name);  // anonymousFunc

4) prototype property

생성자 함수로 호출할 수 있는 함수 객체, 즉 constructor만이 소유하는 프로퍼티.
일반 객체와 생성자 함수로 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없다.
함수가 생성자 함수로 호출될 때, 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킴.

5) __proto__ accessor property

[[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티.

• 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다.
• [[Prototype]] 내부 슬롯 - 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리킴.

const obj = { a: 1 };
// 객체 리터럴 방식으로 생성한 객체의 프로토타입 객체는 Object.prototype
console.log(obj.__proto__ === Object.prototype);  // true

// 객체 리터럴 방식으로 생성한 객체는 Object.prototype의 프로퍼티를 상속받는데,
// 그 중 하나가 hasOwnProperty 메서드임.
console.log(obj.hasOwnProperty('a'));  // tru