seunghyun Note

18장(함수와 일급 객체) 본문

스터디/모던자바스크립트 deep dive

18장(함수와 일급 객체)

승숭슝현 2024. 1. 8. 10:30

18.1 일급 객체

  • 일급 객체의 조건
    1. 무명 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
    2. 변수나 자료구조(객체, 배열)등에 저장할 수 있다.
    3. 함수의 매개변수에 전달할 수 있다.
    4. 함수의 반환값으로 사용할 수 있다.
// 1. 함수는 무명의 리터럴로 생성할 수 있다.
// 2. 함수는 변수에 저장할 수 있다.
// 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.
const increase = function (num) {
  return ++num;
};

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

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

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

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

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

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

18.2 함수 객체의 프로퍼티

함수도 객체이기 때문에 프로퍼티를 가질 수 있다.
console.dir로 함수 내부를 볼 수 있다.

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

console.dir(square);

Object.getOwnPropertyDescriptors메서드로 함수의 모든 프로퍼티의 프로퍼티 어트리뷰트를 확인할 수 있다.

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__는 square 함수의 프로퍼티가 아니다.
console.log(Object.getOwnPropertyDescriptor(square, '__proto__')); // undefined

// __proto__는 Object.prototype 객체의 접근자 프로퍼티다.
// square 함수는 Object.prototype 객체로부터 __proto__ 접근자 프로퍼티를 상속받는다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));
// {get: ƒ, set: ƒ, enumerable: false, configurable: true}

Spread 연산자(Spread Operator)
Spread 연산자는 연산자의 대상 배열 또는 이터러블을 개별 요소로 분리한다.

배열에서 사용하기

var arr = [1,2];

// ...arr은 [1,2]를 개별 요소로 분리한다.
var newArr = [...arr, 4,5];

console.log(newArr);  // [1,2,4,5]

객체에서 사용하기

var obj = {
  name: 'inyong',
  age: 20
}
// {name: "inyong", age: 20}

var newObj = {
  ...obj,
  addr: '천안시'
}
// {name: "inyong", age: 20, addr: "천안시"}

caller, length, name ... proto 접근자 등등

728x90