[JavaScript] 자바스크립트 함수 표현식(function expressions) 이해하기

[JavaScript] 자바스크립트 콜백 함수(callback) 가볍게 이해하기에서 함수는 일급객체라는 말을 했었다.

그리고 일급객체의 특징을 몇 가지 정리했었는데

결론적으로는 자바스크립트의 함수는 특별한 종류의 값으로 취급될 수 있다는 것이었다.

 

함수 표현식(function expressions)이란?

다음 코드를 살펴보자.

let sayHello = function() {
  console.log("Hello!");
};

이렇게 어떠한 표현식에 함수를 선언하는 방식을

함수 표현식(function expressions)이라고 한다.

 

값으로써의 함수

위의 코드를 보면 hello를 콘솔에 출력하는 함수를 sayHello라는 변수에 할당했다.

함수가 sayHello라는 변수에 값으로 할당된 것이다.

 

이렇게 변수에 할당된 함수는 일반적으로 선언된 함수와 같은 방식으로

변수 이름에 소괄호를 열고 닫음으로 호출할 수 있다.

let sayHello = function() {
  console.log("Hello!");
};

sayHello();

또, 이렇게 선언된 함수는 당연히 다른 변수에 할당하는 것도 가능하다.

let sayHello = function() {
  console.log("Hello!");
};

let otherHello = sayHello;

sayHello();
otherHello();

이 코드를 실행하면, 이렇게 두 번째 줄의 Hello가 똑같이 두 번 출력된다.

참고로 그냥 일반적인 함수 선언문으로 선언된 함수도 얼마든지 변수에 할당될 수 있다.

function sayHello() {
  console.log("Hello!");
};

let otherHello = sayHello;

sayHello();
otherHello();

이 코드는 위 코드와 똑같은 결과를 출력한다.

 

그런데 자세히 보면, 함수 표현식에 사용하는 함수는 이름이 없다.

이렇게 이름이 없는 함수를 익명함수(anonymous function)라고 부르는데,

함수 표현식에서는 이렇게 익명함수를 사용한다.

 

콜백 함수에 활용

함수 표현식은 콜백 함수에도 활용될 수 있다.

콜백 함수 포스트에서 활용했던 예제를 가져와보자.

function checkGang(count, link, good) {
  count < 3 ? link() : good();
}

function linkGang() {
  console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요');
  console.log('https://youtu.be/xqFvYsy4wE4');
}

function goodGang() {
  console.log('오늘 할당량은 모두 채우셨습니다! :)')
}

checkGang(2, linkGang, goodGang);

위 코드를 함수 표현식으로 변경하면 다음과 같이 작성될 수 있다.

function checkGang(count, link, good) {
  count < 3 ? link() : good();
}

checkGang(
  2, 
  function() {
    console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요');
    console.log('https://youtu.be/xqFvYsy4wE4');
  },
  function() {
    console.log('오늘 할당량은 모두 채우셨습니다! :)')
  }
);

이 코드는 뭔가 조금 애매하긴 하지만, 

간단한 경우에는 함수 표현식을 통해서 코드를 작성하면 코드가 간결해질 수 있다.

 

그러나, 아무래도 복잡한 코드의 경우에는
오히려 이런식의 코드가 상대적으로 더 가독성을 해칠 수 있고,

무엇보다 이렇게 정의된 익명함수는 외부에서의 호출이 불가하기 때문에

코드의 재사용성 면에서는 취약한 부분이 있다.