¿Cómo eliminar duplicados de un array en Javascript?

Existen varias maneras de eliminar elementos duplicados de un array en Javascript. En este artículo te muestro las formas más comunes.

Si lo que buscas es eliminar elementos de un array, aunque no necesariamente sean elementos duplicados, consulta nuestro artículo ¿Cómo eliminar un elemento de un array en JavaScript?

Eliminar elementos duplicados de un array con Set

La manera más sencilla y concisa de remover valores duplicados en un array o un arreglo es usando la estructura Set. 

Set fue introducido en ES6. Los objetos Set son colecciones de valores únicos. El objeto Set te permite almacenar valores únicos de cualquier tipo, ya sea valores primitivos o referencias a objetos. 

El constructor de Set crea objetos Set y te devuelve el nuevo objeto.

const numbers = [1, 2, 3, 4, 1, 2, 5, 6];

// Esto te devuelve un Set
const uniqueValuesSet = new Set(numbers);

// Si deseas convertir el Set en un Array
const uniqueValuesArray = [...uniqueValuesSet]; 

// Si deseas crear el Set y convertirlo en un Array
// en una sola línea
const mostConcise = [...new Set(numbers)];

Eliminar elementos duplicados en un array con filter

Aparte de utilizar filter, tendremos que utilizar indexOf. Para una explicación detallada, puedes encontrar un video donde explico como utilizar indexOf en YouTube: Array.indexOf con ejemplos.

En esta solución utilizaré funciones flecha. Si no estás familiarizado con las funciones flecha, en YouTube explico como trabajar con ellas en el video Funciones Flecha (arrow functions) en Javascript.

El método indexOf de Array te retorna el primer índice donde encuentra el valor que buscar. En concreto:

const numbers = [7, 8, 9, 1, 2, 9];

// nota que existen dos valores 9
// indexOf te retorna el índice del primero
numbers.indexOf(9);  // 👉 2

El método filter de Array te crea un nuevo array de elementos que pasaron la prueba de la función callback que le pasaste. En mi canal de YouTube publique un video para explicar cómo funciona filter, con ejemplos. 

A modo de ejemplo:

const numbers = [7, 8, 9, 1, 2, 8, 9];

// filter creará un nuevo array con los números que tienen un valor mayor a 5
const higherThanFive = numbers.filter((n) => {
  return n > 5;
});

console.log(higherThanFive); // 👉 [7, 8, 9, 8, 9]

El segundo parámetro de la función callback es el índice del elemento actual del array que está siendo procesado.

Así que, ¿cómo podemos utilizar filter e indexOf para borrar números duplicados?  

const numbers = [7, 8, 9, 1, 2, 8, 9];

const unique = numbers.filter((n, index) => numbers.indexOf(n) === index);

console.log(unique); // 👉 [7, 8, 9, 1, 2]

Explicación: cuando el índice no es igual al resultado de indexOf, el elemento actual es un duplicado. Recuerda, indexOf te devuelve el índice de la primera ocurrencia que encuentra. 

Para que quede claro, veamos la siguiente tabla. Identificamos el valor repetido cuando el índice del elemento no corresponde al resultado de indexOf. Analiza las filas donde la condición es false.

Eliminar elementos repetidos en un array con reduce

El método reduce ejecuta una función sobre cada elemento del arreglo y retorna un solo valor. Para una exposición sobre cómo funciona reduce consulta el artículo ¿Cómo se usa reduce en Javascript?

El método includes retorna true si encuentra el elemento en el array, de lo contrario, retorna false. Ejemplo sencillo del uso de includes:

[1, 2, 3, 4].includes(3) // 👉 true

[1, 2, 3, 4].includes(6) // 👉 false

Ahora si, utilizamos reduce e includes para detectar elementos duplicados. 

const numbers = [7, 8, 9, 1, 2, 8, 9];

const unique = numbers.reduce((accumulator, item) => {
  return accumulator.includes(item) ? accumulator : [...accumulator, item];
}, []);

O si no te gusta usar expresiones ternarias, a continuación te muestro una versión alternativa. 

const numbers = [7, 8, 9, 1, 2, 8, 9];

const unique = numbers.reduce((accumulator, item) => {
  if (!accumulator.includes(item)) {
    accumulator.push(item);
  }
  return accumulator;
}, []);

Usando forEach u otros bucles (loops)

Tal vez esta manera sea la más fácil de entender e implementar para los newbies. Puedes formular una variación de esta solución usando el for loop clásico.

const numbers = [7, 8, 9, 1, 2, 8, 9];

const unique = [];
numbers.forEach((item) => {
    if (!unique.includes(item)) {
      unique.push(item);
    }
})

console.log(unique); // 👉 [7, 8, 9, 1, 2];

Usando el método _.uniq de Lodash para quitar duplicados

Una manera facilísima de eliminar elementos repetidos de una matriz (array) es usando una librería como Lodash. Esta librería provee funciones útiles para manejar objetos, arrays, texto, valores numéricos y mucho más.

Después de descargar e instalar la biblioteca en tu proyecto, sería tan sencillo como lo siguiente:

const _ = require('lodash/core');

const numbers = [7, 8, 9, 1, 2, 8, 9];

const unique = _.uniq(numbers);

Pero claro, usar una biblioteca como Lodash tiene su “costo”. No me refiero a que cueste dinero, usarla es gratis. Quiero decir que tenemos que hacer un trade-off, recibiremos el provecho de utilizar la función _.uniq a cambio de tener una dependencia en nuestro proyecto.  

Si otras funciones de Lodash te serán útiles en un mismo proyecto, entonces tendrás que analizar si vale la pena tenerla como dependencia. Si la única función que planeabas utilizar es la de _.uniq, mi recomendación es que mejor no instales Lodash y que programes tu propia función.

Programa tu propia función para remover elementos repetidos

Podrías disponer de cualquiera de las soluciones arriba y envolverla en una función que tú diseñes. De este modo, contarás con tu propia función reutilizable. 

function removeDuplicates(arr) {
  const set = new Set(arr);
  
  return [...set];
}

const numbers = [7, 8, 9, 1, 2, 8, 9];

const unique = removeDuplicates(numbers);

Cuando programo funciones reutilizables que se estarán empleando en diferentes lugares de un proyecto, por lo general, las coloco en un archivo llamado utils.js.

Claro, si tienes un montón de este tipo de funciones reutilizables y deseas ser más específico, puedes tener más archivos con un nombre apropiado, como array.utils.js, string.utils.js, y así por el estilo.