[Java Script] map() 알아보기

map() 함수는 기존 배열의 각 요소에 함수를 적용하여 새로운 배열로 변환해 주는 함수입니다.

 

| 구조

1. 구조

map() 함수의 구조는 다음과 같습니다.

array.map((currentValue, index, array)=>{});

• currentValue: 현재 처리 중인 요소의 값
• index: 현재 처리 중인 요소의 값
• array : 현재 배열

이런 식으로 콜백함수로 최대 3개의 인수를 가질 수 있고,

이중에 index와 array는 필수가 아니고 선택 요소입니다.

 

2. 예시

let arr = [1, 2, 3, 4];

let arr2 = arr.map((number)=> number * 2)
console.log(arr2) // [2, 4, 6, 8] 출력

위 예제에서처럼 배열을 만들고 map() 함수를 사용해 각 배열의 요소들을 두 배로 만들 수 있습니다.

 

 

| 활용

이러한 map() 함수는 다양하게 사용될 수 있는데 다음과 같이 일반적인 몇 가지 예시가 있습니다.

1. 배열 반환

map() 함수를 활용하여 숫자를 2배로 만들거나

문자열을 대문자로 변환하는 동작을 실행할 수 있습니다.

const arr1 = [1, 2, 3, 4, 5];
const arr2 = arr1.map(number => number * 2);
const arr3 = ["hello", "world"].map(word => word.toUpperCase());

console.log(arr2); // [1, 4, 6, 8, 10] 출력
console.log(arr3); // ["HELLO", "WORLD"] 출력

 

2. 객체타입에 적용

map() 함수를 객체타입에 적용하여 활용할 수 있습니다.

const users = [
  { name: "a", age: 23 },
  { name: "b", age: 36 },
  { name: "c", age: 40 },
];

const userList = users.map((user) => user.name);
console.log(userList) ["a", "b", "c"] 출력