[JavaScript] 자바스크립트 배열(Array) 요소 추출해서 새 배열 만들기

055_자바스크립트 배열(Array) 요소 추출해서 새 배열 만들기

[적용]

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

---

[문법]

메소드	의미	반환
배열.map(콜백함수)	콜백 함수로 새로운 배열 생성	배열

[문법] - 콜백 함수

구문	의미
([요소*], [인덱스*], [기존배열*]) => 변경요소	요소를 받아 변경 후 반환

* 생략 가능

---

[내용]

map()은 배열에서 요소를 추출하여 새로운 배열을 생성한다. 또한, 배열 요소를 하나씩 처리하기 때문에 배열의 루프 처리 작업에도 활용되며, 각 요소는 인수로 전달된 콜백 함수에 의해 처리된다. map()은 forEach()와 비숫하지만 반환값이 존재한다.

const idList = [4, 10, 20];

const userIdList = idList.map((value) = > `userid_${value}`);
console.log(userIdList);  // 결과: ["userid_4", "userid_10", "userid_20"]

 

콜백 함수는 요소 데이터 이외에도 인덱스와 기존 배열을 인수로 받을 수 있다.

const idList = [3, 8, 12];

const userIdList = idList.map((value, index) => `userid_${index + 1}_${value}`);
console.log(userIdList);  // 결과: ["userid_1_3", "userid_2_8", "userid_3_12"]

 

ID와 이름을 가지는 객체 배열에서 ID만 가지는 배열을 작성하는 샘플을 확인해 보자.

const apoResponseData = [
    { id: 10, name: '곰' },
    { id: 21, name: '사자' },
    { id: 31, name: '여우' }
];

const idList = apoResponseData.map((value) => value.id);
// 다음과 같이 작성도 가능
// const idList = apoResponseData.map(value => {
    return value.id
});

console.log(idList);  // 결과:  [10, 21, 31]

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김