[Javascript] map 과 filter 를 이용한 문제 풀어보기

 

문제

classmates 라는 배열에 여러 학생의 나이와 이름이 있을 때,

1. 나이가 16살인 학생만 골라낸 후, candy: 10 을 각각 추가하세요.

2. 나이가 19살인 학생만 골라낸 후, name 뒤에 '어린이'를 붙여주세요.

 

 

 

---

 

 

 

해답

나이로 학생을 골라내는 것은 filter 를 사용하고,

그 골라낸 배열을 순회하면서 새로운 것을 추가할 때 map 을 사용한다.

const classmates = [
  {name: "유리", age: 19},
  {name: "철수", age: 16},
  {name: "영희", age: 16},
  {name: "수진", age: 8},
]

// 1. 나이가 16살인 학생만 골라낸 후, candy: 10 개씩 각각 추가
const classFilter1 = classmates.filter((item) => item.age === 16);
classFilter1.map((item) => item.candy = 10);
console.log(classFilter1); // [{ name: '철수', age: 16, candy: 10 }, { name: '영희', age: 16, candy: 10 }]


// 2. 나이가 19살인 학생만 골라낸 후, name 뒤에 "어린이" 붙이기
const classFilter2 = classmates.filter((item) => item.age === 8);
const result = classFilter2.map((item) => {
    return {
      name : item.name + '어린이',
      age: item.age,
    }
  }
)
console.log(result); // [ { name: '수진어린이', age: 8 } ]

 

 

---

 

문제

fruits 라는 배열에 과일의 번호와 이름이 있을 때,

숫자가 짝수인 과일만 화면에 나오도록 만들어주세요.

 

---

 

 

 

해답

1. filter를 사용해 숫자가 짝수인 과일들만 골라낸다.

2. map 을 이용하여 과일들 각각을 화면에 뿌려준다.

const fruits = [
    { num: 1, name: "사과" },
    { num: 2, name: "수박" },
    { num: 3, name: "오렌지" },
    { num: 4, name: "키위" },
    { num: 5, name: "바나나" },
    { num: 6, name: "파인애플" },
    { num: 7, name: "복숭아" },
];

// 숫자가 짝수인 과일만 필터링
const numFilter = fruits.filter((item) => {
    return item.num % 2 === 0;
});

// 필터링된 과일들을 화면에 나오도록 만들기
numFilter.map((item) => {
    return document.write(`<h1>num: ${item.num} / name: ${item.name}</h1>`);
});