[🍦] 배열 메소드(4) - map

map 메소드

map은 똑같은 배열 요소의 개수를 갖는 새로운 배열을 만든다.

 

즉, 기존 배열 속 요소(객체)가 3개였다면 새롭게 만든 배열의 요소도 3개이다.

결과값이 undefined 라고 해도 똑같이 3개가 나온다.

[1, 2, 3] 

// map 메소드로 1씩 더한 새로운 배열
[2, 3, 4]

const tutors = [
  {
    name: "최원장",
    age: 20,
  },
  {
    name: "김병연",
    age: 21,
  },
  {
    name: "윤창식",
    age: 22,
  },
];

// map 메소드로 나이를 10살 늘린 결과
const tutors = [
  {
    name: "최원장",
    age: 30,
  },
  {
    name: "김병연",
    age: 31,
  },
  {
    name: "윤창식",
    age: 32,
  },
];

 

이 메소드는 React에서 가장 많이 쓰이는 문법이라고 하니 익숙해질 필요가 있다.

 

 

📍기본 형식

return은 필수이고 return 뒤에 조건을 작성한다.

배열.map((배열내의_요소) => {
	return 새로운모양의데이터
})

 

 

📍예시

const numbers = [1, 2, 3] 

const plusOneNumbers = numbers.map((number) => {
	return number + 1;
})

console.log(plusOneNumbers) // [2, 3, 4]

const tutors = [
  {
    name: "최원장",
    age: 20,
  },
  {
    name: "김병연",
    age: 21,
  },
  {
    name: "윤창식",
    age: 22,
  },
];

const afterTenYears = tutors.map((tutor) => {
  return {
    name: tutor.name,
    age: tutor.age + 10,
  };
});

/*
	[
    {
        "name": "최원장",
        "age": 30
    },
    {
        "name": "김병연",
        "age": 31
    },
    {
        "name": "윤창식",
        "age": 32
    },
	]
*/

 

 

 

📍연습 문제

 

문제 1.

map을 사용하여 아래 튜터 의 name 속성 뒤에 문자열 “튜터”를 붙여보세요.

const tutors = [
  {
    name: "최원장",
    age: 20,
  },
  {
    name: "김병연",
    age: 21,
  },
  {
    name: "윤창식",
    age: 22,
  },
];

정답

const newToturs = tutors.map((tutor) => {
  return {
    name: `${tutor.name} 튜터`,
    age: tutor.age,
  };
});

console.log(newToturs);
/*
[
    {
        "name": "최원장 튜터",
        "age": 20
    },
    {
        "name": "김병연 튜터",
        "age": 21
    },
    {
        "name": "윤창식 튜터",
        "age": 22
    },
]
*/

 

문제 2.

아래 상품의 가격이 20% 할인된 상품 배열을 다시 만들어보세요.

const products = [
  {
    브랜드: "수아레",
    상품명: "케이블 카라 반팔 니트 - 6 Color",
    가격: 39900,
  },
  {
    브랜드: "커버낫",
    상품명: "에센셜 어쩌고",
    가격: 34300,
  },
];

정답

const newProducts = products.map((product) => {
  return {
    브랜드: product.브랜드,
    상품명: product.상품명,
    가격: product.가격 * 0.8,
  };
});

console.log(newProducts);

/*
[
    {
        "브랜드": "수아레",
        "상품명": "케이블 카라 반팔 니트 - 6 Color",
        "가격": 31920
    },
    {
        "브랜드": "커버낫",
        "상품명": "에센셜 어쩌고",
        "가격": 27440
    }
]
*/