[JavaScript] 고차 함수, 내장 고차 함수

일급 객체

---

• 변수에 할당할 수 있습니다.
• 다른 함수의 전달인자로 전달될 수 있습니다.
• 다른 함수의 결과로서 리턴될 수 있습니다.

대표적인 일급 객체에는 함수가 있고, 함수를 변수에 할당할 수 있기 때문에 함수를 배열 요소나 객체의 속성값으로 저장할 수 있습니다. 즉 함수를 데이터처럼 다룰 수 있습니다.

고차 함수

---

• 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수
• 고차 함수의 전달인자로 전달되는 함수를 콜백 함수 (callback function) 라고 함
• 커링 함수 : 함수를 리턴하는 함수

내장 고차 함수

---

• js에는 기본적으로 내장된 고차 함수가 있음
• 배열 메서드 중 일부가 대표적인 내장 고차 함수 -> filter, map, reduce, forEach, find, sort, some, every

filter

• 모든 배열 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드
• 조건은 함수의 형태로 filter 메서드의 전달인자로 전달됨 => 함수를 전달인자로 받으므로 고차 함수
• filter 메서드는 배열 요소를 콜백 함수에 전달하고, 콜백 함수 내부의 조건에 따라 참 또는 거짓을 리턴

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result1 = words.filter(word => word.length > 6);
const result2 = words.filter(function(word){ return word.length>6;});
console.log(result1); // [ 'exuberant', 'destruction', 'present' ]
console.log(result2); // [ 'exuberant', 'destruction', 'present' ]

map

• 배열의 각 요소가 특정 처리(함수)에 의해 다른 요소로 지정(map)된 새로운 배열을 리턴

console.log();
var arr = [1,2,3,4,5];
var arr2 = arr.map(function(a){ return a%2==0?'짝수':'홀수'});
console.log(arr2); // [ '홀수', '짝수', '홀수', '짝수', '홀수' ]

reduce

• 배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축
• 기본 사용법은 array.reduce(function(이전값, array[i], index) { return 리턴값;}, 이전값의 초기값);
• map, include, find 등 모든 기능을 구현할 수 있음

var arr = [1,2,3,4,5];
var arr2 = arr.reduce(function(acc, cur){ return acc*cur;}, 1);
console.log(arr2); // 120

result = arr.reduce((acc, cur) => {
    acc.push(cur % 2 ? '홀수' : '짝수');
    return acc;
  }, []);
  console.log(result); 
// [ '홀수', '짝수', '홀수', '짝수', '홀수' ]

// 홀수만 넣기
result = arr.reduce((acc, cur) => {
    if (cur % 2) acc.push(cur);
    return acc;
  }, []);
  console.log(result); // [1, 3, 5]

forEach

• 주어진 콜백 함수를 배열 요소 각각에 대해 실행
• undefined를 반환

const arr = ['a', 'b', 'c'];

arr.forEach(el => console.log(el));
// a
// b
// c

find

• 조건을 만족하는 첫번째 원소를 반환하는 메서드
• 조건을 만족하는 원소가 없을 경우 undefined를 반환

const arr1 = [5, 12, 8, 302, 20];
const found = arr1.find(el => el >= 300);
console.log(found); // 302

sort

• 기본적으로 오름차순으로 정렬

const arr = new Array(5, 7, 6, 1, 4, 2, 3);
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]

some / every

• some은 배열 내의 원소 중 조건을 만족하는 원소가 1개라도 있는지를 리턴하는 메서드
• every는 배열 내의 모든 원소가 조건을 만족하는지를 return하는 메서드

let data=[
    {name:'jack', age:20},
    {name:'kevin', age:16},
    {name:'rick', age:27},
    {name:'marry', age:21},
    {name:'rilly', age:19}
]

let result = data.every(x=>{
    return x.age>=20;
});
console.log(result); // false

result = data.some(x=>{
    return x.age>=20;
});
console.log(result); // true

추상화

---

• 복잡한 것을 압축해서 핵심만 추출한 상태로 만드는 것
• 반복해서 사용하는 로직을 별도의 함수로 작성하는 것도 추상화의 예시
• 생산성을 향상시키기 위한 목적으로 사용
• 고차 함수에서 함수를 전달받아 처리하거나 함수를 리턴하는 것도 추상화

 

 

 

 

참고 :

 

https://develaniper-devpage.tistory.com/69