자바스크립트 map() 함수 배열 값을 변형해서 새로운 배열 만들기

“map()” 함수는 배열 내의 각 요소에 대해 주어진 함수를 실행하고, 각 함수 호출의 결과를 포함하는 새로운 배열을 반환합니다. 이 함수를 사용하면 기존 배열을 변경하지 않고 각 요소에 변형을 가할 수 있습니다. “map()” 함수는 배열의 요소를 변경하거나 추출할 때 유용하며, 새로운 배열을 생성하므로 원래 배열에 영향을 미치지 않습니다.

 

 

map 함수와 유사한 filter 함수를 참고하세요. 둘의 차이점은 map 은 기존 배열 값을 이용해서 작업한 결과값을 배열로 만든다는 것입니다. 하지만 기존 배열 값은 변경하지 않습니다. filter 는 기존 배열에서 조건에 맞는 데이터를 추출합니다.

https://mainia.tistory.com/7035

자바스크립트 filter() 함수 배열에서 특정 조건 만족하는 데이터 찾기

 

 

◎ 구문

 

const newArray = array.map(callback(currentValue[, index[, array]])[, thisArg])

l  “callback”: 각 요소에 대해 실행할 함수.

l  “currentValue”: 배열의 현재 요소.

l  “index” (선택 사항): 배열 요소의 인덱스.

l  “array” (선택 사항): “callback”이 호출된 배열.

l  “thisArg” (선택 사함): “callback” 함수 내에서 “this”로 사용할 객체.

 

 

◎ 1. 배열의 각 요소 제곱하기

 

파라미터로 넘어온 배열을 각 요소를 곱한 결과값을 배열로 만들어 반환합니다.

 

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(number => number * number);
 
[출력]
[1, 4, 9, 16, 25]

 

 

◎ 2. 문자열 배열의 길이 계산

 

파라미터로 넘어온 배열 각 요소의 문자열 길이 값을 배열로 만들어서 반환합니다.

 

const words = ["apple", "banana", "cherry", "date", "fig"];
const wordLengths = words.map(word => word.length);
 
[출력]
[5, 6, 6, 4, 3]

 

 

◎ 3. 객체 배열에서 특정 속성 추출

 

배열의 제품 객체에서 제품 이름을 추출해 배열로 만듭니다.

 

const products = [
  { name: "Laptop", price: 1000 },
  { name: "Phone", price: 500 },
  { name: "Tablet", price: 300 },
];
const productNames = products.map(product => product.name);
 
[출력]
["Laptop", "Phone", "Tablet"]

 

 

◎ 4. 배열의 요소에 변형 적용

 

파라미터로 받은 배열 요소를 계산해서 반환한 결과값을 배열로 만듭니다. callback 함수는 사용자가 다양하게 변경이 가능합니다.

 

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => {
  return number * 2;
});
 
[출력]
[2, 4, 6, 8, 10]