(9) Modern JavaScript - 값으로서 함수

자바스크립트는 함수를 특별한 종류의 값으로 취급한다.

예를 들자면 아래와 같이 함수 표현식이 가능했던 것처럼 말이다.

const printJS = function () {
  console.log('JavaScript');
};

 

위 코드를 typeof 연산자로 함수의 타입을 출력 해보면 function이 출력되겠지만

함수의 구체적인 데이터 타입은 객체이다. 

---

console.dir 메소드를 사용해서 다양한 타입의 값들을 콘솔에 출력해보면

아래와 같은 결과 값이 나온다.

console.dir(0); // 0
console.dir("SeopE"); // SeopE
console.dir(true); // true
console.dir(null); // null
console.dir(undefined); // undefined
console.dir({}); // Object
console.dir([]); // Array
console.dir(printJS); // f printJS{}

마지막 줄에서 출력된 결과를 보면

함수는 다른 기본형 타입과는 다르게 객체와 비슷한 모습인 것을 확인할 수 있으며

펼쳐보면 여러 개의 프로퍼티를 가지는 확실한 객체 형태를 하고 있다.

 

자바스크립트에서 함수는 객체 타입의 값으로 평가된다는 사실을 알게됨으로써

이런 특징을 어떤 식으로 활용할 수 있을지 알아보자.

---

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

그래서 아래와 같이 함수 표현식으로 함수를 선언, 호출하고 객체 안의 메소드로 사용될 수 있다.

const printJS = function () {
  console.log("JavaScript");
};

printJS()

 

그리고 아래와 같이 객체 안에 프로퍼티로 함수를 선언하고

프로퍼티에 접근해서 함수를 호출할 수 있다.

const myObject = {
  year: "2024",
  myFace: false,
  sayHi: function (name) {
    console.log(`Hi ${name}`);
  },
};

myObject.sayHi("SeopE");

 

필요에 따라서 아래와 같이 배열의 요소로 함수를 선언하고

배열의 요소에 접근하여 함수를 호출하는 것도 가능하다.

const myArrey = [
  2024,
  true,
  function (name) {
    console.log(`Hi! ${name}`);
  },
];

myArrey[2]("JavaScript");

 

---

이렇게 함수를 선언하고 호출하는 방식이 다양한데

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

 

아래와 같이 DOM 이벤트를 다룰 때 파라미터를 전달하는 부분에서

함수를 선언하는 것 뿐만 아니라 

const myBtn = document.querySelector("#myBtn");

myBtn.addEventListener("click", function () {
  console.log("mouse click");
});

 

아래와 같이 함수를 호출 할 때

미리 선언된 함수를 전달하면서 조건에 따라 그 함수가 나중에 호출되거나 

혹은 호출되지 않는 동작을 구현할 수 있다.

function makeQuiz(quiz, answer, success, fail) {
  if (prompt(quiz) === answer) {
    console.log(success());
  } else {
    console.log(fail());
  }
}

function getSuccess(params) {
  return "정답";
}

function getFail(params) {
  return "오답";
}

const question = "5+3=?";
makeQuiz(question, "8", getSuccess, getFail);

입력창에 정답을 입력하면 콘솔에 '정답'이 출력되고

틀린답을 입력하면 콘솔에 '오답'이 출력된다.

 

이렇게 다른 함수의 파라미터에 전달된 함수를 콜백 함수(Callback Func) 라고한다.

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

 

그리고 함수가 하나의 값으로 취급되는 특성은

어떤 함수의 리턴값이 함수가 될 수 있다는 뜻이기도 하다.

function getPrintHi() {
  return function () {
    console.log("Hi");
  };
}

const sayHi = getPrintHi();
sayHi();

코드를 보면 getPrintHi 함수가 또 함수를 리턴하고 있는데

getPrintHi를 호출 했을 때 리턴 값이 되는 함수가 sayHi라는 변수에 할당 될 것이다.

그래서 sayHi를 호출하면 콘솔에는 정상적으로 'Hi' 문자열이 출력될 것이다.

위처럼 getPrintHi와 같이 함수를 리턴하는 함수를

고차 함수(Higher Order Func)라고 부르며 

고차 함수는 위와 같이 변수에 호출된 값을 할당해서 활용하기도 하지만

아래와 같이 이중 괄호를 사용해서 고차 함수로 리턴되는 함수를 바로 호출할 수도 있다.

function getPrintHi() {
  return function () {
    console.log("Hi");
  };
}

// const sayHi = getPrintHi();
// sayHi();

getPrintHi()();

 

---

간단하게 요약하면 자바스크립트에서 함수는 변수나 다른 데이터 구조 안에 할당될 수 있고

다른 함수의 파라미터로 전달될 수도 있고

다른 함수의 리턴값이 될 수도 있다.

 

참고로 프로그래밍에서 이런 특징을 가진 함수를 일급함수(First Class Func) 라고 부르며

그래서 자바스크립트는 '일급 함수를 가진 프로그래밍 언어' 라고 할 수 있다.

 

정리하면 자바스크립트에서 함수는 객체이며

함수의 타입은 function이 리턴되고

함수는 변수에 할당할 수있ㅇ며 다른 함수에 파라미터로 전달 할 수도 있고

함수는 다른 함수의 리턴 값이 될 수 있다. 등등..

아무튼 이 모든 조건을 만족하는 함수를 일급 함수라고 한다.