[2주차] 자바스크립트 문법 종합반 : 일급 객체로서의 함수 (First-Class Object)

자바스크립트 문법 종합반

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

(1) 변수에 함수를 할당

(2) 함수를 인자로 다른 함수에 전달

(3) 함수를 반환

(4) 객체의 프로퍼티로 함수를 할당

(5) 배열의 요소로 함수를 할당

---

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

일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 결국 다른 객체들과 일반적으로 같다. 객체는 기본적으로 (1)매개변수로 전달 될 수 있고 (2)리턴문으로 출력될 수 있고, 결국 함수도 이 모든 것이 가능하다는 것!

그렇기 때문에, 우리는 함수를 매우 유연하게 사용할 수 있다.

 

 

(1) 변수에 함수를 할당

// 이제 특징을 알아보자. // 함수가 일급 객체로 취급되는 5가지의 경우
// 1. 변수에 함수를 할당할 수 있다.
// : 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있습니다. 변수에 할당된 함수는 나중에 사용할 수 있습니다.

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

sayHello(); // "Hello!" 출력

// 이것의 의미는? sayHello 라는 변수에 함수를 할당했기 때문에 함수가 필요한 곳에서는 변수 하나만 사용해주면서 함수를 실행시킬 수 있다.

 

 

 

(2) 함수를 인자로 다른 함수에 전달

// 2.  함수를 인자로 다른 함수에 전달할 수 있다.
// 콜백함수: 매개변수로서 쓰이는 함수 (콜백함수는 고차함수의 한 부분)
// 고차함수 : 함수를 인자로 받거나 return 하는 함수
function callFunction(func) {
  // 매개변수로 받은 func 라는 변수가 사실 함수다. 왜냐하면 밑에서 (); 
  func(); // 고차함수
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

 

 

 

 

 

(3) 함수를 반환

// 3. 함수를 반환할 수 있다(return)
// 함수는 다른 함수에서 반환될 수 있습니다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있습니다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용됩니다.
function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
// const addFive = function (x) {
// x + 5;
// }

console.log(addFive(10));
// addFive(10 ) = function (10) {
// 10 + 5;
// }

// 15 출력

 

 

 

 

 

 

(4) 객체의 프로퍼티로 함수를 할당

// 4. 객체의 프로퍼티로 함수를 할당할 수 있다.
// 객체 안에서 함수가 어떻게 쓰일까요?
// 함수는 객체의 프로퍼티로 할당될 수 있습니다. 객체의 메소드로 함수를 호출할 수 있습니다.
const person = {
  name: 'John',
  sayHello: function() { // 객체 안의 value는 어떤 데이터타입도 다 들어올 수 있다.
    console.log(`Hello, my name is ${this.name}`); // backtick 사용 및 js 문법이 들어간느 부분에 ${} 추가
    // 주목! person 객체의 name 에 접근하려면?  
    // 필수 지식: 중괄호 안에 있는 this는 항상 자기 자신을 가리키는 것
    // 결국 this.name dms 'John'을 가리킨다.

    // console.log('Hello, my name is' + this.name); 과
    // console.log(`Hello, my name is ${this.name}`);가 같다.
  }
};

person.sayHello(); // "Hello, my name is John" 출력


// 연습문제: 위 함수를 화살표 함수로 만들어보기
const person = {
  name: 'John',
  sayHello: () => {
    console.log(`Hello, my name is ${this.name}`)
  },;
}

person.sayHello();  // "Hello, my name is undefined" // 왜 화살표 함수를 사용했더니 undefined가 나왔나? -> 화살표함수는 this를 binding 하지 않기 때문! 3주차에서 설명할 예정
// 결국 이런 케이스에서는 화살표 함수를 쓰면 안된다!

 

 

 

 

(5) 배열의 요소로 함수를 할당

// 5. 배열의 요소로 함수를 할당할 수 있다.
// 함수는 배열의 요소로 할당될 수 있습니다. 이것은 함수를 배열에서 사용할 수 있게 합니다.
const myArray = [
  function(a, b) {
    return a + b;    // 현재 함수 두가지를 요소로 갖는 배열 선언
  }, // 0 번째 요소
  function(a, b) {
    return a - b;
  } // 1번째 요소
];

console.log(myArray[0](5, 10)); // 배열에 요소에 접근하는 방법: myArray라는 배열의 0번째 요소에 input 5, 10을 넣어라 // 15 출력
console.log(myArray[1](10, 5)); // 배열에 요소에 접근하는 방법: myArray라는 배열의 1번째 요소에 input 10, 5을 넣어라 // 5 출력

// 함수가 일급 객체로 취급되기 때문에, 자바스크립트에서 함수는 매우 유연하게 사용될 수 있습니다. 이것은  등 다양한 프로그래밍 패턴에서 사용됩니다. 함수를 일급 객체로 다룰 수 있다는 것은, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있게 해줍니다.




// 다른 예제
// 함수를 일급 객체로 다룰 수 있다는 것은, 함수를 다양하게 조합할 수 있다는 것을 의미합니다. 새로운 함수를 반환하는 함수를 작성하면, 함수를 조합하여 더 복잡한 기능을 구현할 수 있어요. 이것을 활용하면 코드를 더욱 간결하게 작성할 수 있으며, 유지 보수도 쉬워집니다.
function multiplyBy(num) {
  return function(x) { // 고차함수
    return x * num;
  }
}

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

const multiplyByTwo = multiplyBy(2);
// const multiplyByTwo = function(x) {
//    x * 2;
// }

const multiplyByThree = multiplyBy(3);
// const multiplyByThree = funtion(x) {
//    x * 3;
// }

const result = add(multiplyByTwo(5), multiplyByThree(10)); 
// const result = add( const multiplyByTwo = function(5) {
//    5 * 2;
// },
// const multiplyByThree = function(10) {
//    10 * 3;
// }
// )

// const result = add(10, 30) {
//  10 + 30;
// }

console.log(${result});
// 40




// 이처럼 함수가 일급 객체로 취급되는 것은 자바스크립트에서 함수를 다양한 방식으로 사용할 수 있게 해줍니다. 함수를 객체나 배열과 같은 일반적인 자료형과 동일한 방식으로 사용할 수 있기 때문에, 코드를 더 간결하고 모듈화된 형태로 작성할 수 있습니다.