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(콜백함수, 초기값) 으로 사용 / 콜백함수의 파라미터는 누적값, 현재값
'JAVASCRIPT' 카테고리의 다른 글
Object.assign (0) | 2023.04.11 |
---|---|
배열 내 홀수의 개수를 출력하는 함수 (0) | 2023.04.10 |
indexOf() (0) | 2023.04.05 |
? (0) | 2023.03.16 |
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(콜백함수, 초기값) 으로 사용 / 콜백함수의 파라미터는 누적값, 현재값
'JAVASCRIPT' 카테고리의 다른 글
Object.assign (0) | 2023.04.11 |
---|---|
배열 내 홀수의 개수를 출력하는 함수 (0) | 2023.04.10 |
indexOf() (0) | 2023.04.05 |
? (0) | 2023.03.16 |