JAVASCRIPT

map, filter, concat, reduce

kimjiwon506 2023. 3. 29. 13:42

map, reduce, filter는 새로운 배열을 만들어내는 것이고, 기존 배열 내용은 유지

const arr = [
  { id: 1, text: 'Text', done: false, info: { check: false } },
  { id: 2, text: 'Text2', done: false, info: { check: false } },
  { id: 3, text: 'Text3', done: false, info: { check: false } },
  { id: 4, text: 'Text4', done: false, info: { check: false } },
]

let id = 2

map

요구사항: id가 2인 객체의 text값을 Text22로 변경해줘

arr.map((item) => item.id === id ? { ...item, text: 'Text22' } : item)

요구사항: id가 2인 객체의 info의 check값을 true로 변경해줘

arr.map((item) => item.id === id ? { ...item, info: { ...item.info, check: true } } : item)

filter

요구사항 : id가 2인 객체를 제거한 새로운 배열을 만들어줘

arr.filter((item) => item.id !== 2)

filter는 return이 true인 것만 나오고 false인건 제외시키는것.

reduce

요구사항 : text를 한 문장으로 이어줘

arr.reduce((acc, curr) => {
  return acc + " " + curr.text
}, '')

요구사항 : text만 있는 배열을 만들어줘

arr.map((item) => item.text)
arr.reduce((acc, curr) => {
  return [
    …acc,
    curr.text
  ]
}, [])

reduce(콜백함수, 초기값) 으로 사용 / 콜백함수의 파라미터는 누적값, 현재값