DEV Community

Cover image for Eliminating duplicates in an array
Jack Kim
Jack Kim

Posted on • Updated on

Eliminating duplicates in an array

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

Mapping array of typesIterating over arrays of type.

Duplicated typesOops, 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.

IndexOf example from MDN Example of indexOf method from MDN Web Docs.

Here is my solution code and explanation.
Solution 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*
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
jsrodrigues89 profile image
Juliano Rodrigues

You can use Set to do it for you instead of having to add an if statement since creates unique values to your array/object:

types = [...new Set(types)]
Enter fullscreen mode Exit fullscreen mode

developer.mozilla.org/en-US/docs/W...

Collapse
 
jmjkim profile image
Jack Kim • Edited

Thank you for your info!