Eliminating duplicates in an array

#javascript #indexof #map

Update: Thanks to Juliano Rodrigues's comment! A simpler way to eliminate duplicates in array is using Set()

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 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.

Note: Array of Stock Type is used for demonstration

Iterating over arrays of type.

Oops, metal and rock are duplicated.

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.

According to the MDN Web Docs

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.

Example of indexOf method from MDN Web Docs.

Here is my solution code and explanation.
All I did was added simple if statement with indexOf method.

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*

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.

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