JavaScript filter() & map() & reduce()

map()

기존 요소를 바탕으로 새로운 값을 만들어내고 싶을 때 사용

const arr = ["월", "화", "수"]
const newArr = arr.map(item => item + "요일")

// 기존 요소인 월, 화, 수에 요일이 붙은 월요일, 화요일, 수요일이 Array형식으로 출력됨
console.log(newArr)

filter()

기존 요소를 순회하여 조건에 맞는 요소들만 빼내어 반환

const arr = ["안녕하세요", "저는", "JavaScript를", "공부하고", "있습니다."]
const newArr = arr.filter(item => item.includes("JavaScript"))

// 기존요소에서 JavaScript를 포함한 JavaScript를 만 Array형식으로 출력됨
console.log(newArr)

find()와 차이점

filter()는 조건에 해당하는 모든 요소를 Array에 담아 return하지만
find()는 조건에 해당하는 한가지의 요소만 반환 (여러개 있으면 처음값만 반환)

reduce()

빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 실행

arr.reduce(callback[, initialValue])

• 다음 4가지의 인수를 가짐
  1. accumulator - accumulator는 callback함수의 반환값을 누적
  2. currentValue - 배열의 현재 요소
  3. index(Optional) - 배열의 현재 요소의 인덱스
  4. array(Optional) - 호출한 배열

initialValue가 있고 없고로 accumulator에 들어갈 값을 결정함

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

// initialValue가 없는 경우 : accumulator은 1부터 currentValue는 2부터 드감(currentIndex = 1)
const sum = number.reduce((acc, curr) => acc + curr); // result = 27

// initialValue가 있는 경우 : accumulator은 초기값, currentValue는 1부터(currentIndex = 0)
const iSum = number.reduce(((acc, curr) => acc + curr), 1); // result = 28