[ JavaScript 문법 종합반 2주차 (3-4)] 일급 객체로서의 함수

일급 객체로서의 함수

자바스크립트에서는 함수는 일급 객체 (First-Class Object) 라고 한다. 그래서 함수를 객체 처럼 여러가지 방식으로 다룰 수 있다.

일반 객체와 달리 함수는 특별한 능력을 가지고 있다. 함수가 일급 객체로 취급되기 때문에, 우리는 함수를 매우 유연하게 사용 할 수 있다. 그래서 자바 스크립트에서는 함수를 매우 중요한 개념* 으로 본다. 

일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. [위키백과]

 

함수가 일급 객체로 취급되는 5가지 경우에 대해서 알아보자.

 

---

 

• 1. 변수에 함수를 할당 
  : 함수는 변수에 할당할 수 있다. 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있다. 변수에 할당된 함수는 나중에 사용할 수 있다.

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

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

// (1) 변수에 함수를 할당 할 수 있다.

// 함수가 마치 값으로 취급된다.

// 함수가 나중에 사용 될 수 있도록 조치가 되었다.

const sayhello = function (){

console.log("hello!");

}

sayhello()

---------------------------------------

mac@macui-MacBook-Pro Week_2 % node 04.js
hello!

 

---

• 2. 함수를 인자로 다른 함수에 전달
  함수는 다른 함수에 인자로 전달될 수 있다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있다. 이것은 콜백(callback)이나 고차 함수(higher-order function)를 작성하는 데 사용된다.

 

1) 콜백함수 :  콜백 함수는 어떠한 함수의 매개변수로 쓰이는 함수를 말한다.

2) 고차함수(Higher-Order Function) : 고차 함수는 함수를 인자로 받거나 함수를 출력으로 반환하는 함수를 말한다. ( = 함수를 다루는 함수) 정리하면 콜백함수는 고차함수라고도 할 수 있다.

 

function callFunction(func) {
  func();
}

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

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

/ (2) 함수를 인자로 다른 함수에 전달 할 수 있다.

// (2)-1. 콜백함수 : 매개변수로서 쓰이는 함수

// (2)-2. 고차함수 : 함수를 인자로 받거나 return하는 함수

function callFunction (func){

// //매개변수로 받은 변수가 사실, 함수다.

func();

}

const sayhello = function (){

console.log("hello!");

};

callFunction(sayhello);

----------------------------------------------

mac@macui-MacBook-Pro Week_2 % node 04.js
hello!

 

---

 

• 3. 함수를 반환
  함수는 다른 함수에서 반환될 수 있다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용된다.

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

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

 

---

 

• 4. 객체의 프로퍼티로 함수를 할당 
  함수는 객체의 프로퍼티로 할당될 수 있다. 객체의 메소드로 함수를 호출할 수 있다.

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

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

// 일급객체로서의 함수(2)

const person = {

name : 'john',

age : 31,

isMarried : true,

sayhello: function() {

console.log("hello, my name is " + this.name);

},

};

// 상단에서 말하는 this -> person 을 말한다.

person.sayhello();

----------------------------------

mac@macui-MacBook-Pro Week_2 % node 05.js
hello, my name is john

- 템플릿 리터럴 ( 백틱('') 과 기호 ${} ) 를 사용하여 표현해보기

 : +(플러스) 연산자 없이 템프릴 리터럴의 백틱('') 과 기호 ${} 사용하여 동일하게 결과값이 나오도록 할 수 있다.

// 일급객체로서의 함수(2)
const person = {
    name : 'john',
    age : 31,
    isMarried : true,
    sayhello: function() {
        // console.log("hello, my name is " + this.name);
        console.log(`Hello, My name is ${this.name}`); 
    
    },
};
// 상단에서 말하는 this -> person 을 말한다. 

person.sayhello();

-------------------------------------

mac@macui-MacBook-Pro Week_2 % node 05.js
Hello, My name is john

 

왼쪽 예시와같이, 화살표 함수를 사용하였으나

결과값을 보면 undefind로 확인 되는 것을 볼 수 있다.

화살표 함수는 this를 바인딩 하지않는다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

• 5. 배열의 요소로 함수를 할당
  함수는 배열의 요소로 할당될 수 있다. 이것은 함수를 배열에서 사용할 수 있게 한다.

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

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력