JavaScript Best Practices for Writing More Robust Code — Removing Duplicates and Merging Arrays
Tags: javascript, codenewbie, codequality, webdev
Published: 2020-07-18 21:10:05

---
title: JavaScript Best Practices for Writing More Robust Code — Removing Duplicates and Merging Arrays
published: true
date: 2020-07-18 20:13:59 UTC
tags: javascript,codenewbie,codequality,webdev
canonical_url: https://thewebdev.info/2020/07/18/javascript-best-practices-for-writing-more-robust-code%e2%80%8a-%e2%80%8aremoving-duplicates-and-merging-arrays/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-best-practices-for-writing-more-robust-code%25e2%2580%258a-%25e2%2580%258aremoving-duplicates-and-merging-arrays
---

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.

In this article, we’ll look at how to remove duplicate items from an array in a reliable way.

### Sets

We can use the JavaScript `Set` constructor to create sets, which are objects that can’t have duplicate items included.

Duplicate items are determined in a similar way to the `===` operator, but we -0 and +0 are considered to be different values.

`NaN` is also considered to the be same as itself for the purpose of determining duplicate items for `Set` s.

We can create a set from an array as follows:

```
const set = new Set([1, 2, 3, 3]);

```

Then we have `Set` instance that has 1, 2 and 3 as the value of `set` .

Since a `Set` is an iterable object, we can use the spread operator to convert it back to an array as follows:

```
const noDup = [...set];

```

As we can see, it’s very easy to convert a `Set` back to an array.

Since the algorithm for determining duplicates is determined in a similar way to the `===` operator, it works well for removing duplicate primitive values.

However, it doesn’t work well for objects unless they reference the same item in memory.

If we have objects, then the most reliable way to remove duplicates is to convert them to strings and then parse them back to objects.

For instance, if we have the following array:

```
const arr = [{
  a: 1
}, {
  a: 1
}];

```

Then we can write the following code to map the array to a string, turn it to a `Set` , then we can parse the remaining items back to objects as follows:

```
const set = new Set(arr.map(a => JSON.stringify(a)));
const noDup = [...set].map(a => JSON.parse(a));

```

In the code above, we have a `Set` , which is created from array entries that are stringified with `JSON.stringify` .

Then we use the spread operator to spread the `set` back to an array and then map the stringified entries back to objects with `JSON.parse` .

This works well for plain objects that have no methods in them.

If our objects have methods, then we should make sure that each entry reference the same object.

`Set` s also have methods to make traversing them easier. There’s the `entries` method to get all the entries as an iterator that returned each entry as an array with the `[key, value]` structure.

`forEach` takes a callback to loop through them. The `keys` and `values` methods let us get the keys and values respectively.

The `clear` method removes all items from a set.

It also has the `size` property to get the size of the `Set` .

### Using the Spread Operator

The spread operator is one of the most useful features that are added recently to JavaScript.

When it’s used with arrays, it can let us make copies of arrays or merge them without calling any methods. This makes our code short and easy to read.

We just put everything in an array with the spread operator and then we get a new array with new items.

Also, it lets us combine items from different kinds of iterable objects into one array.

For instance, we can use the spread operator with multiple arrays as follows:

```
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const arr = [...arr1, ...arr2];

```

Then we get that the value of `arr` is `[1, 2, 3, 4, 5]` .

As we can see, the items are added in order into the new array with the spread operator.

Since the spread operator works with different kinds of iterable object, we can spread `Map` s and `Set` s into arrays as well:

```
const arr1 = [1, 2, 3];
const set = new Set([4, 5]);
const map = new Map();
map.set('a', 1);
map.set('b', 2);
const arr = [...arr1, ...set, ...map];

```

Then we get that `arr` is:

```
[
  1,
  2,
  3,
  4,
  5,
  [
    "a",
    1
  ],
  [
    "b",
    2
  ]
]

```

The `Map` s are converted to an array with entries that are an array of `key` and `value` .

### Conclusion

`Set` s are useful for removing duplicate items from arrays. They can also be converted or merged into arrays.

We can also merge multiple kinds of iterable objects into an array with the spread operator.

The post [JavaScript Best Practices for Writing More Robust Code — Removing Duplicates and Merging Arrays](https://thewebdev.info/2020/07/18/javascript-best-practices-for-writing-more-robust-code%e2%80%8a-%e2%80%8aremoving-duplicates-and-merging-arrays/) appeared first on [The Web Dev](https://thewebdev.info).