자바스크립트_Chapter 12. 일급 객체로서의 함수 (First Class Function)

오늘 오전 고차함수 관련 예제를 살펴보다가 아직 개념을 정립하지 못한 것 같아 포스팅을 하기로 하였다. 

 

먼저 일급 객체라는 말부터 생소한데 

모던자바스크립트는 아래와 같이 표현하였다. 

일급 객체란? 
생성, 대입, 연산, 인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적 조작을 제한없이 사용할 수 있는 대상

 

쉽게 말해 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체이다.  

그렇기 때문에 자바스크립트에서는 함수를 매우 유연하게 활용할 수 있다!

 

일급 객체로서의 함수는 몇 가지 특징이 있는데 아래와 같다. 

 

# 1. 변수에 할당이 가능하다.

const sayHello = function () {
	console.log(‘Hello’)
};

sayHello();

 

위 예제는 함수를 처음 배울 때 함수를 선언하는 방법 중 함수 표현식 이다.

 

자세히 들여다보면 익명함수를 sayHello라는 변수에 할당하는 식으로 표현되어 있는데  호출 시에도 할당된 변수명을 사용하여야 한다.

 

변수에 할당이 가능한 것이 어떤 의미인가? 

• 함수가 값으로 취급된다. 
• 함수가 나중에 사용될 수 있다. 

함수가 변수에 할당되었기 때문에 일반적으로 변수를 사용하는 것 처럼 사용이 가능하다 ! 

 

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

function callFunction (func) {
	func() // 매개변수로 받은 변수 = 함수
}

const sayHello = function () {
	console.log(‘Hello’)
};

callFunction(sayHello);

 

위 예제를 살펴보면

callFunction 함수는 다른 함수(func)를 매개변수로 받고 실행한다. 

따라서 callFunction 함수를 호출 시 매개변수에 다른 함수가 와야하는데, 위 예제에서는 sayHello라는 함수를 매개변수로 넣고 호출하고 있다. callFunction(sayHello);

 

결과값을 예상해보자면 ? 

callFunction 함수는 매개변수를 받는 함수를 호출한 결과값을 받으니 console.log('Hello') 가 반환되어 콘솔창에 Hello가 찍힐 것이다.

 

이러한 특징을 아래와 같이 부른다. 

• 고차함수 : 함수를 인자로 받거나 return 하는 함수
• 콜백함수 : 매개변수로써 쓰이는 함수

콜백함수는 고차함수에 속한 개념이라고 보면 되는데, 

이후 비동기 처리를 위해 사용되는 개념이기에 아주 중요한 녀석이다. 따로 정리할 시간을 갖도록 해야겠다. 

 

# 3. 다른 함수를 반환할 수 있다. 

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

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

 

살짝 복잡해 보이지만 천천히 따라가보자 !

 

1. createAdder 함수는 매개변수(num)를 받아 새로운 함수를 return한다. 

2. 새로운 함수는 매개변수 (x)를 받아 기존에 받았던 num과 x를 더한 값을 return한다. 

 

아래 addFive를 풀어서 표현해보자면 아래와 같다. 

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

 

처음 코드블럭에서 addFive는 매개변수 5를 가지는 createAdder를 호출했다. 

즉 매개변수 5를 가진 return값을 가지는데 그 return값이 함수였다. (위에서 말한 새로운 함수 !) 

 

그 아래 console.log의 경우 매개변수 10을 지정했기에 앞서 봤던 addFive 의 x값에 10이 할당된다. 

따라서 값은 10+5 = 15 가 출력되는 것을 볼 수 있다. 

 

# 4. 객체의 요소로 구성된 함수

const person = {
	name : ‘john’,
	age : 30,
	isMarried: true,
	sayHello : function () {
		console.log(‘Hello my name is’ + this.name);
	}
}
person.sayHello(); 
// Hello my name is john

 

처음에 언급한 바와 같이 자바스크립트에서 함수는 일급 객체로 취급되기 때문에 객체의 프로퍼티로 할당 될 수 있고, 

그 객체의 메소드로 호출할 수 있다. 

(이때 this.name의 경우 this바인딩의 개념으로 자기 자신을 가르킨다.)

 

this 바인딩이라는 개념 역시 조금은 깊은 내용이기에 별도로 정리하는 시간을 갖도록 하겠다. 

우선 이번 포스팅에서는 함수 자체가 객체의 프로퍼티로 할당될 수 있다 정도로 넘어가면 좋을 듯 하다.

 

#5. 배열의 요소로 구성된 함수

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

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

//빼기
console.log(myArr[1](5,2)); // 3

 

앞서 객체의 요소로도 할당이 가능했다면 배열의 요소로도 할당이 가능하다. 

이때 함수를 호출하고자 할 때는 인덱스와 매개변수가 필요하다. 

 

#6. 추가 예제

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));
console.log(multiplyByThree(10);

const result = add(multiplyByTwo(5), multiplyByThree(10));
console.log(result);

 

위 부터 천천히 따라가보면 

 

multiplyBy 함수는 num이라는 매개변수를 받고, 새로운 함수를 return한다. 

(새로운 함수는 x 매개변수로 받는다.) 

 

해당 함수를 가지고 multiplyByTwo, multiplyByThree 함수를 만들었다. 

const multiplyByTwo = function (x) {
	return x * 2; 
}; 

console.log(multiplyByTwo(10)); // 20



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

console.log(multiplyByThree(10); // 30

 

만들어진 두 함수들을 매개변수로 넣고 add 함수를 호출하는 것도 가능하다. 

 

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

const result = add(multiplyByTwo(5), multiplyByThree(10));
console.log(result);

 

최종 result 값은 40이 되는 것을 볼 수 있다 ! 

 

이처럼 함수가 일급 객체로 활용이 가능하기 때문에 좀 더 다양한 조합으로 사용이 가능하고, 

더 간결한 코딩이 가능해지며 유지보수도 쉬워질 수 있다고 한다. 

(모듈화된 형태로 작성이 가능하다.) 

 

오늘도 천천히 기본을 쌓아가며 끝판왕에 반발짝 다가갔다.