[JavaScript] 일급 객체(First-class Object) 함수

내일배움캠프: Node.js_4기

10일차 TIL

~오늘의 수강 과목~

1. JavaScript 문법 종합반 2주차 (최원장 튜터님)

_ 일급 객체로서의 함수

---

 

자바스크립트에서의 함수는 객체처럼 여러 방식으로 다룰 수 있다.

이를 일급객체로서의 함수라고 하는데 사실 이렇게 들으면 무슨 얘기인지 이해가 잘 되지 않아서..

아래 강의 예제와 함께 공부해봤다.

 

일급객체(First-calss Object) 란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

 

함수를 일급 객체로 다루면 코드가 간결해지고 모듈화, 유지보수가 쉬워짐

 

 

1. 변수에 함수 할당 가능

함수가 값으로 취급되어, 변수에 할당 후 나중에 사용될 수있도록 조치가 가능

 

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

이렇게 변수에 함수를 넣을 시 장점: 어디서나 sayHello라는 이름으로 함수 호출이 가능

 

 

2. 함수를 다른 함수에 인자로 전달 가능

함수가 값으로 취급되기 때문에 인자로 전달이 가능

콜백 함수(=어떤 함수의 매개변수로 쓰이는 함수) 혹은 고차 함수(=함수를 인자로 받거나 리턴하는 함수)를 작성하는데 사용

 

function callFunction (func) {
    // 매개변수로 받은 func 변수가 사실은 함수다.
    func(); // 왜냐하면 이렇게 괄호로 인자를 받을 수 있기 때문에
}

callFunction(sayHello); // 'hello' 출력

1번에서 sayHello(콘솔에 'hello'를 반환하는 함수)라고 저장된 함수가 func로 전달

결국 아래 코드와 같은 내용

 

callFunction(function () {
    console.log('hello');
})

 

 

3. 함수 반환 가능

마찬가지로 함수가 값으로 취급되기 때문에 다른 함수에서 반환이 가능

함수 팩토리나 클로저를 작성하는데 사용

 

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

const addFive = createAdder(5);

console.log(addFive(10)); // 15 출력

결국 아래 코드와 같다.

 

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

console.log(addFive(10)); // 15 출력

 

 

4. 객체의 프로퍼티로 함수 할당

객체의 메소드로 함수 호출 가능

 

const person = {
    name: 'John',
    age: 30,
    isMarried: true,
    sayHello: function () {
    console.log(`Hello, My name is ${this.name}.`); // this는 항상 자기 자신(객체)을 가리킨다. 자바스크립트 문법이 들어가는 곳에 달러표시와 중괄호 사용
    }
};

person.sayHello();

 

// sayHello 코드 수정

// 초기 버전
sayHello: function () {
    console.log('Hello, my name is ' + this.name); // this는 항상 자기 자신(객체)을 가리킨다.
// }


// 템플릿 리터럴 버전
sayHello: function () {
    console.log(`Hello, My name is ${this.name}.`); // this는 항상 자기 자신(객체)을 가리킨다. 자바스크립트 문법이 들어가는 곳에 달러표시와 중괄호 사용
}


// 화살표함수 버전
sayHello: () => {
    console.log(`Hello, My name is ${this.name}.`);
}
// Hello, My name is undefined. 출력. 왜지? 3주차에서 설명해주실 예정
// 화살표함수는 this를 바인딩하지 않는다

 

 

5. 배열의 요소로 함수 할당

함수를 배열에서 사용 가능

 

const myyArr = {
    function (a, b) {
        return a + b;
    }, // 0번째 요소
    function (a, b) {
        return a - b;
    } // 1번째 요소
};

// 더하기
console.log(myArr[0](1, 3));

// 빼기
console.log(myArr[1](10, 7));

 

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

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

const multiplyByTwo = multiplyBy(2);
// 아래 코드와 같은 의미. 이제 어떤 숫자가 들어와도 2와 곱해줌. 리팩토링을 한 것
// function multiplyBy(2) {
//     return function (x) {
//         return x * 2;
//     };
// }

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

console.log(multiplyByTwo(5)); // 10 출력
console.log(multiplyByTwo(10)); // 20 출력
console.log(multiplyByThree(10)); // 30 출력

const result = add(multiplyByTwo(5), multiplyByThree(10));
console.log(`Final => ${result}`) // 40 출력. Two(10) + Three(30)이기 때문

---