[책] 자바스크립트 코드 레시피 278 - 47일차

배열 요소 추출하여 새 배열 만들기

• 요소를 추출하여 새로운 배열을 만들고 싶을 때
• 배열 요소 전체에 대한 처리 작업을 하고 싶을 때
• ID와 이름을 가지는 객체 배열에서 ID만 가지는 배열을 새로 만들고 싶을 때

구문

array.map(callbackfunction);

실습

배열의 인덱스값을 훑어서 새로운 배열을 만들어주는 실습해봅니다.

const idList = [3, 5, 7];
const userIdList = idList.map((value) => `userid_${value}`);
console.log(userIdList);

---

const idList = [3, 8, 12];
const userIdList = idList.map((value, index) => 
  `userid_${index + 1}_${value}`
)
console.log(userIdList);

---

const userList = ['도구', '구슬', '슬기', '기술', '술래'];
const dataList = userList.map(function dataName(value, index) {
  return `${index + '번_'}` + value;
});
console.log(dataList);

---

const api = [
  {
    id: 10,
    myName: '곰',
  },
  {
    id: 21,
    myName: '사자',
  },
  {
    id: 31,
    myName: '여우',
  },
];
const idList = api.map(function apiData(value) {
  return value.myName;
});
console.log(idList);

주의할 점

forEach() 구문이 비슷하지만 map() 새로운 배열 생성해주고, 반환값이 존재한다.

array.map((value) => {
  // map 메소드
});

array.forEach(element => {
  // forEach 메소드
});