[JS] array의 매서드(forEach, map, filter, reduce)

JavaScript의 array 메서드에 대해 알아보자. 대부분 탐색에 필요한 메서드이다.

 

모두 파라미터로 콜백함수가 들어간다.

forEach

for문과 같은 역할. 단순 순회에 적합하다.

const array = [1, 2, 3];
array.forEach((item) => {
  console.log(item);
});
// 1
// 2
// 3

map

새로운 리스트를 반환한다.  배열 요소의 값을 바꾸고 싶을 때 적합하다.

let array = [1, 2, 3];
let doubleArray = array.map((item) => {
  return item * 2;
});

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

filter

배열의 요소 중 조건을 만족하는 요소들만 필터링 해 리스트로 반환한다.

• return 값은 true/false로 판별되고, true인 값만 리스트에 들어가 반환된다.

let array = [1, 2, 3];
let odd = array.filter((item) => {
  return item % 2;
});

console.log(even);
// [1, 3]

reduce

배열의 요소를 왼쪽부터 순회하면서 반복적인 연산을 하는 메서드이다.

두 개의 파라미터를 가진다.

배열.reduce((결과 변수,  현재 요소,  현재 요소 index,  현재 배열)=>{return ;}, 초기 값)

• 콜백함수
  • 결과 변수  : 콜백 함수의 리턴 값이 이 첫번째 파라미터로 전달된다. (누적된다.)
  • 현재 요소  : 현재 탐색하고 있는 배열의 요소
  • 현재 요소 index  : 현재 탐색하고 있는 배열의 요소의 인덱스 (생략 가능)
  • 현재 배열  : 현재 탐색하고 있는 배열 (생략 가능)
• 초기 값  : 결과 변수의 초기 값을 지정한다. 생략되면 배열의 첫 번째 요소로 초기화된다.

let array = [1, 2, 3];
let cumulativeValue = array.reduce((sum, curr, currIdx, array) => {
  return sum + curr;
}, 0);

console.log(cumulativeValue);
// 6

 

✅리스트 안에 있는 요소의 개수를 세서 객체로 반환하는 응용

const fruits = ["Orange", "Orange", "Apple", "Apple", "Pear", "Banana"];
const states = fruits.reduce((box, fruit) => {
  return { ...box, [fruit]: (box[fruit] || 0) + 1 };
  // Spread Syntax(...) 사용 : 기존 객체(box)의 내용을 복사하여 새로운 객체를 생성함.
}, {});

console.log(states);
// {Orange: 2, Apple: 2, Pear: 1, Banana: 1}

✅여러 배열을 하나로 합치는 응용

const alphabet = [
  ["a", "b", "c", "d"],
  ["e", "f", "g"],
  ["h", "i"],
];
const flattened = alphabet.reduce((sumArr, currArr) => prev.concat(currArr));

console.log(flattened);
// ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']

+ reduceRight

배열의 요소를 오른쪽부터 순회