Eliminating duplicates in an array
Tags: javascript, indexof, map
Published: 2022-06-07 01:55:48

**Update:** Thanks to _Juliano Rodrigues_'s comment! A simpler way to eliminate duplicates in array is using [Set()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
<br>

For my second software engineering project at Flatiron School, I created an **Inventory Manager** application. The application handles basic CRUD functions on registered stocks or add new stock. Some other small features included such as searching stocks by its ID or filtering stock list by stock type or supplier. Click [here](https://github.com/jmjkim/fisphase2-project) to check out project code.

One day, I was working on the dropdown format filter bar for the project and I wanted to create filtering options. I used `map` method to grab the stock types and suppliers but then I  encountered a minor problem. 
<br>


**Note: Array of Stock Type is used for demonstration** 
<br>


![Mapping array of types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l56i3kkjldrobnhc3j9b.png)Iterating over arrays of type.
<br>


![Duplicated types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qze591qz75q80wd4qk2k.png)Oops, metal and rock are duplicated.
<br>


I forgot about that some of stock types had duplicated values. What I needed to do was eliminate these duplicates from the array.

After researching for a while, I found a way that easily solved my problem by using `indexOf` method.
<br>


According to the [**MDN Web Docs**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
> The indexOf() method returns the **first index** at which a **given element can be found in the array**, or -1 if it is not present.

![IndexOf example from MDN](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl8tsfr7wxk1fi7f5r0g.png) Example of `indexOf` method from MDN Web Docs.
<br>


Here is my solution code and explanation.
![Solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh9e0em99bctrof5jtw8.png) All I did was added simple `if statement` with `indexOf` method.
<br>


Here, I made a simple chart to compare index vs indexOf values. On the left side is returned index values of `types.map((type, index) => {..if statement..})`. On the right side is returned values of `types.indexOf(type)` inside `if statement`.

```
Type   index value   /   Type      indexOf value
      
wood        0            wood             0
metal       1            metal            1*
rock        2            rock             2*
misc        3            misc             3
Protection  4            Protection       4
rock        5            rock             2*
gold        6            gold             6
metal       7            metal            1*
```
<br>


Looking back at the `indexOf` **MDN Web Docs** definition,
> The indexOf() method returns the **first index** at which a **given element** can be found in the array

just like the definition, on the chart _metal_ and _rock_ under the **indexOf value** has the "_first index returned_" value after being iterated by type.
<br>

Think like this, `indexOf` method will iterate an array and will return the "first" initialized index value. Hence, `indexOf` values for the _metal_ and _rock_ has the same "first" index value as when it gets first "index spotted".


![No more duplicates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lswh598ycieocj7spanv.png)No more duplicates


Feel free to leave a comment for any questions or corrections.


**Resources:**

1. _Cover-Image_:
https://hackernoon.com/when-code-duplication-is-acceptable-51ce33ecd0f5

2. _Code & Project Images_:
My project code