DEV Community

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

Posted on β€’ Edited on

7 4

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

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

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!

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay