# Remover elementos duplicados en un array



En este tutorial, aprenderás tres maneras de filtrar elementos duplicados en un array y obtener uno nuevo con valores únicos.

## Usando Set

Este método es mi favorito por su simpleza y el poco espacio que necesita. 😁


```js
const animals = ['🐶', '🐭', '🐭', '🦊', '🐻', '🦁', '🐶']

const uniqueAnimals = [...new Set(animals)] 
// [ '🐶', '🐭', '🦊', '🐻', '🦁' ]
```

Un [Set](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Set) es una colección de elemento únicos

Cuando un nuevo Set se crea a través de un Array que contiene elementos duplicados, el constructor se encarga de mantener solo los elementos únicos.

```js
const uniqueAnimals = new Set(animals) // Set(5) {'🐶','🐭','🦊','🐻','🦁', __proto__}
```

Gracias al spread operator podemos convertir los elementos de nuestro Set a un Array de nuevo.

```js
[...new Set(animals)] // [ '🐶', '🐭', '🦊', '🐻', '🦁' ]
```

## Usando filter e indexOf()


```js
const animals = ['🐶', '🐭', '🐭', '🦊', '🐻', '🦁', '🐶']

const uniqueAnimals = animals.filter(
  (animal, index) => animals.indexOf(animal) === index
) 
// [ '🐶', '🐭', '🦊', '🐻', '🦁' ]
```

El método filter devuelve un nuevo Array con los valores que cumplen con un criterio

```js
const uniqueAnimals = animals.filter(animal => animal === '🦊') 
// [ '🦊' ]
```

El método indexOf nos devuelve el primer índice en el que se puede encontrar el elemento dado.

```js
const uniqueAnimals = animals.indexOf('🦊') 
// 3
```

Combinando estos dos métodos, cuando un elemento duplicado es encontrado por primera vez, su índice coincide con la primera ocurrencia y el elemento es agregado a nuestro array. Al contrario de los siguientes índices del mismo elemento que no cumplirán con el índice de la primera ocurrencia, por lo tanto no cumplen con el criterio y no son devueltos.

## Usando forEach e includes

```js 
const animals = ['🐶', '🐭', '🐭', '🦊', '🐻', '🦁', '🐶']

const uniqueAnimals = []
animals.forEach(animal => !uniqueAnimals.includes(animal) && uniqueAnimals.push(animal))
// [ '🐶', '🐭', '🦊', '🐻', '🦁' ]
```

ForEach nos permite recorrer el arreglo del principio a fin.

El método includes determina si un array incluye un elemento determinado

```js
animals.includes('🐭') // true
animals.includes('🐸') // false
```

A medida que recorremos nuestro array animals, comprobamos si el elemento existe en nuestro nuevo array para determinar si debemos agregarlo o no.  ¡Al final dispondremos de un nuevo array con animales únicos!