Javascript, How to use map without mutate original array short example only
Tags: javascript
Published: 2020-02-06 05:21:46


<h3>English version</h3>

<p> First time writing a post in DEV.to, accepting all the recommendations, thank you, I hope you find it helpful and learning, this was an interview question February 2020. </p>


<h3>MAP, MUTATING / UPDATING THE ORIGINAL ARRAY</h3>

```javascript
const persons= [
       {name: 'Adrian', age: 19},
       {name: 'Adriana', age: 10},
       {name: 'Erica', age: 29},
       {name: 'Eric', age: 23}];


/** Here you are modifying the object (person) of the original array.
                               ||
                               \/  */
let newPersons= persons.map((person) => {
   person.age = 18,
   person.name = person.name.toUpperCase()
   return person;
});

console.log('persons', persons);
console.log('newPersons', newPersons);
```

<h1>MAP, WITHOUT MUTATE / UPDATING THE ORIGINAL ARRAY</h1>

```javascript
const persons= [
      {name: 'Adrian', age: 19},
       {name: 'Adriana', age: 10},
       {name: 'Erica', age: 29},
       {name: 'Eric', age: 23}];


/**
What changes, is only to use spread operator (...person) 
in this part to use a person clone, instead of the original one,
so we avoid modifying the original array and its properties
as such because we have a new array (newPersons).

                        spread operator
                              ||
                              \/  */
let newPersons= persons.map(({...person}) => {
   person.age = 18,
   person.name = person.name.toUpperCase()
   return person;
});

console.log('persons', persons);
console.log('newPersons', newPersons);
```

<h3> Versión en español </h3>

<p> Primera vez que hago un post en DEV.TO, acepto todas las recomendaciones, gracias, espero les ayude y sirva de aprendizaje, esto es de una entrevista real de javascript de Febrero 2020 </p>

<h2>MAP, MUTANDO / ACTUALZIANDO EL ARRAY ORIGINAL</h2>

```javascript
const persons= [
       {name: 'Adrian', age: 19},
       {name: 'Adriana', age: 10},
       {name: 'Erica', age: 29},
       {name: 'Eric', age: 23}];

/** Aqui modificamos el objeto (person) del array original.
                               ||
                               \/  */
let newPersons= persons.map((person) => {
   person.age = 18,
   person.name = person.name.toUpperCase()
   return person;
});

console.log('persons', persons);
console.log('newPersons', newPersons);
```

<h1>MAP, SIN MUTAR / ACTUALIZAR EL ARRAY ORIGINAL</h1>

```javascript
const persons= [
      {name: 'Adrian', age: 19},
       {name: 'Adriana', age: 10},
       {name: 'Erica', age: 29},
       {name: 'Eric', age: 23}];

/** 
Lo que cambia, es solo usar el operador de propagación (... person)
en esta parte para usar un clon de person, en lugar del original,
así que evitamos modificar el array original y sus propiedades
como tal porque tenemos un nuevo array (newPersons).

                        spread operator
                              ||
                              \/  */
let newPersons= persons.map(({...person}) => {
   person.age = 18,
   person.name = person.name.toUpperCase()
   return person;
});

console.log('persons', persons);
console.log('newPersons', newPersons);
```


[JAVASCRIPT MAP DESCRIPTION ENGLISH](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
[JAVASCRIPT SPREAD OPERATOR DESCRIPTION ENGLISH](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)


[JAVASCRIPT MAP DESCRIPCIÓN ESPAÑOL](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map)
[JAVASCRIPT SPREAD OPERATOR DESCRIPCIÓN ESPAÑOL](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Sintaxis_Spread)