Unique Javascript Array (Remove Duplicated Values)

Posted on February 19, 2018 by Dan Doicaru in jQuery/JavaScript Category with Hard Difficulty

So many tutorials up there, but not a single one pointing to a simple JavaScript Vanilla solution to filter an array from duplicates and get only the unique JavaScript array with different values.

In this tutorial I will show you how to extract an unique array from the original array with your numbers or strings (a list with names, shops, numbers etc.) using plain JavaScript, without complicated functions or jQuery.

Video Tutorial

Understanding the Objectives

Before writing the code, always analyze what you need to do first, using just words. As the title of the article states, we will need to extract all the unique values from an array, because arrays are the only special variables that can store multiple values.

For example, we will have a simple array of name lists:

var listArray = ["Dan", "John", "Richard", "Alex", "Richard", "Jack", "Jack"];

How Unique JavaScript Array Works

Each value of our array should be checked with each value of another array where the unique values should be stores.

If the current value does not exist in the other array with unique values, then add the new value there. Sounds pretty basic, but we will need extra help from another variables.

Declaring Variables

Because variables comes first when coding, we must declare all our variables that we use.

var listArray = ["Dan", "John", "Richard", "Alex", "Richard", "Jack", "Jack", "Ted", "John", "Dan"];
var uniquesArray = [];
var counting = 0;
var found = false;

The counting variable will be used to add the new unique value only once in the uniques JavaScript array to avoid duplication.

The found variable will be set to true if a duplicated value is found in the uniques array.

Looping Through Arrays

To check each value of our two arrays, we need to use the basic for statement function that JavaScript offers. First we need to loop the list array, to check each value if it exists in the uniques array.

for (i = 0; i < listArray.length; i++) {
	// loop the list array
}

While looping the list array, inside it, we need to loop again the uniques array to check the current value of the list array with all the items from the uniques array.

Then we need to check if the current value from the list array exists at least once in the unique JavaScript array.

for (y = 0; y < uniquesArray.length; y++) {
	if ( listArray[i] == uniquesArray[y] ) {
		found = true;
	}
}

If both items matches, we will set the "found" variable to true to know that we have a duplicated value.

Adding Data to the Unique JavaScript Array

After looping through our both arrays, is time to add the new value that doesn't exists in the uniques array, using the push() function, but only once.

To know if an item was recently added to a new array, we will use the "counting" variable and increment it after looping the unique JavaScript array.

counting++;
if (counting == 1 && found == false) {
	uniquesArray.push(listArray[i]);
}
found = false;
counting = 0;

We will need only one unique value to be added in the second array, so if the count was already incremented, you don't need to add any other value.

Therefore we will use an if statement to check if the current count is at 1 and the "found" variable is false, so we can push/add the new value to the uniques.

After all these statements, the two helper variables should be reset to normal, so the next item in the loop should have the same checks as others.

Final Code

I will attach the final code below so you can make an idea how the full code works.

var listArray = ["Dan", "John", "Richard", "Alex", "Richard", "Jack", "Jack", "Ted", "John", "Dan"];
var uniquesArray = [];
var counting = 0;
var found = false;

for (i = 0; i < listArray.length; i++) {
	for (y = 0; y < uniquesArray.length; y++) {
		if ( listArray[i] == uniquesArray[y] ) {
			found = true;
		}
	}
	counting++;
	if (counting == 1 && found == false) {
		uniquesArray.push(listArray[i]);
	}
	found = false;
	counting = 0;
}

Output

All unique values are stored in the uniquesArray variable. You can use console.log() function to debug your code and check the output of each array:

console.log(listArray);
console.log(uniquesArray);

This method may not be the fastest in terms of page rendering, but you will get a full browser support (even on Internet Explorer) which is the most important.

Works with numbers too, instead of strings. It will remove any duplicated number value.

Live Demo

Download

Buy me a coffe

If this tutorial was useful, you can help me maintain this website with more tutorials by buying me a coffe (or at least the sugar).

Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


× 7 = fifty six

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.