| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map | [Back] [Original] |
Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 7.
Array map()
.
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]
map(callbackFn)
map(callbackFn, thisArg)
callback. . . .
currentValue.
index.
arraymap() .
thisArg Optional callback .
callback , , map 3 . callbackFn . .
.
const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));
// roots [1, 2, 3] .
// numbers [1, 4, 9] .
map .
const kvArray = [
{ key: 1, value: 10 },
{ key: 2, value: 20 },
{ key: 3, value: 30 },
];
const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));
console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]
console.log(kvArray);
// [
// { key: 1, value: 10 },
// { key: 2, value: 20 },
// { key: 3, value: 30 }
// ]
( ) . . . .
["1", "2", "3"].map(parseInt);
[1, 2, 3] , [1, NaN, NaN].
parseInt , . . Array.prototype.map , , . parseInt , . .
.
/* ( 0): */ parseInt("1", 0); // 1
/* ( 1): */ parseInt("2", 1); // NaN
/* ( 2): */ parseInt("3", 2); // NaN
.
["1", "2", "3"].map((str) => parseInt(str, 10)); // [1, 2, 3]
Number .
["1", "2", "3"].map(Number); // [1, 2, 3]
// parseInt() Number() () .
["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]
// parseInt()
["1.1", "2.2e2", "3e300"].map((str) => parseInt(str, 10)); // [1, 2, 3]
Allen Wirfs-Brock JavaScript .
undefined undefined . filter() flatMap() .
const numbers = [1, 2, 3, 4];
const filteredNumbers = numbers.map((num, index) => {
if (index < 3) {
return num;
}
});
// 0 filterNumber 1, 2, 3 undefined .
// filteredNumbers [1, 2, 3, undefined]
// numbers [1, 2, 3, 4]
.
const cart = [5, 15, 25];
let total = 0;
const withTax = cart.map((cost) => {
total += cost;
return cost * 1.2;
});
console.log(withTax); // [6, 18, 30]
console.log(total); // 45
. .
const cart = [5, 15, 25];
const total = cart.reduce((acc, cost) => acc + cost, 0);
const withTax = cart.map((cost) => cost * 1.2);
map() .
const products = [
{ name: "sports car" },
{ name: "laptop" },
{ name: "phone" },
];
products.map((product) => {
product.price = 100;
});
, . map() forEach() for...of .
products.forEach((product) => {
product.price = 100;
});
.
const productsWithPrice = products.map((product) => {
return { ...product, price: 100 };
});
array , . filter() map() .
const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6];
const averaged = numbers
.filter((num) => num > 0)
.map((num, idx, arr) => {
// arr ,
// .
const prev = arr[idx - 1];
const next = arr[idx + 1];
let count = 1;
let total = num;
if (prev !== undefined) {
count++;
total += prev;
}
if (next !== undefined) {
count++;
total += next;
}
const average = total / count;
//
return Math.round(average * 100) / 100;
});
console.log(averaged); // [2, 2.67, 2, 3.33, 5, 5.33, 5.67, 4]
array . .
map() . .
console.log(
[1, , 3].map((x, index) => {
console.log(`Visit ${index}`);
return x * 2;
}),
);
// 0
// 2
// [2, empty, 6]
map() this length length .
const arrayLike = {
length: 3,
0: 2,
1: 3,
2: 4,
3: 5, // length 3 map()
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]
querySelectorAll . querySelectorAll NodeList . option .
const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);
elems Array.from() . map() .
| Specification |
|---|
| ECMAScript 2027 LanguageSpecification # sec-array.prototype.map |
core-js Array.prototype.map ArrayArray.prototype.forEach()Array.from()TypedArray.prototype.map()MapThis page was last modified on 2025 10 10 by MDN contributors.
Arrayat()concat()copyWithin()entries()every()fill()filter()find()findIndex()findLast()findLastIndex()flat()flatMap()forEach()includes()indexOf()join()keys()lastIndexOf()map()pop()push()reduce()reduceRight()reverse()shift()slice()some()sort()splice()toLocaleString()toReversed()toSorted()toSpliced()toString()unshift()values()with()[Symbol.iterator]()Object/FunctionObject.prototype.__defineGetter__()Object.prototype.__defineSetter__()Object.prototype.__lookupGetter__()Object.prototype.__lookupSetter__()Object.prototype.hasOwnProperty()Object.prototype.isPrototypeOf()Object.prototype.propertyIsEnumerable()Object.prototype.toLocaleString()Object.prototype.toString()Object.prototype.valueOf()Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |