How To Remove Duplicates In Array Using Javascript ES6
Tags: javascript, es6
Published: 2020-04-10 16:49:17

<!-- wp:paragraph -->
<p>In javascript programming there are number of ways to remove duplicates from array, But which is best and short it's hard to decide</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's discuss how to remove duplicates from array of primitives(like array of string, array of numbers) and array of non-primitives(like array of objects)</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Using indexOf method </h2>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const dataArr = &#91;'1','5','6','1','3','5','90','334'];

const resultArr = dataArr.filter((data,index)=>{
  return dataArr.indexOf(data) === index;
})

console.log(resultArr); //&#91;"1", "5", "6", "3", "90", "334"]</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>As we know, That filter method is used for filtering method from the array as per the given condition</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>dataArr.indexOf(data) === index</strong> , indexOf method always return first occurance </p>
<!-- /wp:paragraph -->

<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td>Data Array</td><td>position</td><td>indexOf</td><td>result</td></tr><tr><td>1</td><td>0</td><td>0</td><td>true</td></tr><tr><td>5</td><td>1</td><td>1</td><td>true</td></tr><tr><td>6</td><td>2</td><td>2</td><td>true</td></tr><tr><td>1</td><td>3</td><td>0</td><td>false</td></tr><tr><td>3</td><td>4</td><td>4</td><td>true</td></tr><tr><td>5</td><td>5</td><td>1</td><td>false</td></tr><tr><td> 90</td><td>6</td><td>6</td><td>true</td></tr><tr><td>334</td><td>7</td><td>7</td><td>true</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>The above table is the tabular structure of filter method where on the basis of the condition it filters element. As you can see indexOf always return the position of the first occurrence of an element, so when duplicate element comes then indexOf not returns the position of a current element it returns the position of the first occurrence of element.</p>
<!-- /wp:paragraph -->



<!-- wp:heading -->
<h2>Using Set</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set  </a>is an Object introduced in ES6, Used for storing collection of unique values</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const dataArr = &#91;'1','5','6','1','3','5','90','334','90'];

//creates  Set object from array of unique element
const dataArrWithSet = new Set(dataArr);


//we can create Set object to array also using spread operator
const resultArr = &#91;...dataArrWithSet];

console.log(resultArr); </code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Above method is my favorite, which require minimum line of code</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Using reduce</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">reduce </a>is a method of Array prototype which have reducer function which executes on each element and results in a single output value</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const dataArr = &#91;'1','5','6','1','3','5','90','334','90'];


const resultArr = dataArr.reduce((acc,item)=>{
      if(!acc.includes(item)){
        acc.push(item);
      }
    return acc;
},&#91;])

console.log(resultArr);//&#91;"1", "5", "6", "3", "90", "334"]</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In the above eg. acc is an accumulator which is initialized with an empty array and whatever reducer function returning result stored into the accumulator. But, before storing elements into the accumulator we are checking that element is already present or not, If the element not present in the accumulator then we are pushing elements into the accumulator. So, there are no chances of pushing duplicate elements into an accumulator. So at the final result, we will get a collection of unique elements</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Using forEach method</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>forEach is a method of Array prototype which used to iterate over elements of the array</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const dataArr = &#91;'1','5','6','1','3','5','90','334','90'];

const uniqueArr = &#91;];
dataArr.forEach((item)=>{
    //pushes only unique element
      if(!uniqueArr.includes(item)){
        uniqueArr.push(item);
      }
   
})

console.log(uniqueArr); //&#91;"1", "5", "6", "3", "90", "334"]</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In the above eg. In uniqueArr we only pushing item when the item is not already there.So, at last, we will get a collection of unique elements</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Removing duplicates from Array of objects</h2>
<!-- /wp:heading -->
[For full post click here](https://techboxweb.com/how-to-remove-duplicates-in-array-using-javascript-es6)