Fusión de Arrays con Concat y Operador Spread en JavaScript

Si estas trabajando con un arrays de Objs igual una forma de copiar cada elemento sin la referencia podría ser:

const newArray = myArray.map(a => ({…a}));

Estaba preocupado porque la numeración de ejercicios de los archivos del profe iban un número más adelante que el mío y pensé que me había salteado una clase. Por suerte me di cuenta que en realidad el profe se saltó el número 8 😁

Recordar que al ser inmutable, los arrays (tanto el nuevo como el viejo) quedaran referenciados por memoria, por lo tanto sí modificamos alguno de los dos, los cambios se verán reflejados en ambos.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

La sintaxis de propagación (…) (Spread) permite que un iterable, como una expresión de matriz o una cadena, se expanda en lugares donde se esperan cero o más argumentos (para llamadas a funciones) o elementos (para literales de matriz), o que se expanda una expresión de objeto en lugares donde se esperan cero o más pares clave-valor (para objetos literales).

El spread operator es de esos features que mas me gustas de JS.

También si quieren un array “merged” sin valores repetidos, pueden utilizar new Set más los spread operators. Adjunto ej:

<const arrayA = ["Java","JavaScript"];
const arrayB = ["C#", "PHP" , "Java"];

const mergedArrays = [...new Set([...arrayA, ...arrayB])]

//(4) ['Java', 'JavaScript', 'C#', 'PHP']
console.log(mergedArrays)> 

Método concat: fusiona arrays. Es inmutable (no modifica el array original).

const elements = [1, 2, 3, 4];
const otherElements = [5, 6, 7, 8];

const concatMetod = elements.concat(otherElements);
console.log('Concat:', concatMetod);

Concat con spread operator :

const elements = [1, 2, 3, 4];
const otherElements = [5, 6, 7, 8];

const spreadOperatorMetod = [...elements, ...otherElements];
console.log('Con spread operator: ', spreadOperatorMetod );

Fusionar arrays método push:

const elements = [1, 2, 3, 4];
const otherElements = [5, 6, 7, 8];

elements.push(...otherElements); // con spread operator
console.log('Push con spread operator:', elements);

//elements.push(otherElements); // sin spread operator 
//console.log('Push sin spread operator:', elements);

Mucho cuidado, el nombre correcto es ‘spread operator’, no ‘split operation’ para esto => ...

… split operation, es muy útil 👍🏻

Me parece importante destacar que concat no solo recibe arrays, tambien puede recibir los elementos a concatenar en el orden que se quiere, o un solo elemento, lo destaco porque un compañero uso concat para añadir un solo elemento no array y no estaba entendiendo.

[1,2,3].concat('hola')
// returned value [1, 2, 3, 'hola' ]

Con spread operator sí se podrían agregar strings y otros valores:

const numbers1 = [1, 2, 3, 4]
const numbers2 = [5, 6, 7, 8]

const fusion = numbers1.concat(numbers2)

const fusion2 = [
  ...fusion,
  42,
  23,
  1000,
  2330,
  'string',
  { greet: 'hola' },
]

console.log(fusion2[fusion2.length - 1].greet)
console.log(fusion2)
console.log(fusion)

También podríamos crear un array de strings u otra elemento y fusionar con spread.

Concat: Fusionar 2 arrays en uno, se genera un nuevo array sin modificar los array que se fusionan

Concat con Spread Operator

const elements = [1, 2, 3, 4];
const otherElements = [5, 6, 7, 8];

const spreadOperatorMetod = [...elements, ...otherElements];
console.log('Con spread operator: ', spreadOperatorMetod );

Creo que necesitaría un vídeo exclusivamente para el spread operator (…), pero .concat( ) 🫡 perfecto

También podemos usar el split operation para separar un String en caracteres de una manera sencilla:

const caracters = [..."Hello"];
console.log(caracters);

//Output: ['H', 'e', 'l', 'l', 'o']

Una forma mas moderna de hacer una copia sin referencias de memoria puedes ocupar la función structuredClone(), puedes revisar la documentación oficial en este link

Mi solución a la primera parte fue la siguiente, usando el ciclo for:

const elements = [1,1,2,2];
const otherElements = [3,3,4,4];

const elements3 = [];
for(let i=0; i<elements.length; i++){
    const a = elements[i];
    elements3.push(a);
    if(i === elements.length-1){
        for(let ii = 0; ii<otherElements.length;ii++){
            const b = otherElements[ii];
            elements3.push(b);
        }
    }
}

console.log(elements3)

Escribí algo mas de código pero me dio el mismo resultado.

El hecho de que concat separe los caracteres si le enviamos un string con spread operator, en realidad tiene sentido: porque un string técnicamente es un array de caracteres.
Solo hay que estar atentos de que al usar spread operator mandemos un array.

Nos ayuda a realizar un merge de arrays, ósea juntar dos o mas arrays y mostrarlo en uno solo.

Concat con el clasico push

const elements = [1, 2, 3, 4];
const otherElements = [5, 6, 7, 8];

//elements.push(otherElements); // sin spread operator 
//console.log('Push sin spread operator:', elements);

elements.push(...otherElements); // con spread operator
console.log('Push con spread operator:', elements);

Increíble!

Metodo .concat()

• Como su nombre lo indica, permite concatenar dos arrays inmutablemente.

const array1 = [1, 2, 3, 4,];
const array2 = [5, 6, 7, 8,];

const newArray = [...array1];

for (let i = 0; i < array2.length; i++) {
    const element = array2[i];
    newArray.push(element);
}

console.log('array 1: ', array1);
console.log('array 2: ', array2);
console.log('new Array: ', newArray);

// .concat()

const rta = array1.concat(array2);
console.log('.concat(): ', rta);

Otro consejo es: cuando quieras hacer console.log(anyArray) es mejor logearlo con spread operator console.log(…anyArray), pues su lectura será más amigable:

Mi solucion sin spread operator usando dos for loops

//concat()
//metodo que se utiliza para fucionar dos arrays
//concat es un metodo inmutable
//Se le pasa como parametro el array que se concatena al array en el que se invocó el metodo

const Array1 = [1,2,3,4,5,6,7,8];
const Array2 = [5,6,7,8];

// for()
let NewArray = [...Array1];
for(let i = 0; i < Array2.length; i++){
  NewArray.push(Array2[i]);
}

console.log("for",NewArray);

//concat()

const Array3 = Array1.concat(Array2);
console.log("concat",Array3);

//(...) copiando el array 

const Array4 = [...Array1,...Array2];
console.log("split operation",Array4);

Cada clase de este curso es muy interesante 👍

El Spread operator es el mismo tema de la La Desestructuración de objectos.
Desestructuración es una expresión de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables.

Mucho cuidado con las referencias en memoria:

const elements = [1, 1, 2, 2];
const otherElements = [3, 3, 4, 4];

const newArray_fail = elements; // Haciendo esto estamos asignando este nuevo array en una referencia en memoria
const newArray = Object.assign([], elements);

console.log(newArray);
for (let index = 0; index < otherElements.length; index++) {
    const item = otherElements[index];
    newArray.push(item);
}

console.log('NewArray:', newArray);
console.log('Element:', elements);