객체로서의 함수와 기명 함수 표현식

JY KIM·2020년 7월 11일
0

vanilla javascript

목록 보기
7/8

자바스크립트에서, 함수는 '값' 으로 취급되며, 함수는 '객체' 이다.

함수는 '객체' 이므로, 객체의 특성을 모두 이용할 수 있다.

기본적으로 가지고 있는 프로퍼티들은 다음과 같다.

  • 'name'프로퍼티
  • 'length'프로퍼티
  • 커스텀 프로퍼티

다음으로 알아볼 것은, '기명 함수 표현식'이라는 것이다.

보통 쓰이는 함수 선언은 두가지가 있다.

  1. 함수 선언문
function func(){}
  1. 함수 표현식
const func = function(){}

여기서, 함수 표현식에서는 다음과 같은 문법을 사용할 수 있다.

const car = function func(){...}

변수에 함수를 선언하고 저장하였는데, 이때는 보통 '익명 함수'를 집어넣는다.

하지만 위 예제와 같이 '익명 함수'가 아닌 '기명 함수(이름이 있는 함수)'를 넣을 수 있다.

이는 함수 내부에서 재귀 호출이 가능하게 해주고, 외부에서 함수에 접근할 시에 문제가 없도록 해준다. 아래의 예제를 보자.

let sayHi = function(who){
  if(who){
    alert(`Hello ${who}`);
  }else{
    sayHi('Guest');
  }
}

위와 같은 sayHi 함수가 있다고 하자.

이 때, 이 함수를 어떤 변수에 저장하고 사용한다면 다음과 같다.

const welcome = sayHi;

welcome('Ti'); // 결과는 Hello Ti

그러나, 여기서 sayHi를 null로 변경한다면 어떻게 될까?

sayHi = null;

welcome('come on'); // error!

왜냐하면 sayHi함수에서 sayHi 자신을 호출하고 있는데, sayHi를 null로 바꿔버렸으니 당연히 sayHi가 함수가 아니라는 에러가 뜨는 것이다.

(본래 sayHi 함수에서 sayHi 함수 본인을 호출할 시에는 지역에 sayHi가 없으므로, 외부환경의 범위에서 sayHi를 찾고 호출한다)

이런 문제가 있기 때문에, 기명 함수 표현식을 사용하여 이런 문제를 해결한다.

const sayBye = function func(who){
  if(who){
    alert(`Hello ${who}`);
  }else{
    func('Guest');
  }
}

이렇게 기명 함수 표현식을 사용하면 외부 변수 변경과 같은것들을 고려하지 않아도 되기 때문에, 충분히 기억해 둬야 할 문법이라고 할 수 있다.

! 참고로 이 기명 함수 표현식은 말 그대로 함수 표현식 에서만 사용할 수 있다. 함수 선언문에서는 사용 불가능.

profile
알파카머리닮음

0개의 댓글