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".
Feel free to leave a comment for any questions or corrections.
Resources:
Cover-Image:
https://hackernoon.com/when-code-duplication-is-acceptable-51ce33ecd0f5Code & Project Images:
My project code
Top comments (2)
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:
developer.mozilla.org/en-US/docs/W...
Thank you for your info!