[JavaScript 문법] 일급 객체로서의 함수

📌

자바스크립트에서 함수는 일급 객체(First-Class Object)라고 합니다. 그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있습니다. 일반 객체와 달리 함수는 특별한 능력을 가지고 있습니다.

함수가 일급 객체로 취급되기 때문에, 함수는 매우 유연하게 사용 가능합니다. 아래에서 함수가 일급 객체로 취급되는 5가지 경우에 대해 알아보겠습니다.

일급객체(First-class Object)
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킵니다.

◼ 변수에 함수 할당

함수를 변수에 할당할 수 있습니다. 함수는 값으로 취급되기 때문에, 변수에 할당할 수 있습니다. 변수에 할당된 함수는 나중에 호출하여 사용할 수 있습니다.

const 변수명 = 함수() {
    console.log("Hello!");
};
변수명();

// 변수"sayHello"에 함수 할당
const sayHello = function () {
    console.log("Hello!");
};

// "sayHello"이라는 이름을 가진 함수를 호출할 수 있음
sayHello(); // "Hello!"

◼ 함수를 인자로 다른 함수에 전달

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

콜백 함수(callback)
매개변수로 쓰이는 함수입니다.

고차 함수(Higher-Order Function)
함수를 인자로 받거나 출력으로 반환(return)하는 함수입니다.
콜백함수는 고차함수의 한 종류이기도 합니다.

function 함수명(매개변수) {
    // 매개변수로 받은 변수(매개변수)가 사실, 함수다.
    매개변수명();
}

function callFunction(func) {
    // 매개변수로 받은 변수(func)가 사실, 함수다.
    func();
}
const sayHello = function () {
    console.log("Hello!");
};
callFunction(sayHello); // "Hello!"

// callFunction(sayHello);
// ↑ 둘은 같은 뜻이다 ↓
// callFunction(function () {
//     console.log("Hello!");
// });

◼ 함수를 반환

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

function createAdder(num) {
    // 함수를 return
    return function (x) {
        return x + num;
    };
}

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

// const addFive = createAdder(5);
// console.log(addFive(10));
// ↑ 둘은 같은 뜻이다 ↓
// const addFive = function (x) {
//     return x + 5;
// };
// console.log(addFive(10));

◼ 객체의 프로퍼티로 함수를 할당

함수는 객체(key:value)의 프로퍼티로 할당될 수 있습니다. 객체의 메소드로 함수를 호출할 수 있습니다.

const 변수명 = {
    key1: value1,
    key2: value2,
    key3: 함수,
};

const person = {
    name: "John",
    sayHello: function () {
        console.log(`Hello, my name is ${this.name}`);
    },
    // sayHello: () => {
    //     console.log(`Hello, my name is ${this.name}`);
    // },
    // 화살표 함수 사용시 "Hello, my name is undefined"로 출력됨
    // 화살표 함수는 this를 바인딩하지 않음
};

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

◼ 배열의 요소로 함수를 할당

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

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