Post

JS 일급객체란?

마침내 일급객체에 대해 배우게 되면서, 이 부분은 정리를 해보고자 한다.

일급객체(First-class Object)란?

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.

JS 에서는 함수일급객체에 해당한다.

5가지 사례가 있으니 코드로 정리해보았다.

  1. 변수에 함수를 할당하는 경우
1
2
3
4
5
6
7
// 1. 변수에 함수를 할당

let sayHello = function () {
  console.log("Hello");
};

sayHello(); // "Hello"
  1. 함수를 다른 함수의 인자로써 사용
1
2
3
4
5
6
7
// 2. 함수를 다른 함수의 인자로써 사용

let sayHello = function () {
  console.log("Hello");
};

sayHello(); // "Hello"
  1. 함수를 반환하는 경우
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 3. 함수를 반환하는 경우

function createAdder(num) {
  return function (x) {
    return x + num;
  };
}

const addFive = createAdder(5);

// 위처럼 쓰게되면, 아래과 같아진다. 오류 때문에 이름 뒤에 2 붙임.
const addFive2 = function (x) {
  return x + 5;
};

console.log(addFive(10));

// 이제 addFive 에 인수를 넣으면
return 10 + 5;
// 가 되어 addFive(10) 은 15 가 나온다.

추가로, 그냥 console.log(createAdder(5)) 를 해봤더니 결과로는 [Function (anonymous)] 가 나왔다. createAdder 가 반환하는 함수가 맞는지 제대로 확인해보고 싶어 이름을 붙여보려고 했는데, 오류가 발생했다. 익명함수만 사용가능한 건가?.

  1. 객체 내에서 사용되는 경우
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 4. 객체의 속성 사용되는 경우

const person = {
  name: "kim",
  age: "30",
  money: 0,
  isMarried: false,
  greeting: function () {
    console.log(`Hi, I'm ${this.name}`); // ${} : template literal
  },
  getMoney: (x) => {
    console.log(`${this.name} get ${x}, now have ${this.money}`); // 왜 안될까? -> arrow func 는 this 를 binding 하지 않는다고 한다. function keyword 를 썼을 때와 차이점.
  },
  getMoney: function (x) {
    this.money += x; // 이것도 사실 0 으로 계속 초기화된다.
    console.log(`${this.name} get ${x}, now have ${this.money}`);
  }
};

person.greeting();
person.getMoney(100);
  1. 배열의 요소로 함수를 할당하는 경우
1
2
3
4
5
6
7
8
9
10
11
12
// 5. 배열의 요소로 함수를 할당

const myArr = [
  function (a, b) {
    return a + b;
  },
  function (a, b) {
    return a - b;
  }
];

console.log(myArr[0](1, 3), myArr[1](1, 3)); // 4, -2

이렇게 5가지를 다루어 보았다.

일반 객체를 생각하면 이해하기 쉬울 것이다!

This post is licensed under CC BY 4.0 by the author.