Index
- 함수 선언식 & 함수 표현식
- 자바스크립트 자료형
- 일급객체
3-1. 정의
3-2. 일급객체의 조건- 결론
나는 그동안 자바스크립트 화살표 함수를 자연스럽고 당연하게 받아들이고 사용하고 있었기 때문에, 변수에 함수를 담는 것에 의문을 품지 않았다. 주변에서 이런 질문을 받은 적이 있다.
"왜 변수에 함수를 대입해요?"
변수에 함수를 대입할 수 있는 이유에 대해서 정리해보고자 한다.
1. 함수 선언식 & 함수 표현식
자바스크립트 함수에는 선언식Function Declarations과 표현식Function Expressions이 있다.
함수 선언식
function f1 () {
// ...
}함수 표현식
const a = function f1() {
//...
};
const b = () => {
// 화살표 함수(Arrow Functions)
};함수 선언식은 다른 프로그래밍 언어에서도 많이 보는 형태이다. 하지만 함수 표현식에서는 변수 안에 함수의 반환값이 아니라 함수 자체를 담는 모양새이다. 이게 어떻게 가능한 것일까?
2. 자바스크립트 자료형
자바스크립트에서 자료형은 크게 두 가지로 나눌 수 있다.
- 원시 자료형
- 객체
원시 자료형
- string
- number
- boolean
- undefined
- null
- symbol
객체
- 배열
[ ] - 함수
function - 객체 리터럴
{ }
객체 타입에서 배열과 함수를 제외하고 {}로 데이터를 묶는 것을 객체 리터럴이라고 한다. 객체 리터럴은 여러 속성property으로 구성될 수 있으며, 각 속성은 속성 이름과 속성 값이 있다. 객체의 속성은 추가, 수정, 삭제가 가능하다.
const name = {
first: 'Jack',
last: 'Dawson',
}
// first, last가 속성 이름
// 'Jack', 'Dawson'이 속성 값
// 속성 추가
name.gender = 'M';
// 속성 수정
name.first = 'Rose';
// 속성 삭제
delete name.last;여기서 배열과 함수가 객체인 까닭은 객체의 성질(속성 추가, 수정, 삭제)을 모두 사용할 수 있기 때문이다. 그러므로 다음과 같은 일이 가능하다.
const f1 = () => {};
f1.abc = 1;
console.log(f1.abc); // 1하지만 배열과 함수는 본래의 사용 목적이 있기에 위와 같이 사용하지 않는다. 속성을 조작해야 하는 목적이라면 객체 리터럴을 사용하면 된다. 중요한 것은 '함수가 객체'라는 점이다.
3. 일급객체
자바스크립트에서 함수는 일급객체이다. 이제 일급객체가 무엇인지 알아보자.
3-1. 정의
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 일급객체(first-class object)라고 한다. 즉, 함수를 다른 데이터(string, number, boolean, object, ...) 다루듯이 다룰 수 있다는 뜻이다.
여기서 first-class의 의미를 알 수 있겠다. '사용할 때 다른 요소들과 차별을 두지 않는다'는 의미이다.(참고)
하나의 언어적 특성으로 받아들이면 된다. 자바스크립트에서 함수는 일급객체이다. 일급객체가 될 수 있는 조건이 있는데, 자바스크립트 함수가 그 조건에 부합한다.
3-2. 일급객체의 조건
3-2-1. 변수나 데이터에 담을 수 있다.
const f1 = function() {
console.log("Hello World");
}
// 자료형 확인
typeof f1; // 'function'이제야 함수 표현식이 이상하게 느껴지지 않는다. f1 함수의 자료형을 확인 해보면 function이라고 나온다. 변수에 담는다고 string이나 number와 같은 원시자료형이 되는 것은 아니다.
3-2-2. 함수의 파라미터로 전달할 수 있다.
함수가 일급객체이기에 콜백 함수callback function를 사용할 수 있다. 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 한다.
// 예시 : 이벤트 리스너 등록
button.addEventListener('click', () = > { console.log('버튼 클릭') });위 예시에서 addEventLister() 함수의 두 번째 매개변수로 전달되는 함수를 콜백 함수로 볼 수 있다.
3-2-3. 함수의 리턴값으로 사용할 수 있다.
함수가 일급객체이기에 고차함수high order function를 만들 수 있다. 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 고차함수라고 한다.
const f1 = () => {
return () => {
console.log('hello');
}
}대부분 다 비슷한데 특정 부분만 다른 함수를 사용하는 경우, 매개변수가 있는 고차함수를 이용해 함수의 중복을 제거할 수 있다.
const f2 = (param) => {
return () => {
console.log(param);
}
}고차함수를 언제, 왜 사용하는지는 나중에 다뤄보겠다.
4. 결론
자바스크립트에서 함수는 일급객체이다. 일급객체는 1) 변수나 데이터에 담을 수 있으며, 2) 함수의 파라미터로 전달할 수 있으며, 3) 함수의 리턴값으로 사용할 수 있다. 따라서 함수표현식, 콜백함수, 고차함수 등의 사용이 가능하다.
References
