(5) Javascript : Function as a First Class Object

Javascript 라는 언어는 함수를 매우 유연하게 사용할 수 있다고 하며, 5가지 정도의 특징을 강의에서 말해주었다.

 

하나씩 확인할 예정이지만, 5가지를 기억해두는 것도 좋은 approach 라고 생각한다.

(1) 변수에 함수를 할당할 수 있다. -> 함수를 값처럼 취급

(2) 함수를 인자로 다른 함수에 전달할 수 있다 -> 콜백 함수, 고차 함수를 이용

(3) Object 내에 함수 사용

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

 

상대적으로 직관적이면서도 활용성이 굉장히 높게 느껴진다. 

// (1) 변수에 함수를 할당해서, 함수를 값으로 설정
// 이 방법이 좋은 이유는 함수를 나중에 부를 수 있도록 조치해 줄 수 있다.
const sayHello = function () {console.log('Hello!')}

// (2) 함수를 인자로 다른 함수에 전달.
// (2 - 1) 콜백함수 -> 매개변수로서 쓰이는 함수

function callFunction (func) {
	// 매개변수로 함수를 받고 있음 
	func();
 };
 
 const sayHello = function () { console.log('Hello!'); };
 
 callFunction(sayHello);
 
 
 // (2 - 2) 고차함수 -> 함수를 인자로 받거나 return 하는 함수
 // 콜백 함수는 고차 함수의 한 종류로, 함수를 인자로 받는 함수
 // 고차 함수의 다른케이스에서는 함수를 반환할 수 있다.
 // 아래 함수에서는 함수를 리턴하도록 시도중
 function createAdder(num) {
 	return function (x) {
    	return x + num;
    }
 }
 
 const addFive = createAdder(5);
 // 변수에 함수를 할당 
 console.log(addFive(10))
 // above will print 15 
 
 // (3) Object에 함수 들어감
 // 다만 화살표 함수에서는 this 에 바인딩 되지 않는다. 
 const person = {
 	name : 'John',
    age : 31,
    isMarried : true,
    sayHello: function () {
    	console.log(`Hello, My name is + ${this.name}`)
        }
 }
 
 person.sayHello();
 
 // (4) 배열의 요소로 함수 할당
 const myArr = [ function (a,b) {return a + b}, function (a,b) {return a - b}];
 console.log(myArr[0](1,3));

콜백 함수와 고차 함수가 단숨에 모두 외워지지는 않지만, 중요한 개념은 콜백 함수는 함수를 인자로 받고 고차 함수의 일종이며, 고차 함수의 상위 개념은 함수를 리턴 할 수도 있다는걸 기억해 두고 문법은 필요할 때 다시 꺼내 쓰면 좋을 것 같다.

// 다양한 활용의 예제 
// 아래는 고차 함수로 함수를 리턴함 
function multiplyBy(num) {
    return function () {
        return x * num
    }
}

function add(x,y) {
    return x + y;
}
// 고차 함수는 여러 변수로 함수 지정이 가능
// 마치 파이썬에서 class 를 함수로 쓰는 것 같다.
const multiplyByTwo = multiplyBy(2);
const multiplyByThree = multiplyBy(3);

console.log(multiplyByTwo(3));
console.log(multiplyByThree(3));

// 함수를 변수로 지정해 주면서, 함수 안에 다른 함수 실행 값을 넣을 수 있다.
const result = add(multiplyByTwo(5), multiplyByThree(10))
console.log(result)