Operador de propagación ES6

Spread Operator es una característica muy simple y poderosa introducida en el estándar ES6 de JavaScript, que nos ayuda a escribir un código más agradable y más corto. El operador de distribución de JavaScript se indica con tres puntos (…) . El operador de distribución ayuda a los objetos iterables a expandirse en elementos individuales. Los objetos iterables son aquellos en los que podemos usar un bucle, por ejemplo, Array, Map, Set, etc. En otras palabras, el operador de extensión nos permite copiar todos los elementos de la array u objeto existente en otra array u objeto.

Visitemos ahora la siguiente sección que nos ayudará a comprender la necesidad del Operador de propagación en ES6:

¿Por qué hay necesidad de un operador de propagación?

Como el objeto crea memoria en el montón porque el valor se define en el montón, por lo que si copiamos el objeto original en un objeto temporal y hacemos algunos cambios, también se reflejará en el objeto original, la misma razón por la que la array también se comporta como un objeto.

Pero el operador de distribución no realiza cambios en la array original, también realiza operaciones en el operador de distribución.

Sintaxis:

var variablename1 = [...value];

Comprendamos el uso del operador de propagación a través de los siguientes ejemplos ilustrados:

Ejemplo 1: aquí hemos copiado la array (de cars1 a cars2 y cars1 a cars3) usando el operador de propagación.

<script>
    const cars1 = ["AUDI","BMW","TATA","MERCEDES"];
    // Copied elements from cars1 to cars2 here
    const cars2 = [...cars1];
 
    // Copied elements from cars1 to cars3 here
    // and also add some new elements in cars3
    const cars3 = [...cars1,"NISSAN","TOYOTA"];
 
    console.log(cars1);
    console.log(cars2);
    console.log(cars3);
</script>

Producción:

[ 'AUDI', 'BMW', 'TATA', 'MERCEDES' ]
[ 'AUDI', 'BMW', 'TATA', 'MERCEDES' ]
[ 'AUDI', 'BMW', 'TATA', 'MERCEDES', 'NISSAN', 'TOYOTA' ]

Ejemplo 2: En este ejemplo, usaremos el operador de propagación para fusionar arrays.

<script>
    const cars1 = ["AUDI","BMW","TATA","MERCEDES"];
    const cars2 = ["NISSAN","TOYOTA"];
    // copied elements from cars1 and cars2 to cars3 here
    const cars3 = [...cars1, ...cars2];
 
    console.log(cars3);
</script>

Producción:

[ 'AUDI', 'BMW', 'TATA', 'MERCEDES', 'NISSAN', 'TOYOTA' ]

Ejemplo 3: En este ejemplo, usaremos el operador de extensión con objetos.

<script>
    // cars1 object
    const cars1 = {
       Brand : "BMW",
       Color : "RED"
    }
    // copy cars1 object using spread
    // operator to create cars2 object
    const cars2 = {...cars1};
    console.log(cars2);
</script>

Producción: 

{ Brand: 'BMW', Color: 'RED' }

Ejemplo 4:  En este ejemplo, usaremos el operador de extensión para fusionar objetos.

<script>
    // cars1 is a object which is containing
    // the attributes Brand  & Color
    const cars1 = {
        Brand : "Toyota",
        Color : "RED"
    }
    // cars2 is a object which is containing
    // the attributes Brand, Color & Year
    const cars2 = {
        Brand : "Nissan",
        Color : "BLUE",
        Year : 2004
    }
    const cars3 = {...cars1,...cars2};
    console.log(cars3);
</script>

Producción:

{ Brand: 'Nissan', Color: 'BLUE', Year: 2004 }

Ejemplo 5: En este ejemplo, usaremos el operador de extensión para dividir la string en una array de strings.

<script>
    const car = "AUDI";
    const a = [...car];
    console.log(a);
</script>

Producción: 

[ 'A', 'U', 'D', 'I' ]

Ejemplo 6: Aquí usaremos el operador de propagación con Array Destructuring.

<script>
    const numbers = [3,5,7,8,9];
    // Here we assign a,b and c with 3,5 and 7,
    // the rest of the elements will all go to others
    const [a,b,c,...others] = numbers;
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(others);
</script>

Producción: 

3
5
7
[ 8, 9 ]