[JavaScript] 객체로서의 함수

오늘은 객체로서의 함수와, 기명 함수표현식에 대해서 알아보겠습니다.

함수도 객체다.

자바스크립트에서는 함수도 객체입니다. 따라서 함수에 프로퍼티를 설정할 수가 있죠. 말보단 코드죠. 먼저 아래의 코드를 확인해보세요.

function sayHi() { (1) 함수를 초기화합니다.
  console.log(sayHi.to); (4) to 프로퍼티를 찍습니다.
}

sayHi.to = 'seunghwan' (2) 함수 객체에 to 프로퍼티를 설정합니다.
sayHi(); (3) 함수를 호출함과 동시에 렉시컬 환경을 생성합니다.

이렇게 함수에 프로퍼티를 설정할 수 있습니다. 데이터를 캐싱할 때도 쓸 수 있고 여러가지 쓰임새가 있을 것 같네요. 조금 더 복잡한 코드를 확인해보죠.

function makeCounter() { (1) 함수 선언과 동시에 초기화
  function counter() {(3)
    return counter.count++ (7)
  }

  counter.count = 0; (4)

  return counter; (5)
}

const count (2) count를 uninitilized, intialized = makeCounter(); (3) 값을 할당
count(); (6) // 0
count(); (7) // 1

코드에 순서를 적어놨는데요. 이건 렉시컬 환경에서 코드가 실행되는 과정에 익숙해지기 위해서 제가 명시한겁니다. 혹시나 틀린게 있다면 알려주세요!

그런데 이렇게 프로퍼티를 설정하는 것과 클로저를 만들어서 값을 사용하것에 어떤 차이점이 있을까요?

클로저의 개념을 이해하고 있으시다면 매우 쉽게 차이점을 알 수 있습니다. 클로저를 사용하면 외부환경에서 count에 접근할 수 없기 때문에 변수 보호가 가능합니다. 클로저 함수에서만 이 프로퍼티를 사용할 수 있죠. 그러나 만약 함수의 프로퍼티를 설정하면 외부환경에서 이를 변경할 수 있기 때문에 예상치 못한 버그가 발생할 수 있습니다. 아래 코드를 확인하세요.

함수 객체

function makeCouter() {
  function counter() {
    return counter.count++
  }

  counter.count = 0;

  return counter;
}

const count = makeCouter();
count.count = 10; // 여기서 프로퍼티 값을 변경할 수 있습니다.
console.log(count());

클로저를 활용해서 만들어보시다.

클로저

function makeCounter() {
  let count = 0; // 변수 보호가 가능하죠. 오직 클로저 함수에서만 접근 가능합니다.
  return function() {
    return count++;
  }
}

const counter = makeCounter();
console.log(counter()); // 0 
console.log(counter()) // 1
console.log(counter()); // 2

정리

오늘은 객체로서의 함수를 알아봤습니다. 자바스크립트에서는 함수도 객체죠. (엄밀히 말하면 일급객체라고 합니다.) 알고 있던 내용이지만 이렇게 정리하니까 조금 더 함수를 이해하게 된 것 같습니다.