[javascript] 1급시민, 1급객체, 1급함수

javascript, 1급시민, 1급객체, 1급함수

이번 포스트에서는 javascript의 일급시민/일급객체/일급함수에 대한 개념일 알아보도록 하겠습니다.

  1. 1급시민
  2. 1급객체
  3. 1급함수

참고 : 해당 포스트는 closure에 대한 깊은 이해를 돕고자 합니다.


1급시민

프로그래밍의 변수에서 1급 시민의 조건은 다음과 같습니다.

  1. 변수에 담을 수 있다.
  2. 함수(혹은 메소드)의 인자(매개변수, Parameter)로 전달할 수 있다.
  3. 함수(혹은 메소드)의 반환값(return)으로 전달할 수 있다.
var a = 1 // 변수에 담을 수 있다.
function f1 (num) { // 매개변수로 전달할 수 있다.
  var b = num + 1
  return b  // return으로 전달할 수 있다.
}
console.log(f1(a)) // result: 2

대부분(거의 모든)의 프로그래밍 언어에서 숫자형/문자형 등은 1급 시민의 조건을 충족합니다.


1급객체

1급 객체란, 말 그대로 1급 시민의 조건을 충족하는 객체(Object) 입니다. javascript에서 객체는 1급시민입니다. 즉, 1급객체를 사용합니다.

var a = {msg: 'a는 1급 객체입니다.'} // 변수에 담을 수 있다.
function f1 (a) { // 매개변수로 전달할 수 있다.
  var b = a
  b.msg2 = '이것은 2번째 메세지입니다.'
  return b  // return으로 전달할 수 있다.
}
console.log(f1(a)) // result : {msg: 'a는 1급 객체입니다.', b: '이것은 2번째 메세지입니다.'}

그리고 javascript의 function은 prototype을 통해 object를 상속 받아 사용합니다. 즉, javascript의 function 또한 object 라는 것입니다. 그래서 다음과 같은 일이 가능합니다.

function a () {}
a.msg = 'test' // javascript의 function은 object임을 알 수 있다.
console.log(a) // result : { [Function: a] msg: 'test' }

이렇게, function에다가 Object의 Key 값을 부여하여 사용할 수 있습니다. 따라서 다음과 같은 결론이 나옵니다.

javascript는 함수는 1급 시민이다.




1급함수

위에 언급했듯이, javascript의 함수는 1급 함수입니다. 따라서

  1. javascript의 함수는 변수에 할당할 수 있다.
  2. javascript의 함수는 매개변수로 전달할 수 있다.
  3. javascript의 함수는, 함수를 반환할 수 있다.

라는 게 됩니다.

// 변수에 함수를 할당한다.
var a = function (num) {
  return num * num
}

// 매개변수로 함수를 전달한다.
function b (fun) {
  var num = fun(10)

  // return 값으로 함수를 사용할 수 있다.
  return function (num2) {
    var num2 = num2 || 2
    return num * num2
  }
}
// b에 a라는 함수 전달했으며
// b는 다시 함수를 반환한다.
// 결국 c도 함수로 사용할 수 있다.
var c = b(a)
console.log(c())  // result : 200
console.log(c(3)) // result : 300

그렇기 때문에, closure 라는 개념을 사용할 수 있게 된 것입니다.

var fn = function (){
  var num = 1
  return function () {
    return num++
  }
}
var fn2 = fn() // fn을 실행함과 동시에, fn 속에 있는 num이 만들어진다.
// fn2를 실행할 경우, fn의 num값을 다루게 되며, fn의 num은 소멸되지 않고 메모리에 계속 잔류하게 된다.
// 따라서 다음과 같은 결과를 확인할 수 있다.
console.log(fn2()) // 1
console.log(fn2()) // 2
console.log(fn2()) // 3
console.log(fn2()) // 4
console.log(fn2()) // 5

참고 : clousre에 대해 알아보기