Hace poco, mientras optimizaba un proyecto personal, me topé con un bug curioso: un array con datos repetidos que desordenaba todo. Tras un par de pruebas, recordé que eliminar duplicados de un array en JavaScript tiene múltiples soluciones, cada una con sus ventajas.
Hoy te voy a contar cómo eliminar duplicados de un array en JavaScript usando seis enfoques prácticos. Te darás cuenta de cómo evitar esos valores repetidos que complican tus funciones.
6 Métodos para eliminar duplicados de un array en JavaScript
Usando Set: la solución rápida y moderna para eliminar duplicados de un array en JavaScript
Imagina que tienes una bolsa de canicas con varios colores repetidos. Un objeto Set sería como un niño que, al recogerlas, solo se queda con una de cada color. Set, introducido en ES6, almacena valores únicos y es perfecto para eliminar duplicados de un array en JavaScript, porque si intentas agregar un valor que ya existe en el Set, simplemente lo ignorará.
Te muestro cómo funciona:
const numbers = [10, 20, 10, 30, 40, 20];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [10, 20, 30, 40]
¿Cómo funciona?
- Creas un Set con el array original
Cuando haces new Set(numbers), el Set toma los valores del array y automáticamente descarta los duplicados. - Conviertes el Set de nuevo en un array
El Set en sí mismo no es un array, por lo que tienes que usar el operador spread (…) para expandir sus valores dentro de un nuevo array: […new Set(numbers)] Esto nos devuelve un array sin valores repetidos.
Ten en cuenta que es un método corto y eficiente, pero no te dejará manipular directamente los datos durante el proceso.
Combinando filter e indexOf: control paso a paso
Ahora, piensa en una fila de personas donde solo dejamos pasar a los que no han pasado antes. filter examina cada elemento, e indexOf le dice si ya ha visto ese valor antes.
const words = ['sol', 'luna', 'estrella', 'sol', 'planeta'];
const uniqueWords = words.filter((word, index) => words.indexOf(word) === index);
console.log(uniqueWords); // ['sol', 'luna', 'estrella', 'planeta']
Aunque es más largo, te permite añadir lógica extra durante el filtrado. Perfecto si necesitas más que solo eliminar duplicados de un array en JavaScript.
Con reduce e includes: acumulando sin repetir
reduce es como un recolector que va acumulando solo lo que no ha visto antes, usando includes para revisar su memoria.
const items = ['manzana', 'pera', 'manzana', 'uva', 'pera'];
const uniqueItems = items.reduce((acc, item) => {
if (!acc.includes(item)) acc.push(item);
return acc;
}, []);
console.log(uniqueItems); // ['manzana', 'pera', 'uva']
Este enfoque te da flexibilidad total para transformar los datos mientras eliminas duplicados, aunque puede ser menos eficiente en arrays muy grandes.
Usando forEach: clásico pero efectivo
forEach recorre tu array como un inspector que anota cada elemento único en su libreta.
const letters = ['a', 'b', 'a', 'c', 'b'];
const uniqueLetters = [];
letters.forEach((letter) => {
if (!uniqueLetters.includes(letter)) uniqueLetters.push(letter);
});
console.log(uniqueLetters); // ['a', 'b', 'c']
Este método es intuitivo, ideal si estás empezando con JavaScript, pero no es el más eficiente.
Con _.uniq de Lodash: la vía rápida con una librería
Lodash es como ese amigo que siempre tiene una herramienta perfecta para cada problema. Su función _.uniq elimina duplicados sin esfuerzo.
import _ from 'lodash';
const numbers = [1, 2, 2, 3, 4, 4];
console.log(_.uniq(numbers)); // [1, 2, 3, 4]
Aunque práctico, añadir Lodash solo por esta función puede ser excesivo si tu proyecto es pequeño.
Crea tu propia función: control total
A veces, crear tu propia herramienta es la mejor opción. Un par de líneas y tendrás una función reutilizable para cualquier proyecto.
function removeDuplicates(array) {
return [...new Set(array)];
}
const data = ['rojo', 'azul', 'rojo', 'verde'];
console.log(removeDuplicates(data)); // ['rojo', 'azul', 'verde']
Guarda esta función en un archivo utils.js y tendrás una solución a medida, sin dependencias externas.
Eliminar duplicados de un array en JavaScript sirve mucho para mantener tus datos limpios. Recuerda que cada método tiene su momento ideal según tu proyecto.
En el Bootcamp de Desarrollo Web de KeepCoding, aprenderás no solo a escribir buen código, sino a convertirte en un desarrollador web listo para cualquier reto. ¡Apúntate y transforma tu futuro en IT con nosotros!
