일급 함수(First-class Function)

프로그래밍 언어는 해당 언어의 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다.

• 예를 들어, 일급 함수를 가진 언어에서 함수는 다른 함수들에 전달인자로 제공되고, 다른 함수에 의해 반환될 수 있으며, 변수에 값으로서 할당될 수 있다.

1. 변수에 함수 할당

const say = () => {
  console.log("hello");
};
say(); // 변수를 사용해 호출
// hello

• 변수에 '익명함수'를 할당한 다음, 끝에 괄호 ()를 추가하면서 함수를 호출할 해당 변수를 사용.

2. 함수에 전달인자로 전달

function say() {
  return "hello, ";
}
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}
// `sayHello`를 전달인자로 `greeting` 함수에 전달
greeting(say, "JavaScript!");
// hello, JavaScript!

• say( ) 함수를 greeting( ) 함수에 전달인자로 전달하는데, 이것은 함수를 값으로서 어떻게 다루는지 설명.

3. 함수 반환

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

• 다른 함수로부터 함수를 반환.
• 자바스크립트에서 함수들은 값들로서 다루어질 수 있기 때문에 함수를 반환할 수 있다.
  • 함수를 반환하거나 다른 함수들을 전달인자로서 사용하는 함수를 '고차 함수'라고 한다.

---

고차함수(higher order function)

인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다.

• 고차 함수는 전달인자(argument)로 함수를 넘겨줄 수 있다.
  • 고차 함수의 전달인자로 넘겨주는 함수를 콜백 함수Callback function)라고 한다.

• 고차 함수는 다른 함수를 리턴할 수 있다.
  • 함수를 리턴하는 함수로 커링 함수라고 한다.

• 고차 함수는 콜백 함수와 커링 함수의 상위 개념.

1. 함수를 인자로 전달받고 함수를 반환하는 고차 함수

function makeCounter(predicate) {
  // 자유 변수. num의 상태는 유지되어야 한다.
  let num = 0;
  // 클로저. num의 상태를 유지한다.
  return function () {
    // predicate는 자유 변수 num의 상태를 변화시킨다.
    num = predicate(num);
    return num;
  };
}

// 보조 함수
function increase(n) {
  return ++n;
}

// 보조 함수
function decrease(n) {
  return --n;
}

// makeCounter는 함수를 인수로 전달받는다. 그리고 클로저를 반환한다.
const increaser = makeCounter(increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

// makeCounter는 함수를 인수로 전달받는다. 그리고 클로저를 반환한다.
const decreaser = makeCounter(decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

• 고차 함수는 외부 상태 변경이나 가변(mutable) 데이터를 피하고 불변성(Immutability)을 지향하는 함수형 프로그래밍에 기반을 두고 있다.

함수형 프로그래밍은 순수 함수(Pure function)와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.

• 조건문이나 반복문은 가독성을 해치고, 변수의 값은 변경될 수 있어 오류의 근본적 원인이 될 수 있기 때문.
• 함수형 프로그래밍은 결국 순수 함수를 통해 부수 효과(Side effect)를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이려는 노력의 한 방법이라고 할 수 있다.

---

콜백함수 (callback function)

다른 함수(caller)의 전달인자(argument)로 전달되는 함수.

• 어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 뜻

콜백 함수를 전달받은 고차 함수(caller)는, 함수 내부에서 이 콜백 함수를 호출(invoke)할 수 있다.

• 조건에 따라 콜백 함수의 실행 여부를 결정할 수도 있다.
  • 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있습니다.
  • 특정 작업의 완료 후에 호출하는 경우는 이후에 충분히 접할 수 있다.

// 콜백
function print(callback) {
  callback();
}

print() 함수는 다른 함수를 파라미터로 받아서 내부에서 그것을 호출.

콜백함수의 필요성

자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다.
그러나, 순차적으로 실행되지 않을 때가 있는데, 이를 비동기식 프로그래밍이라고 한다.

콜백은 태스크가 끝나기 전에 함수가 실행되지 않는 것을 보장한다.
콜백은 비동기 자바스크립트 코드를 작성할 수 있도록 해주고 여러 문제와 에러들로부터 안전하게 지켜준다.

콜백함수 만들기

3초 뒤에 출력되는 콜백함수를 만들어 보자.

const message = function() {
  console.log("3초 후 출력");
}

setTimeout(message, 3000);

• setTimeout 함수는 자바스크립트에 내장된 함수.
  • 주어진 시간(밀리세컨드 단위) 이후에 함수를 호출하거나 표현식을 평가 (1초 = 1000 밀리세컨드)

비동기식 함수란?

비동기 함수를 다른 함수에 호출하는 방법 말고 함수 내부에 직접적으로 정의하는 방법도 있다.

setTimeout(function() {
  console.log("3초 후 출력");
}, 3000);

여기서 콜백 함수는 이름이 없고 자바스크립트에서 이름이 없는 함수 정의를 "익명 함수"라고 한다.

화살표함수 모양의 콜백

콜백 함수를 ES6 화살표 함수로 사용할 수 있다.

setTimeout(() => {
  console.log("3초 후 출력");
}, 3000);

이벤트 처리

자바스크립트는 이벤트 기반 프로그래밍 언어이다.
콜백 함수를 이벤트 선언을 위해 사용하기도 한다.

// 버튼을 클릭하기 이벤트
<button id="callback-btn">Click here</button>

// 여기에 버튼을 클릭했을 때, 콘솔에 메세지가 남도록 해보자.

document.queryselector("#callback-btn")
  .addEventListener("click", function() {
    console.log("3초 후 출력");
});


// 화살표함수 표현
document.queryselector("#callback-btn")
  .addEventListener("click", () => {
    console.log("3초 후 출력");
});

1. 버튼의 id 값을 사용하여 버튼을 선택
2. addEventListener 메소드를 사용하여 이벤트 리스너를 추가
   2-1. 이벤트 리스너 함수는 두 개의 파라미터를 필요
   • 첫 번째 파라미터로는 이벤트의 타입인 “클릭”
   • 두 번째 파라미터는 버튼이 클릭되었을 때 메시지를 남기는 콜백 함수