path: root/files/es/web/javascript/reference/global_objects/array/map/index.html

---
title: Array.prototype.map()
slug: Web/JavaScript/Reference/Global_Objects/Array/map
tags:
  - Array
  - Arreglo
  - Callback
  - ECMAScript5
  - Polifill
  - Prototype
  - metodo
translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
original_slug: Web/JavaScript/Referencia/Objetos_globales/Array/map
---
<div>{{JSRef}}</div>

<p>El método <code><strong>map()</strong></code> crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.</p>

<pre class="brush: js">var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
   return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]

var numbers = [1, 4, 9];
var roots = numbers.map(function(num) {
    return Math.sqrt(num);
});
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]
</pre>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

<pre class="syntaxbox"><var>var nuevo_array = arr</var>.map(function <var>callback(currentValue, index, array) {
    // Elemento devuelto de nuevo_array
}</var>[, <var>thisArg</var>])</pre>

<h3 id="Parameters" name="Parameters">Parámetros</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>Función que producirá un elemento del nuevo array, recibe tres argumentos:</dd>
 <dd>
 <dl>
  <dt><code>currentValue</code></dt>
  <dd>El elemento actual del array que se está procesando.</dd>
  <dt><code>index</code></dt>
  <dd>El índice del elemento actual dentro del array.</dd>
  <dt><code>array</code></dt>
  <dd>El array sobre el que se llama <code>map.</code></dd>
 </dl>
 </dd>
 <dt><code>thisArg</code></dt>
 <dd>Opcional. Valor a usar como <code>this </code>al ejecutar <code>callback</code>.</dd>
</dl>

<h2 id="Description" name="Description">Descripción</h2>

<p><code>map</code> llama a la función <code>callback</code> provista <strong>una vez por elemento</strong> de un array, en orden, y construye un nuevo array con los resultados. <code>callback</code> se invoca sólo para los índices del array que tienen valores asignados; no se invoca en los índices que han sido borrados o a los que no se ha asignado valor.</p>

<p><code>callback</code> es llamada con tres argumentos: el valor del elemento, el índice del elemento, y el objeto array que se está recorriendo.</p>

<p>Si se indica un parámetro <code>thisArg</code> a un <code>map</code>, se usará como valor de <code>this</code> en la función <code>callback</code>. En otro caso, se pasará {{jsxref("Global_Objects/undefined", "undefined")}} como su valor <code>this</code>. El valor de <code>this</code> observable por el <code>callback</code> se determina de acuerdo a las <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">reglas habituales para determinar el valor this visto por una función.</a></p>

<p><code>map</code> no modifica el array original en el que es llamado (aunque <code>callback</code>, si es llamada, puede modificarlo).</p>

<p>El rango de elementos procesado por <code>map</code> es establecido antes de la primera invocación del <code>callback</code>. Los elementos que sean agregados al array después de que la llamada a <code>map </code>comience no serán visitados por el <code>callback</code>. Si los elementos existentes del array son modificados o eliminados, su valor pasado al <code>callback</code> será el valor en el momento que el <code>map</code> lo visita; los elementos que son eliminados no son visitados.</p>

<h2 id="Examples" name="Examples">Ejemplos</h2>

<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Procesar un array de números aplicándoles la raíz cuadrada</h3>

<p>El siguiente código itera sobre un array de números, aplicándoles la raíz cuadrada a cada uno de sus elementos, produciendo un nuevo array a partir del inicial.</p>

<pre class="brush: js">var numeros= [1, 4, 9];
var raices = numeros.map(Math.sqrt);
// raices tiene [1, 2, 3]
// numeros aún mantiene [1, 4, 9]
</pre>

<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Usando map para dar un nuevo formato a los objetos de un array</h3>

<p>El siguiente código toma un array de objetos y crea un nuevo array que contiene los nuevos objetos formateados.</p>

<pre class="brush: js">var kvArray = [{clave:1, valor:10},
               {clave:2, valor:20},
               {clave:3, valor: 30}];

var reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.clave] = obj.valor;
   return rObj;
});

// reformattedArray es ahora [{1:10}, {2:20}, {3:30}],

// kvArray sigue siendo:
// [{clave:1, valor:10},
//  {clave:2, valor:20},
//  {clave:3, valor: 30}]
</pre>

<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Mapear un array de números usando una función con un argumento</h3>

<p>El siguiente código muestra cómo trabaja <code>map </code>cuando se utiliza una función que requiere de un argumento. El argumento será asignado automáticamente a cada elemento del arreglo conforme <code>map </code>itera el arreglo original.</p>

<pre class="brush: js">var numeros = [1, 4, 9];
var dobles  = numeros.map(function(num) {
  return num * 2;
});

// dobles es ahora [2, 8, 18]
// numeros sigue siendo [1, 4, 9]
</pre>

<h3 id="Example_using_map_generically" name="Example:_using_map_generically">Usando <code>map</code> de forma genérica</h3>

<p>Este ejemplo muestra como usar <code>map </code>en {{jsxref("Global_Objects/String", "String")}} para obtener un arreglo de bytes en codifcación ASCII representando el valor de los caracteres:</p>

<pre class="brush: js">var map = Array.prototype.map;
var valores = map.call('Hello World', function(char) { return char.charCodeAt(0); });
// valores ahora tiene [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
</pre>

<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Usando <code>map</code> genérico con <code>querySelectorAll</code></h3>

<p>Este ejemplo muestra como iterar sobre una colección de objetos obtenidos por <code>querySelectorAll</code>. En este caso obtenemos todas las opciones seleccionadas en pantalla y se imprimen en la consola:</p>

<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
var values = [].map.call(elems, function(obj) {
  return obj.value;
});
</pre>

<h3 id="Usando_map_para_invertir_una_cadena">Usando <code>map</code> para invertir una cadena</h3>

<pre class="brush: js">var str = '12345';
[].map.call(str, function(x) {
  return x;
}).reverse().join('');

// Salida: '54321'
// Bonus: usa'===' para probar si la cadena original era un palindromo
</pre>

<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">Caso de uso engañoso</h3>

<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspirado por este artículo)</a></p>

<p>Es común utilizar el callback con un argumento (el elemento siendo pasado). Ciertas funciones son también usadas comunmente con un argumento, aún cuando toman argumentos adicionales opcionales.  Estos hábitos pueden llevar a comportamientos confusos.</p>

<pre class="brush: js">// Considera:
['1', '2', '3'].map(parseInt);
// Mientras uno esperaría [1, 2, 3]
// en realidad se obtiene [1, NaN, NaN]

// parseInt se usa comúnmente con un argumento, pero toma dos.
// El primero es una expresión y el segundo el radix.
// a la función callback, Array.prototype.map pasa 3 argumentos:
// el elemento, el índice y el array.
// El tercer argumento es ignorado por parseInt, pero no el segundo,
// de ahí la posible confusión. Véase el artículo del blog para más detalles

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// El resultado es un arreglo de números (como se esperaba)

// Un modo más simple de lograr lo de arriba, mientras de evita el "gotcha":
['1', '2', '3'].map(Number); // [1, 2, 3]
</pre>

<h2 id="Polyfill" name="Polyfill">Polyfill</h2>

<p><code>map</code> fue agregado al estandar ECMA-262 en la 5th edición; por lo tanto podría no estar presente en todas la implementaciones del estándar. Puedes sobrepasar esto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>map</code> en implementaciones que no lo soportan de forma nativa. Este algoritmo es exactamente el mismo especificado en ECMA-262, 5th edición, asumiendo {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, y {{jsxref("Global_Objects/Array", "Array")}} tienen sus valores originales y que el <code>callback.call</code> evalua el valor original de <code>{{jsxref("Function.prototype.call")}}</code>.</p>

<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {

  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling ToObject passing the |this|
    //    value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal
    //    method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length &gt;&gt;&gt; 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length &gt; 1) {
      T = thisArg;
    }

    // 6. Let A be a new array created as if by the expression new Array(len)
    //    where Array is the standard built-in constructor with that name and
    //    len is the value of len.
    A = new Array(len);

    // 7. Let k be 0
    k = 0;

    // 8. Repeat, while k &lt; len
    while (k &lt; len) {

      var kValue, mappedValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal
      //    method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal
        //    method of O with argument Pk.
        kValue = O[k];

        // ii. Let mappedValue be the result of calling the Call internal
        //     method of callback with T as the this value and argument
        //     list containing kValue, k, and O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Call the DefineOwnProperty internal method of A with arguments
        // Pk, Property Descriptor
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true },
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // For best browser support, use the following:
        A[k] = mappedValue;
      }
      // d. Increase k by 1.
      k++;
    }

    // 9. return A
    return A;
  };
}
</pre>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Definición inicial. Implementado en JavaScript 1.6.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.8")}}</td>
   <td>{{CompatIE("9")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Chrome para Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.8")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Véase también</h2>

<ul>
 <li>{{jsxref("Array.prototype.forEach()")}}</li>
 <li>{{jsxref("Map")}} object</li>
 <li>{{jsxref("Array.from()")}}</li>
</ul>