[함수 다루기] 05. 값으로서 함수

자바스크립트는 함수를 특별한 종류의 값으로 취급하기 때문에 함수 표현식이 가능합니다.

// 값으로서 함수
const printJS = function () {
  console.log('JavaScript');
};

console.log(typeof printJS);

typeof 연산자로 함수의 타입을 출력하면 function이 출력되긴 하지만 함수의 구체적인 데이터 타입은 객체입니다.

// 값으로서 함수
const printJS = function () {
  console.log('JavaScript');
};

console.dir(0); // O
console.dir('쑥쑥'); // 쑥쑥
console.dir(true); // true
console.dir(null); // null
console.dir(undefined); // undefined
console.dir({}); // Object
console.dir([]); // Array(0)
console.dir(printJS); // printJS()

console.log 메소드가 아니라 console.dir 메소드를 사용해서 다양한 값들을 콘솔에 출력해보면 마지막 줄에서 함수는 다른 기본형 타입과는 다르게 객체와 비슷한 모습인 것을 확인할 수가 있는데요.

실제로 함수 부분을 펼쳐보면 여러 개의 프로퍼티를 가지는 객체 형태를 하고 있다는 걸 조금 더 확실하게 알 수가 있습니다.

 

자바스크립트에서 함수가 객체 타입의 값으로 평가된다는 사실을 알았으니까 이런 특징을 어떤 식으로 활용할 수 있는지 조금 더 알아 보겠습니다.

일단 먼저 자바스크립트의 함수는 어디에서나 할당될 수 있고 다양한 형태로 호출될 수가 있습니다.

// 값으로서 함수
const printJS = function () {
  console.log('JavaScript');
};

console.log(typeof printJS);

그래서 함수 표현식으로 함수를 선언하고 그리고 호출할 수도 있고

// 값으로서 함수
const myObject = {
  brand: '쑥쑥',
  bornYear: 2017,
  isVeryNice: true,
  sayHi: function(name) {
    console.log(`Hi ${name}`);
  }
};

myObject.sayHi('JavaScript');

또 객체 안의 메소드로 사용될 수도 있는데요. 이렇게 객체 안에 프로퍼티로 함수를 선언하고 프로퍼티에 접근해서 함수를 호출할 수도 있습니다.

// 값으로서 함수
const myArray = [
  '쑥쑥',
  2017,
  true,
  function(name) {
    console.log(`Hi ${name}`);
  },
];

myArray[3]('쑥쑥');

흔하진 않지만 필요에 따라서는 이렇게 배열에 담아서 함수를 호출하는 것도 충분히 가능한데요.

배열의 요소로 함수를 선언하고 배열의 요소에 접근해서 함수를 호출하는 것입니다.

// 값으로서 함수
const myBtn = document.querySelector('#myBtn');

myBtn.addEventListener('click', function () {
  console.log('button id clicked');
});

이뿐만 아니라 값으로 평가되는 이 함수는 다른 함수의 파라미터로도 전달할 수가 있습니다. 

이렇게 DOM 이벤트를 다룰 때 파라미터를 전달하는 부분에서 함수를 선언하는 것뿐만 아니라

// 값으로서 함수
function makeQuiz(quiz, answer, success, fail) {
 if(prompt(quiz) === answer) {
   console.log(success());
 } else {
   console.log(fail());
 }
};

function getSuccess() {
  return '정답!';
};

function getFail() {
  return '오답!';
};

const question = '5 + 3 = ?';

makeQuiz(question, '8', getSuccess, getFail);

이런 식으로 함수를 호출 할 때 미리 선언된 함수를 전달함녀서 조건에 따라 그 함수가 나중에 호출되거나 혹은 호출되지 않는 동작을 구현할 수도 있습니다. 이 코드를 실행했을 때 입력 창에 8을 입력하면 콘솔에 '정답!'이 그리고 새로고침 해서 다른 값을 입력하면 '오답!'이 콘솔에 출력됩니다.

 

참고로 이렇게 다른 함수의 파라미터에 전달된 함수를 콜백 함수(Callback Function)이라고 부릅니다.

여기서는 getSuccess와 getFail이 콜백 함수라고 할 수 있습니다.

 

그리고 함수가 하나의 값으로 취급되는 특성은 어떤 함수의 리턴값이 함수가 될 수 있다는 뜻이기도 합니다.

// 값으로서 함수
function getPrintHi() {
  return function () {
    console.log('Hi?');
  };
};

const sayHi = getPrintHi();

sayHi();

그래서 이 코드를 보면 getPrintHi라는 함수가 또 다시 함수를 리턴하는 모습을 하고 있습니다.

그러면 getPrintHi를 호출했을 때 리턴값이 되는 이 함수가 sayHi라는 변수에 할당됩니다.

그래서 sayHi()를 호출하면 콘솔에는 'Hi?'가 출력 되는 모습을 확인할 수 있습니다.

이렇게 getPrintHi와 같이 함수를 리턴하는 함수를 고차 함수(Higher Order Function)라고 부릅니다.

// 값으로서 함수
function getPrintHi() {
  return function () {
    console.log('Hi?');
  };
};

getPrintHi()();

고차 함수는 지금 본 것처럼 변수에 호출된 값을 할당해서 활용하기도 하지만 특별한 경우에는 이렇게 이중 괄호를 사용해서 고차함수로 리턴되는 함수를 바로 호출할 수 있습니다.

 

정리하면 자바스크립트에서 함수는 변수나 다른 데이터 구조 안에 할당될 수 있고 다른 함수의 파라미터로 전달될 수도 있고 다른 함수의 리턴값이 될 수도 있습니다. 참고로 프로그래밍에서 이런 특징을 가진 함수를 일급 함수(First Class Function)라고 부릅니다. 그래서 자바스크립트는 일급 함수를 가진 프로그래밍 언어라고 할 수 있습니다.