자바스크립트 배열 고차함수

• 함수를 인자로 받을 수 있는 함수 : 다른 함수를 매개변수로 받아서 처리하는 함수.
• 함수를 반환할 수 있는 함수 : 다른 함수를 반환값으로 제공하는 함수.

forEach()

forEach() 메서드는 배열의 각 요소에 대해 제공된 함수를 순차적으로 한 번씩 실행합니다.

기본 문법

array.forEach(callback(element, index, array), thisArg);

// 반환값 없음 : forEach() 메서드는 undefined를 반환합니다. 이 메서드는 체이닝이 불가능합니다.
// 중단 불가능 : forEach() 메서드는 배열 순회를 중간에 멈출 수 없습니다. 

• callback : 배열의 각 요소에 대해 실행할 함수이며 세 가지 매개변수를 가질 수 있습니다.
  - element : 현재 처리중인 배열 요소
  - index(선택 사항) : 현재 요소의 인덱스
  - array(선택 사항) : forEach() 메서드를 호출한 배열
• thisArg(선택 사항) : callback 함수 내부에서 사용될 this값

예제

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
  console.log(number); // 1, 2, 3, 4, 5
});

const fruits = ["apple", "banana", "cherry", "orange", "grape"];

fruits.forEach((fruit, index, array) => {
  console.log(`인덱스: ${index}, 요소값: ${fruit}, 전체 배열: ${array}`);
});

/* 
인덱스: 0, 요소값: apple, 전체 배열: apple,banana,cherry,orange,grape
인덱스: 1, 요소값: banana, 전체 배열: apple,banana,cherry,orange,grape
인덱스: 2, 요소값: cherry, 전체 배열: apple,banana,cherry,orange,grape
인덱스: 3, 요소값: orange, 전체 배열: apple,banana,cherry,orange,grape
인덱스: 4, 요소값: grape, 전체 배열: apple,banana,cherry,orange,grape
*/

map()

map()메서드는 배열 내의 모든 요소 각각에 대해 제공된 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. map()는 원본 배열을 변경하지 않으며, 새로운 배열을 반환합니다.

기본 문법

array.map(callback(element, index, array), thisArg);

// 새로운 배열 반환 : map()메서드는 새로운 배열을 반환합니다. 원래 배열은 변경되지 않습니다.
// 모든 요소 처리 : map()메서드는 배열의 모든 요소에 대해 한번씩 callback함수를 호출합니다.

• callback : 배열의 각 요소에 대해 실행할 함수, 세 가지 매개변수를 가질 수 있습니다.
  - element : 현재 처리중인 배열 요소
  - index(선택 사항) : 현재 요소의 인덱스
  - array(선택 사항) : map() 메서드를 호출한 배열
• thisArg(선택 사항) : callback 함수 내부에서 사용될 this값

예제

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열은 변경되지 않음)

const fruits = ["사과", "바나나", "포도"];

const result = fruits.map((fruit, index, array) => {
  return `${index + 1}: ${fruit} (${array.length} fruits in total)`;
});

console.log(result);

/* 
[
  '1: 사과 (3 fruits in total)',
  '2: 바나나 (3 fruits in total)',
  '3: 포도 (3 fruits in total)'
]
*/

filter()

filter()메서드는 배열을 순회하면서 주어진 함수의 조건을 통과하는 모든 요소를 모아 새로운 배열을 반환합니다. filter()는 원본 배열을 변경하지 않습니다.

let newArray = array.filter(callback(element, index, array), thisArg)

// 조건을 만족하는 요소들로 구성된 새로운 배열. 조건을 만족하는 요소가 없으면 빈 배열을 반환합니다.

• callback : 배열의 각 요소에 대해 실행할 함수, 세 가지 매개변수를 가질 수 있습니다.
  - element : 현재 처리중인 배열 요소
  - index(선택 사항) : 현재 요소의 인덱스
  - array(선택 사항) : filter() 메서드를 호출한 배열
• thisArg(선택 사항) : callback 함수 내부에서 사용될 this값

예제

// 짝수 필터링
const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6]

// 특정 문자열을 포함하는 요소 필터링
const words = ["apple", "banana", "grape", "kiwi", "avocado"];

const wordsWithA = words.filter((word) => {
  return word.includes("a");
});

console.log(wordsWithA); // ['apple', 'banana', 'grape', 'avocado']

some()

some()메서드는 배열의 요소 중 하나라도 주어진 조건을 만족하는지 검사합니다. 조건을 만족하는 요소가 하나라도 있으면 true를 반환하고, 없으면 false를 반환합니다.

array.some(callback(element, index, array), thisArg)

• callback: 배열의 각 요소에 대해 실행할 함수, 세 가지 매개변수를 가질 수 있습니다.
  • element: 현재 처리중인 배열 요소
  • index (선택 사항): 현재 요소의 인덱스
  • array (선택 사항): some()을 호출한 배열.
• thisArg (선택 사항): callback 함수 내에서 this로 사용할 값.

예제

const numbers = [1, 2, 3, 4, 5];

const EvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(EvenNumber); // true

• some()은 배열의 요소 중 하나라도 조건을 만족하면 true를 반환합니다.

// 화살표 함수
const numbers = [1, 2, 3, 4, 5];

const hasEvenNumber = numbers.some(number => number % 2 === 0);

console.log(hasEvenNumber); // true

every()

every()메서드는 배열의 모든 요소가 주어진 조건을 만족하는지 검사합니다. 모든 요소가 조건을 만족하면 true를 반환하고 그렇지 않으면 false를 반환합니다.

array.every(callback(element, index, array), thisArg)

• callback: 배열의 각 요소에 대해 실행할 함수, 세 가지 매개변수를 가질 수 있습니다.
  • element: 현재 처리중인 배열 요소
  • index (선택 사항): 현재 요소의 인덱스
  • array (선택 사항): every()을 호출한 배열.
• thisArg (선택 사항): callback 함수 내에서 this로 사용할 값.

예제

const numbers = [1, 2, 3, 4, 5];

const allEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(allEvenNumbers); // false

every()는 배열의 모든 요소가 조건을 만족해야 true를 반환합니다.

const numbers = [2, 4, 6, 8];

const allEvenNumbers = numbers.every(number => number % 2 === 0);

console.log(allEvenNumbers); // true

reduce()

reduce()메서드는 배열의 각 요소에 대해 주어진 리듀서() 함수를 실행하고, 하나의 결과값을 반환합니다. 배열의 모든 요소를 하나의 값으로 줄이는데 사용됩니다.

array.reduce(callback(accumulator, currentValue, index, array), [initialValue]);

• callback: 배열의 각 요소에 대해 실행할 함수, 네 가지 매개변수를 가질 수 있습니다.
  • accumulator : 콜백의 반환값을 누적하는 데 사용되는 누산기
  • currentValue: 현재 처리중인 배열 요소
  • index (선택 사항): 현재 요소의 인덱스
  • array (선택 사항): every()을 호출한 배열.
• initialValue (선택 사항): 콜백 함수가 처음 호출될 때 첫 번째 인수로 사용되는값, 초기값이 제공되지 않으면 배열의 첫 번째 요소가 초기값이 됩니다.

예제

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(sum); // 15

누산자 함수는 첫 번째 인자(accumulator)로 누산값을, 두 번째 인자(currentValue)로 현재값을 받습니다.
1. 첫 번째 호출에서는 누산값이 없으므로, 배열의 첫 번째 요소(1)와 두 번째 요소(2)가 각각 누산값과 현재값으로 사용됩니다.
2. 두 번째 호출에서는 이전 호출의 결과값(3)이 누산값으로, 배열의 세 번째 요소(3)가 현재값으로 사용됩니다. 누산값과 현재값을 더하면 6이 됩니다.
3. 세 번째 호출에서는 이전 호출의 결과값(6)이 누산값으로, 배열의 네 번째 요소(4)가 현재값으로 사용됩니다. 누산값과 현재값을 더하면 10이 됩니다.
4. 배열의 모든 요소를 처리한 후에는 누산값이 최종 결과값으로 반환됩니다. 이 경우 10이 최종 결과값입니다

const movies = [
  {
    title: "Amadeus",
    score: 99,
    year: 1984,
  },
  {
    title: "Sharknado",
    score: 35,
    year: 2013,
  },
  {
    title: "13 Going On 30",
    score: 70,
    year: 2004,
  },
  {
    title: "Stand By Me",
    score: 85,
    year: 1986,
  },
  {
    title: "Waterworld",
    score: 62,
    year: 1995,
  },
  {
    title: "Jingle All The Way",
    score: 71,
    year: 1996,
  },
  {
    title: "Parasite",
    score: 95,
    year: 2019,
  },
  {
    title: "Notting Hill",
    score: 77,
    year: 1999,
  },
  {
    title: "Alien",
    score: 90,
    year: 1979,
  },
];

const highestRated = movies.reduce((bestMovie, currMovie) => {
  if (currMovie.score > bestMovie.score) {
    return currMovie;
  }
  return bestMovie;
});

• 누산자 함수는 (bestMovie, currMovie) => { ... }로 정의되어 있습니다. 이 함수는 두 개의 인자를 받습니다. 누산값(bestMovie)과 현재값(currMovie)
• reduce 메소드는 각 호출마다 누산자 함수를 실행하며, 누산자 함수는 현재 영화(currMovie)의 평점과 현재까지 가장 높은 평점(bestMovie.score)을 비교합니다.
• 현재 영화의 평점이 더 높다면, 현재 영화가 새로운 누산값(bestMovie)이 됩니다.
• 이 과정은 배열의 모든 요소를 순회할 때까지 반복됩니다. 배열의 모든 영화를 순회한 뒤에는 가장 높은 평점을 가진 영화가 최종 누산값이 되어 highestRated에 저장됩니다.