본문으로 바로가기

함수 : First Class



자바스크립트에서 함수는 값으로 취급된다.

그리고 함수는 객체다. 


이는 함수도 일반 객체처럼 취급될 수 있다는 것을 말한다.


또한 다음과 같은 특징으로 인해 자바스크립트에서는 함수를 일급 객체(First Class)라고 부른다.


1. 러터럴에 의해 생성

2. 변수나 배열의 요소(원소), 객체의 프로퍼티 등에 할당 가능

3. 함수의 인자로 전달 가능

4. 함수의 러턴값으로 리턴 가능

5. 동적으로 프로퍼티를 생성 및 할당 가능


여기서 일급객체라는 말은 컴퓨터 프로그래밍 언어분야에서 쓰이는 용어로서, 앞에서 나열한 기능이 모두 가능한 객체를 일급객체라고 부른다.

이렇게 자바스크립트 함수가 가지는 이러한 일급 객체의 특성으로 함수형 프로그래밍이 가능한 것이다.



그럼 위에 나열된 항목들을 살펴보자.


1. 리터럴에 의해 생성


// 함수 리터럴을 통한  sum()함수 정의

// 함수 표현식 방법
var sum = function(x, y) {
return x + y;
}
//생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식

// 함수 선언문 방법
function sum(x, y) {
return x + y;
}
// 함수 생성시 함수명이 정의되어 있는 것을 함수 선언문 (, 함수 이름이 정의되어 있음)


위 코드와 같이 함수 리터럴을 이용해 함수를 생성할 수 있다. 


실제로 함수 선언문이나 함수 표현식 방법 모두는 이런 함수 리터럴 방식으로 함수를 생성하는 것이다.




2. 변수나 프로퍼티의 값으로 할당이 가능


// 변수에 함수 할당
var bar = function() { return 'jaehee'; };
console.log(bar()); // jaehee

// 프로퍼티에 함수 할당
var obj = {};
obj.bar2 = function() { return 'javaScript'; };
console.log(obj.bar2()); // javaScript


위 코드의 bar2처럼 배열의 원소 등에도 할당이 가능하다.





3. 함수의 인자로 전달 가능


// 함수를 다른 함수의 인자로 넘긴 코드
// 함수 표현식으로 test() 함수를 생성
var test = function(func) {
func(); // 인자로 넘겨받은 func()함수를 호출
}

//test() 함수를 호출,실행
test(function(){
console.log('함수자체는 매개변수(인자)로 사용될 수 있다.');
});


test() 함수를 호출할 때, 함수 리터럴 방식으로 생성한 익명함수를 func 인자로 넘겼다.

따라서 test() 함수 내부에서는 func매개변수로 인자에 넘겨진 함수를 호출할 수 있는 것이다.




4. 함수의 리턴값으로 리턴 가능


// 함수를 다른 함수의 리턴값으로 활용한 코드

// 함수를 리턴하는 foo() 함수 정의
var foo = function() {
// 함수를 리턴
return function() {
console.log('이 함수는 함수를 반환한다.');
};
};

// foo() 함수가 호출되면, 리턴값으로 전달되는 익명함수가 bar 변수에 저장된다.
var bar = foo();

// 익명함수를 호출하기 위해서 ()인 함수호출 연산자를 이용해
// bar()로 익명함수를 호출,실행한다.
bar();


위 코드는 간단한 익명함수를 리턴하는 역할을 한다. 이것이 가능한 이유 또한 함수 자체가 값으로 취급되기 때문이다.





5. 동적으로 프로퍼티를 생성 및 할당 가능

계속해서 강조하지만 자바스크립트에서는 함수도 객체다.

즉, 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티를 생성하고 할당이 가능하다는 것이다.


// 함수 선언문 방식으로 add() 함수 정의
function add(x,y) {
return x + y;
}

// add()함수도 객체처럼 프로퍼티를 가질 수 있다.
// add()함수 객체에 result, status 프로퍼티를 추가해 본다.
add.result = add(3,4);
add.status = 'complete';

console.log(add.result); // 7
console.log(add.status); // 'complete'


add()함수는 마치 일반 객체처럼 result 프로퍼티를 동적으로 생성하고 add()함수를 호출한 결과를 저장한 것을 확인 할 수가 있다.

이렇게 일반객체의 접근방식처럼 add.result, add.status를 이용해 접근이 가능하다.


다시말해서 자바스크립트에서 함수는 특정기능의 코드를 수행할 뿐만 아니라, 일반 객체처럼 자신의 프로퍼티를 가질 수 있는 특별한 객체라고 볼 수 있다.



>

Jaehee's WebClub