13. 일급 객체

sandwe 2022. 7. 31. 13:00

일급 객체

자바스크립트의 함수는 일급 객체이다.

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

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

// 1. 무명의 리터럴로 표현이 가능하다.
// 2. 변수나 자료 구조에 저장할 수 있다.
// 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고, 변수에 할당된다.
const increase = function (num) {
  return ++num;
};

consst decrease = function (num) {
  return --num;
};

// 2. 함수는 객체에 저장할 수 있다.
const predicates = { increase, decrease };

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

  return function () {
    num = predicate(num);
    return num;
  };
}

// 3. 함수는 매개변수에게 함수를 전달할 수 있다.
var increaser = makeCounter(predicates.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

// 3. 함수는 매개변수에게 함수를 전달할 수 있다.
var decreaser = makeCounter(predicates.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

함수 객체의 프로퍼티

함수 객체만이 갖는 프로퍼티

function square(number) {
    return number * number;
}
// getOwnPropertyDescriptors 메서드를 통해 매개변수로 전달된 함수의 모든 프로퍼티의 프로퍼티 어트리뷰트를 확인
console.log(Object.getOwnPropertyDescriptors(square)); // 아래와 같이 출력된다

console.log(Object.getOwnPropertyDescriptor(square, '__proto__')); // undefined

arguments, caller, length, name, prototype 프로퍼티는 함수 객체 고유의 프로퍼티이다.
하지만 __proto__는 접근자 프로퍼티이며, 함수 객체 고유의 프로퍼티가 아니라 Object.prototype 객체의 프로퍼티를 상속받은 것이다.

Object.prototype 객체의 프로퍼티는 모든 객체가 상속받아 사용할 수 있다.

console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));

(상속에 대해서 다음 장에서 더 자세히 알아보도록 한다)

arguments 프로퍼티

함수 객체의 arguments 프로퍼티 값은 arguments 객체이다.
arguments 객체는 함수 호출 시 전달된 인자들의 정보를 담고 있는 순회 가능한 유사 배열 객체이며, 함수 내부에서 지역 변수로 사용된다.

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

// ❗️함수 객체의 length 프로퍼티는 매개변수의 개수를 가리킨다.
console.log(multiply.length);  // 2
// 자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.
// 매개변수 개수만큼 인수 전달하지 않아도 에러 발생하지 않는다.
console.log(multiply()); // NaN
console.log(multiply(1)); // NaN
console.log(multiply(1, 2)); // 2
console.log(multiply(1, 2, 3)); // 2

🤚 arguments 객체의 프로퍼티 구성

프로퍼티 키 = 인수의 순서, 프로퍼티 값 = 인수
callee 프로퍼티는 호출되어 arguments 객체를 생성한 함수 자신을 가리킨다.
length 프로퍼티는 인수의 개수를 가리킨다.
Symbol 프로퍼티는 arguments 객체를 Iterable(순회 가능한 자료구조)로 만들기 위한 프로퍼티이다.

🤚 arguments 객체는 매개변수와 인수의 개수를 확인하지 않는 자바스크립트의 특성 때문에 함수가 호출되면 인수 개수를 확인하고 이에 따라 함수 동작을 달리 정의해야 할 때 유용하다.

// 매개변수 개수를 확정할 수 없는 가변 인자 함수 구현 시 유용
function sum() {
  let res = 0;
  
  // arguments 객체는 length 프로퍼티가 있는 유사 배열 객체이므로 for문으로 순회 가능하다.
  for (let i = 0; i < arguments.length; i++) {
    res += arguments[i];
  }
  
  return res;
}

console.log(sum());        // 0
console.log(sum(1, 2));    // 3
console.log(sum(1, 2, 3)); // 6

❓ 유사 배열 객체
배열은 아니지만 length 프로퍼티를 가진 객체로, for 문으로 순회 가능한 객체를 의미한다.
배열은 아니므로 배열 메서드를 사용할 수 없다. 사용하려면 객체를 배열로 변환해야 한다.

객체에 배열 메서드를 사용하기 위해 객체를 배열로 변환해야 하는 번거로움을 해결하기 위해 ES6에서는 Rest 파라미터를 도입했다.

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

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3, 4, 5); // 15

ES6 파라미터의 도입으로 arguments 객체의 중요성이 이전 같지는 않지만 항상 ES6만 사용하는 것이 아니므로 알아둘 필요가 있다.

__proto__ 접근자 프로퍼티

모든 객체는 [[Prototype]] 이라는 내부 슬롯을 갖는다.
[[Prototype]] 내부 슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리킨다.
__proto__ 프로퍼티는 [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체 간접적으로 접근하기 위해 사용하는 접근자 프로퍼티이다.

prototype 프로퍼티

prototype 프로퍼티는 생성자 함수로 호출할 수 있는 함수 객체, 즉 consturctor 만이 소유하는 프로퍼티이다.
일반 객체와 생성자 함수로 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없다.

// 함수 객체는 protoype 프로퍼티를 소유한다.
(function () {}).hasOwnProperty('prototype'); // true

// 일반 객체는 prototype 프로퍼티를 소유하지 않는다.
({}).hasOwnProperty('prototype'); // false