2023 - 05 - 20 일급객체로써의 함수(콜백함수, 고차함수)

오늘 할일

자바스크립트 2주차 강의 듣기

 

오늘 배운 것

일급 객체 (First-class Object)로써의 함수
일급객체로써의 함수는 함수로써 자바스크립트에 존재하는게 아니라, 객체로써 자바스크립트에 존재하기 때문에 중요하다. 일급객체는 다른 객체들과 똑같다. 다른 객체들에 일반적으로 적용 가능한 연산자를 모두 지원한다.

다른 객체들은 매개변수로 전달될수 있고, return문으로 출력될 수 있고, 모든 연산이 가능하다.

일급객체로서의 함수도 그런것들이 가능하다.

 

 

함수가 일급객체로써 취급되는 5가지 경우

1. 변수에 함수를 할당할 수 있다.
2. 함수를 인자로 다른 함수에 전달할 수 있다.
3. 함수를 return문으로 반환할 수 있다.
4. 객체의 프로퍼티로 함수를 할당할수 있다.
5. 배열의 요소(인덱스)로 함수를 할당할 수 있다.

 

 

1. 변수에 함수를 할당할 수 있다.

함수 function이 마치 변수값으로 취급된다. 함수가 나중에 사용될 수 있도록 조치되었다

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

함수 표현식 형태. 함수가 우항에 위치

 

 

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

 

function callFunction (Func){
    Func();
}
const sayHello = function(){
    console.log("Hello!");
}
callFunction(sayHello); // hello!


매개변수로 받은 변수 Func (내맘대로지정가능)를 중괄호에 Func();로 다시 썼기 때문에 함수이며,
두번째 const함수에서는 Hello가 출력되도록 sayHello로 선언했고, 
이를 첫번째 함수 callFunction에 넣으면 Func(); 함수가 작동히여 Hello! 출력된다.

아래와 같은 식임.

callFunction (function(){
    console.log("Hello!");
})

// hello!

여기서 중요개념 2가지
콜백함수 : 매개변수자리에 있는 함수. 콜백함수는 고차함수의 한 종류다.
고차함수 : 함수를 인자로 받거나 return하는 함수

위에서 Func는 Func(); 로 쓰여 return하므로 고차함수이기도 하고, 괄호안에 쓰여 매개변수로도 쓰였으므로 콜백함수이기도 하다.


3. return문에 함수를 쓸수있다. 즉 함수를 반환할 수 있다.

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

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

// 15

function createAdder를 실행한 결과 => const addFive = createAdder를 대체함.
그말인 즉슨 return function ( ) {return x + num}이, createAdder(5)를 대체했다는 뜻.
createAdder(num)를 createAdder(5)가 대체함. 즉 num 자리를 5가 대체함. 
addFive도 괄호 열고닫았으므로 실행한 결과
return x = 10, num = 5이므로 실행하면 return x + num; 은 15가 된다.

 

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

 

객체 key-value pair에서 value자리 에는 어떤 데이터타입도 들어갈 수 있다.
데이터 타입은 string, number, boolean 등 다양. 심지어 함수도 들어갈 수 있다.

this= 자기자신을 가르키는 것. 중괄호 (스코프)안에서의 this는 항상 자기자신 객체를 가리킴.
즉 아래 객체에서 this는 person을 가리킨다. 즉 this.name은 person안에 있는 name인 jake이다.

 

const person = {
    name : 'jake',
    age : 31,
    gender : 'male',
    height : 186,
    isMarried : false,
    sayHello : function() {
        console.log("hello, my name is " + this.name)
    }
}
person.sayHello(); // "hello, my name is jake" 

person.sayHello(); 로 person 함수 내 sayHello의 value값 출력.
console.log자리에 this.name = jake


아래는 템플릿 리터럴 (백틱)을 이용한 풀이

const person = {
    name : 'jake',
    age : 31,
    gender : 'male',
    height : 186,
    isMarried : false,
    sayHello : function() {
        console.log(`hello, my name is ${this.name}`)
    }
}
person.sayHello(); // "hello, my name is jake"

 

화살표 함수를 이용한 풀이
(여기서는 name에 undefined가 나온다. 왜냐하면 화살표함수는 this를 바인딩하지 않기 때문.)

화살표 함수를 이용한 풀이
(여기서는 name에 undefined가 나온다. 왜냐하면 화살표함수는 this를 바인딩하지 않기 때문.)

const person = {
    name: 'jake',
    age: 31,
    gender: 'male',
    height: 186,
    isMarried: false,
    sayHello: () => {
        console.log(`hello, my name is ${this.name}`);
    },
};
person.sayHello(); // undefined

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

보통 배열 (대괄호 [ ])이라고 하면 하나하나의 요소들의 나열이지만, 함수를 배열의 요소로써 할당할 수 있다.

형태 
const myArr = [
    fucntion ( ) { }, function ( ) { }
]

배열의 특징은 나열된 순서대로 index값을 갖는다는 것. 0, 1, 2, 3..
여기서 대괄호 안 배열의 첫번째 function이 0, 두번째 function이 1이다.
나열이므로 function과 function 사이에 콤마를 쓴다.

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

console.log(myArr[0](1,3)); // 0번째인덱스함수적용 : 4
console.log(myArr[1](10,7)); // 1번째인덱스함수적용 : 3

 

 

일급객체로써의 함수 연습문제

함수값을 리턴하는 함수.

 

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

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



const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);

console.log(multiplyByTwo(10)) // x * num => 10 * 2 = 20
console.log(multiplyByThree(20)) // x * num => 20 * 3 = 60

위에서 multiplyByTwo와 multiplyByThree에 괄호쓰고 매개변수를 쓴 이유는, 
그 매개변수를 입력한 함수를 실행했을 때 값을 구해야 하기 때문.
여기서 임의로 입력한 10과 20은 매개변수 x에 들어가는 값.
그냥 multiplyByTwo만 쓰면 funcion값이 찍힘
즉 console.log(multiplyByTwo) = console.log(function(x){return x * num})

const multiplyByTwo에서는 num 자리에 2
const multiplyByTwo = function (x) {
    return x + 2;
}

const multiplyByTwo에서는 num 자리에 3
const multiplyByTwo = function (x) {
    return x + 3;
}

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

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

const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);

const result = add(multiplyByTwo(5), multiplyByThree(10)); 
// x * num => (5 * 2) + (10 * 3) = 40 

console.log (`FINAL => ${result}`)