[TIL] 배열 고차 함수 - (2) forEach / map / filter

Cottonmycotton·2021년 11월 20일

TIL

목록 보기

11/16

✔️ 1. Array.prototype.forEach

📌 (1) forEach란?

forEach 메서드는 for문을 대체할 수 있는 고차 함수다. forEach 메서드는 인자로 콜백함수를 받아온다.그리고 배열의 처음부터 마지막 요소까지 순회하며 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다.

📌 (2) forEach 인수

forEach 메서드는 콜백 함수를 호출하면서 요소값, 인덱스, this(array) 총 3개의 인수를 전달한다.

const arr = [1, 2, 3, 4];

arr.forEach((elements, index, array) => {
  console.log(`요소값: ${elements}, 인덱스: ${index}, this: ${array}`)});
/*
요소값: 1, 인덱스: 0, this: [1, 2, 3, 4]
요소값: 2, 인덱스: 1, this: [1, 2, 3, 4]
요소값: 3, 인덱스: 2, this: [1, 2, 3, 4]
요소값: 4, 인덱스: 3, this: [1, 2, 3, 4]
*/

📌 (3) forEach 사용하기

// for문으로 배열 순회
const arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]) // 1 2 3 4
}

위 구문을 forEach를 사용해 구현하면 아래와 같다.

// forEach로 배열 순회
const arr = [1, 2, 3, 4];

arr.forEach(elements => console.log(elements));
// 1 2 3 4

forEach 메서드는 원본 배열을 변경하진 않지만 콜백 함수를 통해 원본 배열을 변경하는 것은 가능하다. 아래의 예시를 살펴보자.

const arr = [1, 2, 3, 4];

arr.forEach((elements, index, array) => {
  return array[index] = elements * 2;});

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

forEach의 콜백 함수의 세 번째 인자인 array는 원본 배열인 arr를 가리킨다. 따라서 세 번쨰 매개변수 array에 변경을 가하면 원본 배열 arr 또한 변경되는 것이다.

forEach의 반환값은 언제나 undefined이다. 이 점은 map과 forEach가 구분되는 하나의 특징이다.

forEach 메서드는 break, continue문을 사용할 수 없다. 배열의 모든 요소를 순회하며 중간에 순회를 중단할 수 없다는 것이 특징이다.

✔️ 2. Array.prototype.map

📌 (1) map이란?

map 메서드는 배열의 모든 요소를 순회하면서 콜백 함수를 통해 새로운 값들을 정의하여 반환값들로 구성된 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다. 위에서 살펴본 forEach와의 공통점은 배열의 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다는 점이며, 차이점은 forEach는 항상 undefined를 반환하는 반면 map은 새로운 배열을 반환한다는 점이다.

📌 (2) map 인수

map 메서드는 콜백 함수를 호출하면서 요소값, 인덱스, this(array) 총 3개의 인수를 전달한다.

const arr = [1, 2, 3, 4];

arr.map((elements, index, array) => {
  console.log(`요소값: ${elements}, 인덱스: ${index}, this: ${array}`)});
/*
요소값: 1, 인덱스: 0, this: [1, 2, 3, 4]
요소값: 2, 인덱스: 1, this: [1, 2, 3, 4]
요소값: 3, 인덱스: 2, this: [1, 2, 3, 4]
요소값: 4, 인덱스: 3, this: [1, 2, 3, 4]
*/

📌 (3) map 사용하기

다시 한번 말해, map은 요소값을 다른 값으로 매핑한 새로운 배열을 만들어 반환한다.

// map 함수를 이용하여 제곱값으로 구성된 배열 반환하기
const arr = [1, 2, 3, 4];

const result = arr.map(elements => elements ** 2);
console.log(result); // [1, 4, 9, 16]

✔️ 3. Array.prototype.filter

📌 (1) filter란?

filter 메서드는 배열의 모든 요소를 순회하면서 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 만들어 반환한다. forEach메서드는 언제나 undefined를 반환하고, map메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환하고 filter메서드는 콜백 함수의 반환값이 true인 요소만 추출한 새로운 배열을 반환한다.

📌 (2) filter 인수

위에서 살펴본 forEach, map함수와 마찬가지로 filter역시 요소값, 인덱스, this 총 3개의 인수를 받는다.

const arr = [1, 2, 3, 4];

arr.filter((elements, index, array) => {
  console.log(`요소값: ${elements}, 인덱스: ${index}, this: ${array}`)});
/*
요소값: 1, 인덱스: 0, this: [1, 2, 3, 4]
요소값: 2, 인덱스: 1, this: [1, 2, 3, 4]
요소값: 3, 인덱스: 2, this: [1, 2, 3, 4]
요소값: 4, 인덱스: 3, this: [1, 2, 3, 4]
*/

📌 (3) filter 사용하기

filter메서드는 배열에서 필터링 조건을 만족하는 특정 요소만 추출하여 새로운 배열을 만들어야 할때 사용한다.

// filter를 이용해 홀수로만 구성된 배열 만들기
const arr = [1, 2, 3, 4, 5, 6, 7];

const result = arr.filter((elements) => {
  if (elements % 2 === 1) {
    return elements;
  }
});

console.log(result);

filter메서드는 배열 내 중복제거를 할 때도 사용할 수 있다.

// filter를 이용해 중복제거하기
const arr = [1, 1, 2, 3, 3, 4];

const result = arr.filter((elements, index)=> {
  return arr.indexOf(elements) === index;
});

console.log(result); // [1, 2, 3, 4]