JavaScript 배열(Array)의 메서드

map, filter, find, sort 사용해보기

배열 생성

const 떡잎마을방범대 = [
  { 이름: "철수", 나이: 19, 성별: "남" },
  { 이름: "짱구", 나이: 20, 성별: "남" },
  { 이름: "유리", 나이: 21, 성별: "여" },
];

find로 객체 안 성별이 남인 배열 출력하기

const boy = 떡잎마을방범대.find((element) => {
  return element.성별 === "남";
});
console.log(boy); 
// {이름: '철수', 나이: 19, 성별: '남'}

find()를 이용하면 조건을 만족하는 첫 번째 요소만 반환합니다.

filter로 객체 안 성별이 남인 배열 출력하기

const boys = 떡잎마을방범대.filter((element) => {
  return element.성별 === "남";
});
console.log(boys); 
// [{이름: '철수', 나이: 19, 성별: '남'}, {이름: '짱구', 나이: 20, 성별: '남'}]

filter()는 조건을 만족하는 모든 요소를 배열로 반환합니다.

map으로 원래 객체의 배열들 나이 10씩 증가시키기

const agedUp = 떡잎마을방범대.map((element) => ({
  ...element,
  나이: element.나이 + 10,
}));
console.log(agedUp);  
// [{이름: '철수', 나이: 29, 성별: '남'}, {이름: '짱구', 나이: 30, 성별: '남'}, {이름: '유리', 나이: 31, 성별: '여'}]

map()을 사용하면 기존 배열을 변경하지 않고 새로운 배열을 만들 수 있습니다.

spread operator로 새로운 배열 생성 후 sort로 나이 순 정렬하기

const 떡잎마을 = [...떡잎마을방범대];
const sortedByAge = 떡잎마을.sort((a, b) => {
  return b.나이 - a.나이;
});
console.log(sortedByAge);
// [{이름: '유리', 나이: 21, 성별: '여'}, {이름: '짱구', 나이: 20, 성별: '남'}, {이름: '철수', 나이: 19, 성별: '남'}]

b.나이 - a.나이는 내림차순 정렬을 의미합니다.