Menu
Coddy logo textTech

Sintaxis Spread en Arrays

Parte de la sección Lógica y Flujo del Journey de JavaScript de Coddy — lección 48 de 65.

La sintaxis de propagación (...) permite que un iterable, como un array, sea expandido en lugares donde se esperan cero o más argumentos o elementos. Proporciona una forma concisa de realizar operaciones como combinar arrays o copiar arrays.

Aquí hay algunos casos de uso comunes:

1. Combinar arreglos:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

2. Creando una copia superficial de un array:

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

3. Añadir elementos a un array:

const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]

4. Pasar elementos de un array como argumentos de función:

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
challenge icon

Desafío

Fácil

Crea una función llamada mergeArr que reciba dos arrays de números como argumentos. La función debe:

  1. Combinar los dos arrays utilizando el operador spread
  2. Eliminar cualquier número duplicado
  3. Devolver el array resultante

Hoja de referencia

La sintaxis extendida (...) permite que un iterable se expanda en lugares donde se esperan cero o más argumentos o elementos.

Combinar arrays:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

Crear una copia superficial:

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

Añadir elementos a un array:

const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]

Pasar elementos de un array como argumentos de función:

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

Pruébalo tú mismo

function mergeArr(arr1, arr2) {
  // Escribe tu código aquí
}
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Lógica y Flujo