NBC - JS 2주차 강의 정리 : 일급 객체로서의 함수

 

 

일급 객체로서의 함수 : First-Class Object

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
= 다른 객체와 같다

- 함수로서의 JS에 존재하는 것이 아니라 객체로서 JS에 존재하기 때문에 중요하다.
- JS 내에서 함수는 변수에 저장이 되기도 하고, 인자로 들어 가기도 하고, return이 되기도 함.

 

 

1. 변수에 함수를 할당

함수는 값으로 취급되기 때문에 변수에 할당 가능 (나중에 사용 가능)

const sayHello = function () {
  console.log("hello");
};

 

 

2. 함수를 인자로 다른 함수에 전달 가능 (콜백, 고차 함수)

 

2-1. 콜백함수

매개변수로써 쓰이는 함수 (고차함수의 한 종류라 보면 됨)

function callFunction(func) {
  // 매개변수로 받은 변수가 사실 함수임
  func();
}

 

 

2-2. 고차함수

함수를 인자로 받거나 return 하는 함수

const sayHi = function () {
  console.log("hi");
};

callFunction(sayHi);
// func로 sayHi가 저장된 함수가 전달됨

 

 

3. 함수를 반환할 수 있다.

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

const addFive = createAdder(5); // num에 5가 들어감
// 결국 이런 샘
// const addFive = function (x) {
// return x + 5;
// };
console.log(addFive(10)); // x에 10이 들어감 > 15 출력

 

 

4. 객체 안에서 함수가 쓰이는 방법

 

4-1. 객체의 요소로 함수를 할당

 

const person = {
  name: "jang",
  age: 30,
  isMarried: true,
  sayHello: function () {
    console.log("Hello my name is " + this.name);
    console.log(`Hello my name is ${this.name}`);
  },
  sayHi: () => {
    console.log("Hi my name is " + this.name); //
  },
};
person.sayHello(); // Hello my name is jang 출력
person.sayHi(); // Hi my name is undefined 출력 (this가 undefined) > this 바인딩 부분 > 화살표 함수 사용xxxx

 

 

4-2 배열의 요소로 함수를 할당

const myArr = [
  function (a, b) {
    return a + b;
  },
  function (a, b) {
    return a - b;
  },
];
console.log(myArr[0](1, 3)); // 4
console.log(myArr[1](10, 7)); // 3

 

 

4-3 대입, 할당 등 예시

function multiplyBy(num) {
  return function (x) {
    return x * num;
  };
}

function add(x, y) {
  return x + y;
}

const multiplyByTwo = multiplyBy(2);
// 대입해보면 밑에와 같이 나옴
// const multiplyByTwo = function (x) {
// return x * 2;
// }

const multiplyByThree = multiplyBy(3);

console.log(multiplyByTwo(10), multiplyByThree(10)); // 20, 30 출력
// x에 10이 들어감

const result = add(multiplyByTwo(5), multiplyByThree(10));
console.log(`FINAL => ${result}`); // 40 (x에 5와 10이 들어감) > 5 x 2, 10 x 3의 합인 40