1.2.3 다양한 함수 살펴보기

1.2.3 다양한 함수 살펴보기

즉시 실행 함수

• Immediately Invoked Function Expression, IIFE

• 함수를 정의하고 그 순간 즉시 실행되는 함수

• 단 한 번만 호출되고, 다시금 호출할 수 없는 함수

• (function (a, b) {
    return a + b
  })(10, 24); // 34
  
  ((a, b) => {
    return a + b
    },
  )(10, 24) // 34

• 한 번 선언하고 호출된 이후부터는 더 이상 재호출이 불가능. 그래서 일반적으로 즉시 실행 함수에 이름 붙이지 않음

• 장점)

  • 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용할 수 있음. 함수의 선언과 실행이 바로 그 자리에서 끝나기 때문에 즉시 실행 함수 내부에 있는 값은 그 함수 내부가 아니고서는 접근이 불가능하기 때문
  • 코드를 읽는 이로 하여금 이 함수는 어디서든 다시금 호출되지 않는다는 점 각인시킬 수 있어 리팩터링에도 매우 도움됨. 일단 선언돼 있으면 어디서 쓸지 모르는 일반 함수와 다르게, 즉시 실행 함수는 그 선언만으로도 실행이 거기서 끝난다는 것 각인시킬 수 있음.

• 따라서) 재사용되지 않는 함수고, 단 한 번만 실행되고 끝난다면 즉시 실행 함수의 사용을 검토해보자

고차 함수

• 자바스크립트의 함수가 일급 객체라는 특징 활용하면 함수를 인수로 받거나 결과로 새로운 함수를 반환시킬 수 있음. 이런 역할을 하는 함수를 고차 함수(Higher Order Function)라고 함

• // 함수를 매개변수로 받는 대표적인 고차 함수, Array.prototype.map
  const doubleArray = [1, 2, 3].map((item) => item * 2)
  
  doubleArray // [2, 4, 6]
  
  // 함수를 반환하는 고차 함수의 예
  const add = function (a) {
    // a가 존재하는 클로저를 생성
    return function (b) {
      // b를 인수로 받아 두 합을 반환하는 또 다른 함수를 생성
      return a + b
    }
  }
  
  add(1)(3) // 4

• 이러한 특징을 활용해 추후에 다룰 함수형 컴포넌트를 인수로 받아 새로운 함수형 컴포넌트를 반환하는 고차함수를 만들 수 있음. 이런 컴포넌트를 고차 컴포넌트(Higher Order Component)라고 부르는데, 고차 함수형 컴포넌트를 만들면 컴포넌트 내부에서 공통으로 관리되는 로직을 분리해 관리할 수 있어 효율적으로 리팩터링할 수 있음