Array.prototype.map()

PromptAction·2024년 5월 1일
0

백엔드

목록 보기
15/20
const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]
구문
    arr.map(callback(currentValue[, index[, array]])[, thisArg])

반환 값 : 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

설명 : map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. callback 함수는 undefined도 포함해서 배열 값이 들어있는 인덱스에 대해서만 호출합니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.

callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받는다.

map은 호출한 배열의 값을 변형하지 않는다. 단, callback 함수에 의해서 변형될 수는 있다.

map이 처리할 요소의 첫 범위는 첫 callback을 호출하기 전에 정해진다. map이 시작한 이후 배열에 추가되는 요소들은 callback을 호출하지 않는다. 배열에 존재하는 요소들의 값이 바뀐 경우 map이 방문하는 시점의 값이 callback에 전달된다. map이 시작되고, 방문하기 전에 삭제된 요소들은 방문하지 않는다.

명세서에 정의된 알고리즘으로 인해 map을 호출한 배열의 중간이 비어있는 경우, 결과 배열 또한 동일한 인덱스를 빈 값으로 유지한다.

예제
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
console.log(numbers)
console.log(roots)
//numbers = [1, 4, 9]
//roots = [1, 2, 3]
예제
var kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];

var reformattedArray = kvArray.map(function (obj) {
  var rObj = {};
  rObj[obj.key] = obj.value;
  return rObj;
});
console.log(kvArray)
console.log(reformattedArray)
//kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
]
//reformattedArray = [{1:10},{2:20},{3:30}]
예제
var numbers = [1, 4, 9];
var doubles = numbers.map(function (num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]
===
const number = [1, 4, 9]
const doubles = number.map((num) => {
  return (num*2)
})

예제
const fruits = ["Apple", "Banana", "Cherry"]
const lowercaseFruits = fruits.map(function(fruit) {
    return fruit.toLowerCase(); // 문자열을 소문자로 변환
})
console.log(lowercaseFruits)
//lowercaseFruits = ['apple', 'banana', 'cherry']
const users = [
    {id: 1, name: "Alice"},
    {id: 2, name: "Bob"},
    {id: 3, name: "Charlie"}
]
const names = users.map(function(user) {
  return user.name})
console.log(names)
//['Alice', 'Bob', 'Charlie']

참고문서:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-map-%ED%95%A8%EC%88%98/

0개의 댓글