EL OPERADOR DE TRES PUNTOS EN JAVASCRIPT EXPLICADO

October 20, 2025

Introducción al operador de tres puntos en JavaScript

El operador de tres puntos (...) en JavaScript, introducido en la especificación ES6, es una herramienta versátil que simplifica múltiples operaciones que antes requerían código extenso o sintaxis compleja. Este operador, conocido como spread y rest, permite a los desarrolladores realizar tareas como copiar arrays, concatenar objetos, pasar argumentos a funciones o manejar colecciones de datos de manera más eficiente. En este tutorial, exploraremos en detalle qué significa el operador de tres puntos, cómo se utiliza en diferentes contextos y cómo reemplaza métodos tradicionales con una sintaxis más clara y concisa. A través de ejemplos prácticos, ilustraremos los casos de uso más comunes para que los desarrolladores, tanto principiantes como avanzados, puedan integrar esta funcionalidad en sus proyectos.

El operador de tres puntos tiene dos usos principales: como operador spread, que expande elementos iterables, y como operador rest, que agrupa múltiples argumentos en un solo arreglo. Aunque la sintaxis es idéntica (...), el contexto determina su comportamiento. A continuación, desglosaremos cada uno de estos usos, proporcionando ejemplos claros y comparándolos con métodos anteriores para destacar las ventajas que ofrece esta característica de ES6.

Uso del operador spread en JavaScript

El operador spread permite expandir elementos de un iterable, como un array, un objeto o una cadena, dentro de un receptor, que puede ser otro array, objeto o incluso una llamada a función. Este enfoque simplifica operaciones que antes requerían métodos como concat(), Object.assign() o bucles explícitos. Veamos los casos más comunes donde el operador spread es útil.

Copiar arrays con el operador spread

Una tarea frecuente en JavaScript es crear una copia de un array sin modificar el original. El operador spread permite realizar esta operación de manera directa y legible. Por ejemplo, si tenemos un array de nombres y queremos duplicarlo, podemos usar el operador spread para lograrlo.

let nombresEstudiantes = ["Daniel", "Jane", "Joe"];
let nombresCopiados = [...nombresEstudiantes];
console.log(nombresCopiados);

["Daniel", "Jane", "Joe"]

Antes de ES6, esta operación requería un bucle o el método map() para copiar elementos uno por uno, lo que resultaba en un código más extenso.

let nombresEstudiantes = ["Daniel", "Jane", "Joe"];
let nombresCopiados = [];
nombresEstudiantes.map((nombre) => {
    nombresCopiados.push(nombre);
});
console.log(nombresCopiados);

["Daniel", "Jane", "Joe"]

El operador spread no solo reduce la cantidad de código, sino que también mejora la claridad, permitiendo a los desarrolladores centrarse en la lógica en lugar de la sintaxis.

Copiar objetos con el operador spread

De manera similar, el operador spread puede usarse para copiar propiedades de un objeto a otro, creando una copia superficial sin alterar el objeto original. Esto es especialmente útil cuando se trabaja con estructuras de datos complejas.

let usuario = { nombre: "John Doe", edad: 10 };
let usuarioCopiado = { ...usuario };
console.log(usuarioCopiado);

{ nombre: "John Doe", edad: 10 }

Antes de la introducción del operador spread, los desarrolladores usaban Object.assign() para lograr el mismo resultado, pero con una sintaxis menos intuitiva.

let usuario = { nombre: "John Doe", edad: 10 };
let usuarioCopiado = Object.assign({}, usuario);
console.log(usuarioCopiado);

{ nombre: "John Doe", edad: 10 }

El uso del operador spread para copiar objetos es más legible y se ha convertido en una práctica estándar en el desarrollo moderno de JavaScript.

Concatenar arrays con el operador spread

El operador spread también permite combinar múltiples arrays en uno solo de manera sencilla. Por ejemplo, si tenemos dos arrays de nombres y queremos unirlos, el operador spread nos permite hacerlo en una sola línea.

let nombresMasculinos = ["Daniel", "Peter", "Joe"];
let nombresFemeninos = ["Sandra", "Lucy", "Jane"];
let todosLosNombres = [...nombresMasculinos, ...nombresFemeninos];
console.log(todosLosNombres);

["Daniel", "Peter", "Joe", "Sandra", "Lucy", "Jane"]

Además, el operador spread permite combinar múltiples arrays y agregar elementos individuales en el proceso.

let nombresMasculinos = ["Daniel", "Peter", "Joe"];
let nombresFemeninos = ["Sandra", "Lucy", "Jane"];
let otrosNombres = ["Bill", "Jill"];
let masNombres = [
    ...otrosNombres,
    ...nombresFemeninos,
    ...nombresMasculinos,
    "Ben",
    "Fred",
];
console.log(masNombres);

["Bill", "Jill", "Sandra", "Lucy", "Jane", "Daniel", "Peter", "Joe", "Ben", "Fred"]

Antes de ES6, esta operación se realizaba con el método concat(), que requería una sintaxis más complicada y menos flexible.

let nombresMasculinos = ["Daniel", "Peter", "Joe"];
let nombresFemeninos = ["Sandra", "Lucy", "Jane"];
let otrosNombres = ["Bill", "Jill"];
let todosLosNombres = nombresFemeninos.concat(nombresMasculinos, otrosNombres);
console.log(todosLosNombres);

["Sandra", "Lucy", "Jane", "Daniel", "Peter", "Joe", "Bill", "Jill"]

El operador spread simplifica la concatenación y permite un enfoque más flexible al trabajar con múltiples arrays.

Concatenar objetos con el operador spread

De manera similar a los arrays, el operador spread permite combinar propiedades de múltiples objetos en uno solo. Esto es útil para crear objetos nuevos que combinen información de varias fuentes.

let nombreUsuario = { nombre: "John Doe" };
let sexoUsuario = { sexo: "Masculino" };
let usuario = { ...nombreUsuario, ...sexoUsuario };
console.log(usuario);

{ nombre: "John Doe", sexo: "Masculino" }

Es importante destacar que, si dos objetos tienen propiedades con el mismo nombre, la última propiedad en el orden del operador spread sobrescribirá las anteriores.

let nombreUsuario = { nombre: "John Doe" };
let sexoUsuario = { sexo: "Femenino", nombre: "Jane Doe" };
let usuario = { ...nombreUsuario, ...sexoUsuario };
console.log(usuario);

{ nombre: "Jane Doe", sexo: "Femenino" }

Este comportamiento permite un control preciso sobre cómo se combinan las propiedades, lo que hace que el operador spread sea una herramienta poderosa para manipular objetos.

Obtener elementos únicos con el operador spread y Set

Otro uso valioso del operador spread es en combinación con el objeto Set para eliminar duplicados de un array. Esto es particularmente útil cuando se trabaja con datos que pueden contener repeticiones.

let frutas = ["Mango", "Manzana", "Mango", "Banana", "Mango"];
let frutasUnicas = [...new Set(frutas)];
console.log(frutasUnicas);

["Mango", "Manzana", "Banana"]

El objeto Set elimina automáticamente los duplicados, y el operador spread convierte el resultado en un array, ofreciendo una solución elegante para obtener elementos únicos.

Pasar elementos de un array como argumentos de función

El operador spread también permite pasar los elementos de un array como argumentos individuales a una función. Esto es útil cuando una función espera argumentos separados, pero los datos están almacenados en un array.

let puntajes = [12, 33, 6];
const sumarTodo = (a, b, c) => {
    console.log(a + b + c);
};
sumarTodo(...puntajes);

Antes de ES6, esta tarea se realizaba con el método apply(), que era menos intuitivo y requería especificar el contexto (null en la mayoría de los casos).

let puntajes = [12, 33, 6];
const sumarTodo = (a, b, c) => {
    console.log(a + b + c);
};
sumarTodo.apply(null, puntajes);

El operador spread ofrece una alternativa más clara y directa para esta operación.

Dividir cadenas en caracteres con el operador spread

El operador spread también puede usarse para dividir una cadena en un array de caracteres, aprovechando que las cadenas son iterables en JavaScript.

let miCadena = "programacion";
const dividirCadena = [...miCadena];
console.log(dividirCadena);

["p", "r", "o", "g", "r", "a", "m", "a", "c", "i", "o", "n"]

Este enfoque es equivalente al método split(), pero ofrece una alternativa más consistente con la sintaxis del operador spread.

let miCadena = "programacion";
const dividirCadena = miCadena.split("");
console.log(dividirCadena);

["p", "r", "o", "g", "r", "a", "m", "a", "c", "i", "o", "n"]

El uso del operador spread para dividir cadenas es particularmente útil cuando se combina con otras operaciones de expansión.

Uso del operador rest en JavaScript

A diferencia del operador spread, que expande elementos, el operador rest agrupa múltiples argumentos en un solo array. Este operador es especialmente útil en funciones que necesitan manejar un número variable de argumentos.

Sintaxis del operador rest

El operador rest se utiliza en la definición de una función para recoger todos los argumentos restantes en un array. La sintaxis es la siguiente:

const funcion = (primero, ...resto) => {};

Por ejemplo, supongamos que queremos crear una función que multiplique los argumentos restantes por un valor inicial.

const multiplicarArgs = (multiplicador, ...otrosArgs) => {
    return otrosArgs.map((numero) => {
        return numero * multiplicador;
    });
};
let arregloMultiplicado = multiplicarArgs(6, 5, 7, 9);
console.log(arregloMultiplicado);

[30, 42, 54]

El operador rest permite acceder al primer argumento (multiplicador) y agrupar los demás (otrosArgs) en un array, facilitando su manipulación.

Ejemplo detallado del operador rest

Para entender mejor cómo funciona el operador rest, consideremos un ejemplo que muestra los valores de los argumentos.

const multiplicarArgs = (multiplicador, ...otrosArgs) => {
    console.log(multiplicador);
    console.log(otrosArgs);
};
multiplicarArgs(6, 5, 7, 9);

6
[5, 7, 9]

Es importante notar que el operador rest debe ser el último parámetro formal en la definición de la función. Si se coloca otro parámetro después, JavaScript arrojará un error.

const multiplicarArgs = (multiplicador, ...otrosArgs, ultimoNumero) => {
    console.log(ultimoNumero);
};
multiplicarArgs(6, 5, 7, 9);

Uncaught SyntaxError: Rest parameter must be last formal parameter

Esta restricción asegura que el operador rest capture todos los argumentos restantes de manera clara.

Diferencia entre los operadores spread y rest

Aunque los operadores spread y rest comparten la misma sintaxis (...), sus propósitos son opuestos. El operador spread expande elementos de un iterable en un nuevo receptor, mientras que el operador rest agrupa argumentos en un array dentro de una función. La clave para distinguirlos es el contexto: spread se usa para descomponer, y rest para recolectar.

Un ejemplo que ilustra esta diferencia es el siguiente:

const miFuncion = (nombre1, ...resto) => {
    console.log(nombre1);
    console.log(resto);
};
let nombres = ["John", "Jane", "John", "Joe", "Joel"];
miFuncion(...nombres);

John
["Jane", "John", "Joe", "Joel"]

En este caso, el operador spread expande el array nombres en argumentos individuales al llamar a la función, mientras que el operador rest agrupa los argumentos restantes en un array dentro de la función.

Conclusiones

El operador de tres puntos en JavaScript, introducido en ES6, es una característica poderosa que simplifica tareas comunes como copiar arrays y objetos, concatenar colecciones, pasar argumentos a funciones y manejar elementos únicos. Como operador spread, permite expandir elementos iterables de manera clara y concisa, reemplazando métodos más complejos como concat() o Object.assign(). Como operador rest, facilita el manejo de argumentos variables en funciones, agrupándolos en un array para su procesamiento. Al dominar estos operadores, los desarrolladores pueden escribir código más legible y eficiente, aprovechando al máximo las capacidades de JavaScript moderno. Los ejemplos proporcionados en este tutorial demuestran cómo integrar estas herramientas en proyectos reales, mejorando la productividad y la calidad del código.