< Javascript > 고차함수와 콜백함수

초초·2023년 1월 15일

💻📚 TIL

목록 보기

19/22

🎈 특별한 함수, 고차함수

함수는 특별한 대우를 받는 일급객체 = 함수는 Function 객체
함수를 인자로 받거나 또는 함수를 반환함으로써 작동하는 함수
변수에 할당(assignment) 할 수 있음

const square = function(x) {
  return x * x;
}

square(5); //25

const foo = square;
foo(6); //36

다른 함수의 매개변수/전달인자(argument)로 전달될 수 있음

function double(num) {
  return num * 2;
}

function doubleNum(func, num) {
  return func(num);
}

다른 함수의 결과로서 리턴 가능

function adder(added) {
  return function (num) {
    return num + added;
  };
}

콜백함수

동기 vs 비동기

동기적 처리
코드의 실행이 위에서 아래로 순차적으로 실행됨
동기적 처리는 코드의 요청과 함께 실행된 결과가 나타나기 때문에 앞선 코드의 결과가 나타날 때 까지 다음 코드들은 대기해야 함

console.log("1");
console.log("2");
console.log("3");
// 1, 2, 3

비동기적 처리
코드가 순차적으로 실행되다가, 앞선 코드가 실행이 시작되었다면 결과가 나오지 않아도 해당 코드가 로딩되는 동안 다음 순서의 코드가 실행되는 것 결과는 굳이 요청 순서대로 나타나지 않음

console.log("1");
setTimeout(function b(){
	console.log("2");
}, 1000);	//1초 뒤에 2를 출력
console.log("3");
// 1, 3, 2

이런 비동기적 처리를 위해 이용하는 함수를 콜백함수라고 하며 함수의 동작 시점을 컨트롤 할 수 있는 것이다.

다른 함수의 인자/매개변수로 전달되는 함수
매개변수로 함수가 일단 넘겨지고, 때가 되면 나중에 호출(called back)되기 때문에 콜백함수라고 불림

커리 함수

함수를 리턴하는 함수를 고안해 낸 논리학자 하스켈 커리(Haskell Curry)의 이름을 따 불리는 방식
고차 함수란 용어를 함수를 인자로 받는 함수에만 한정해 사용
고차 함수가 커리 함수를 포함

🎈 내장 고차 함수

자바스크립트가 기본적으로 제공해주는 기능이 달린 함수를 내장 함수라고 함
기본적으로 내장된 고차 함수
- forEach, find, filter, map, reduce, sort, some, every

대표적으로 배열의 고차함수 filter, map, reduce 에 다루어 보겠다

Array.prototype.filter

모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드
(기존 배열 변경 X)
걸러내는 조건은 filter 메서드의 전달인자로 전달되며, 이것이 전달인자가 콜백함수

// 출판 연도가 2003년인 책을 담은 배열을 만들기
//조건(콜백함수): 출판 연도가 2003인지 확인

// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 단행본 한 권의 출판 연도가 2003인지 확인하는 함수
const isCreatedAt2003 = function (cartoon) {
  const fullYear = new Date(cartoon.createdAt).getFullYear()
  return fullYear === 2003;
}; 

// 출판 연도가 2003년인 책의 모음
const filteredCartoons = cartoons.filter(isCreatedAt2003);

Array.prototype.map

하나의 데이터를 다른 데이터로 mapping할 때 사용되는 메서드
모든 요소에게 동일한 행동을 준 값에 대하여 모두 반환 (기존 배열 변경 X)
동일한 값을 주는 조건은 전달인자로 전달되며 이것이 콜백함수이다

 
// 각 책의 부제(subtitle)만 담은 배열을 만들기
//조건(콜백함수): 책 한 권의 부제를 찾기

// 기존 배열
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 만화책 한 권의 부제를 리턴하는 함수
const findSubtitle = function (cartoon) {
  return cartoon.subtitle;					//참이면 리턴 = 배열에 값 추가
}; 

// 각 책의 부제 배열
const subtitles = cartoons.map(findSubtitle); // ['어머니의 쌀', ...]

Array.prototype.reduce

여러 데이터를 하나의 데이터로 응축(reduce)할때 사용
reduce는 초기값을 설정할 수 있고, 초기값이 없을 시 배열의 첫 번째 값이 초기값이 됨
배열이 끝날때까지 횟수를 반복하며, 한번 실행되면 초기값은 누적값이 되고 그 다음 요소들이 순차적으로 현재값이 됨
현재값은 콜백함수 조건에 맞춰 변형되고 누적값에 더해진다

// 단행본 모음
// 모든 책의 평점을 누적한 평균 구하기
//조건(콜백함수): sum에 각 책의 평점을 더함

const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
];

// 단행본 한 권의 평점을 누적값에 더한다.
const scoreReducer = function (sum, cartoon) {
  return sum + cartoon.averageScore;
}; 

// 초기값에 0을 주고, 숫자의 형태로 평점을 누적한다.
let initialValue = 0 
// 모든 책의 평점을 누적한 평균을 구한다.
//콜백함수로 구해진 평점의 총합을 배열의 길이로 나누어 평균을 구함
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length;

🎈 왜 고차 함수를 사용하나요 ?

자바스크립트를 비롯한 많은 프로그래밍 언어는 추상화의 결과이다 우리가 자바스크립트 코드를 입력했을 때, 어떤 과정을 거쳐 결과가 출력되는지 몰라도 웹에서 결과는 확인할 수 있다 그런 복잡한 것들은 자바스크립트 해석기가 대신해 주기 때문이다
우리는 자바스크립의 문법을 올바르게 사용하는 것만으로, 다양한 프로그램을 보다 쉽게 작성할 수 있다 이처럼 문제의 해결이 더 쉬워지는 것이 추상화의 이점이다