JS 배열 고차 함수

JavaScript

고차함수
함수를 인자로 받거나 함수를 반환하는 함수 → 필요한 시점에 호출하거나 클로저를 생성하여 반환

Array.prototype.sort

  • 배열의 요소를 적절하게 정렬한다.
  • 원본 배열을 직접 변경하는 부수적 효과를 가지고 있다.
  • 기본은 오름차순으로 정렬. (한글 포함)
  • 내림차순으로 정렬하고 싶은 경우 sort 메소드로 오름차순 정렬 후 reverse 메소드를 사용하여 요소의 순서를 뒤집는 방법을 사용한다.
  • 숫자 요소들로 이루어진 배열을 정렬할 때는 주의 필요.
1
2
3
const animal = ['kitten', 'puppy', 'bunny'];
animal.sort();
console.log(animal); // ['bunny', 'kitten', 'puppy']

숫자 배열을 함수 없이 sort 메소드를 적용하였을 경우

1
2
3
const num = [60, 100, 1, 8, 2, 40, 22, 10];
num.sort();
console.log(num); // [1, 10, 100, 2, 22, 40, 60, 8]

sort 메소드에 정렬 순서를 정의하는 비교함수 전달하여 적용한 경우

1
2
3
4
5
6
7
8
9
const points = [60, 100, 1, 8, 2, 40, 22, 10];

// 숫자 배열 오름차순 정렬
points.sort(function (a, b) { return a - b; });
console.log(points); // [1, 2, 8, 10, 22, 40, 60, 100]

// 숫자 배열 내림차순 정렬
points.sort(function (a, b) { return b - a; });
console.log(points); // [100, 60, 40, 22, 10, 8, 2, 1]

Array.prototype.forEach

  • 배열을 순회하며 각 요소에 대해 인수로 전달된 콜백 함수를 실행.
  • 배열을 순회하며 요소 값을 참조하여 무언가를 하기 위한 함수.
  • 요소값, 인데스, forEach 메소드를 호출한 배열(this)을 전달받을 수 있음.
  • 두번째 인자로 forEach 메소드 내부에서 this로 사용될 객체를 전달
  • for문을 대체할 수 있는 메소드.
  • 원본 배열을 변경하지는 않으나 콜백함수가 원본 배열을 변경할 수는 있다.
  • 반환값은 언제나 undefined
  • break, continue문을 사용할 수 없다. 무조건 배열의 요소를 빠짐없이 순회.
  • 메소드 내부에 반복문을 은닉하여 로직의 흐름을 이해하기 쉽게 한다.
  • 희소배열의 존재하지 않는 요소는 순회 대상에서 제외. (배열을 순회하는 map, filter, reduce 메소드 등에서도 동일)
  • 콜백 함수와 해당 메소드의 this 일치를 위해 두번째 인자로 forEach 메소드 내부에서 this로 사용될 객체를 전달한다.
1
2
3
4
5
6
const num = [1, 2, 3, 4, 5];
square = [];

num.forEach(item => square.push(item ** 2));

console.log(square); // [1, 4, 9, 16, 25]

Array.prototype.map

  • 배열을 순회하며 배열의 각 요소에 대하여 인수로 전달된 콜백 함수를 실행.
  • 배열을 순회하며 요소 값을 다른 값으로 맵핑하기 위한 함수
  • 요소값, 인덱스, map 메소드를 호출한 배열(this)를 전달 받을 수 있다.
  • 반환하는 배열의 length는 반드시 메소드를 호출한 배열과 일치한다.
  • 콜백 함수의 반환한 값들이 요소로서 추가된 새로운 배열을 반환한다.
  • 원본 배열은 변경되지 않는다.
  • 두번째 인자로 map 메소드 내부에서 this로 사용될 객체를 전달할 수 있다.
1
2
3
4
5
6
7
const numbers = [1, 4, 9];

const roots = numbers.map(item => Math.sqrt(item));
// const roots = numbers.map(Math.sqrt);

console.log(roots);   // [ 1, 2, 3 ]
console.log(numbers); // [ 1, 4, 9 ]

Array.prototype.filter

  • 배열의 각 요소에 대하여 인수로 전달된 콜백 함수를 실행.
  • 콜백 함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환.
  • 원본 배열은 변경되지 않는다.
  • 반환하는 새로운 배열의 length는 filter 메소드를 호출한 배열(this)의 length와 같거나 작다.
1
2
3
const numbers = [1, 2, 3, 4, 5];
const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

Array.prototype.reduce

  • 배열을 순회하며 콜백 함수의 이전 반환값과 배열의 각 요소에 대하여 인수로 전달된 콜백 함수를 실행하여 하나의 결과값을 반환.
  • 첫번째 인수로 콜백 함수, 두번째 인수로 초기값을 전달받는다.
  • 콜백 함수에는 4개의 인수, 초기값 또는 콜백 함수의 이전 반환값, 요소값, 인덱스, reduce 메소드를 호출한 배열(this)가 전달된다.
  • 원본 배열은 변경되지 않는다.
  • reduce 메소드를 호출할 때는 초기값을 생략하지 말고 항상 전달하는 것이 안전하다.
1
2
const sum = [1, 2, 3, 4].reduce((pre, cur, index, self) => pre + cur, 0);
console.log(sum); // 10

Array.prototype.some

  • 요소 중 하나라도 콜백 함수의 테스트를 통과하면 true, 모든 요소가 콜백 함수의 테스트를 통과하지 못하면 false를 반환.
  • some 메소드의 콜백 함수는 요소값, 인덱스, 메소드를 호출한 배열(this)을 전달 받을 수 있다.
  • 두번째 인자로 some 메소드 내부에서 this로 사용될 객체를 전달할 수 있다.
1
2
3
4
5
let result = [1, 2, 3, 4, 5].some(item => item > 3);
console.log(result); // true

result = [1, 2, 3, 4, 5].some(item => item < 0);
console.log(result); // false

Array.prototype.every

  • 모든 요소가 콜백 함수의 테스트를 통과하면 true, 요소 중 하나라도 콜백 함수의 테스트를 통과하지 못하면 false를 반환.
  • every 메소드의 콜백 함수는 요소값, 인덱스, 메소드를 호출한 배열(this)을 전달 받을 수 있다.
    1
    2
    3
    4
    5
    let result = [1, 2, 3, 4, 5].every(item => item > 0);
    console.log(result); // true

    result = [1, 2, 3, 4, 5].every(item => item > 3);
    console.log(result); // false

Array.prototype.find

  • 각 요소에 대하여 인수로 전달된 콜백 함수를 실행하여 그 결과가 참인 첫번째 요소를 반환.
  • 콜백 함수의 실행 결과가 참인 요소가 존재하지 않는다면 undefined를 반환.
  • find 메소드의 콜백 함수는 요소값, 인덱스, 메소드를 호출한 배열(this)을 전달 받을 수 있다.
  • 그 결과가 참인 첫번째 요소 를 반환. 그렇기 때문에 결과값은 해당 요소값.
  • 두번째 인자로 find 메소드 내부에서 this로 사용될 객체를 전달할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
const users = [
  { id: 1, name: 'bunny' },
  { id: 2, name: 'kitten' },
  { id: 2, name: 'puppy' },
  { id: 3, name: 'lion' }
];

// id가 2인 요소를 반환한다.
const result = users.find(item => item.id === 2);

// Array#find는 배열이 아니라 요소를 반환한다.
console.log(result); // {id: 2, name: 'Kim'}

Array.prototype.findIndex

  • 각 요소에 대하여 인수로 전달된 콜백 함수를 실행하여 그 결과가 참인 첫번째 요소의 인덱스를 반환.
  • findIndex 메소드의 콜백 함수는 요소값, 인덱스, 메소드를 호출한 배열을 전달 받을 수 있다.
  • 두번째 인자로 findIndex 메소드 내부에서 this로 사용될 객체를 전달할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const users = [
  { id: 1, name: 'bunny' },
  { id: 2, name: 'kitten' },
  { id: 2, name: 'puppy' },
  { id: 3, name: 'lion' }
];

function predicate(key, value) {
  // key와 value를 기억하는  클로저 반환
  return item => item[key] === value;
}

let index = users.findIndex(predicate('id', 2));
console.log(index); // 1

REFERENCE
https://poiemaweb.com

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer