#unique values

uniqBy loops through a given array and makes it unique by checking the returned value. For example, it can be used to find non duplicate entries by the name property:

const cars = [ { name: 'miata', hp: 155, weight: 2400 }, { name: '4c', hp: 237, weight: 2465 }, { name: '4c', hp: 237, weight: 2465 }, { name: 'miata', hp: 155, weight: 2400 }, { name: 'elise', hp: 217, weight: 2000 }, { name: '4c', hp: 237, weight: 2465 }, ]; function uniqBy(arr, callback) { const mapObj = {}; const uniques = []; for (const ele of arr) { const result = callback(ele); if (mapObj[result] !== true) { mapObj[result] = true; uniques.push(ele); } } return uniques; } const uniqueCars = uniqBy(cars, (car) => car.name); console.log(uniqueCars); // [ { name: 'miata', hp: 155, weight: 2400 }, // { name: '4c', hp: 237, weight: 2465 }, // { name: 'elise', hp: 217, weight: 2000 } ]

This is more useful than a map of a single property since now whole objects can be used from that unique list. That uniqBy was just for demonstration purposes though. Most libraries will implement a more complete function. For example, the Lodash uniqBy contains alot of optimizations based on the size of the array and other data characteristics.

Sets allow you store unique values. So instead of filtering lists for duplicates, items can just be inserted into a set then extracted from. For example, to unify to sets of asynchronous data with no duplicates:

const getFastCars = function(callback) { // Simulate async API setTimeout(function() { callback([ { name: 'charger', hp: '707' }, { name: 'elise', hp: '217' }, ]); }, 500); } const getGoodHandlingCars = function(callback) { // Simulate async API setTimeout(function() { callback([ { name: 'miata', hp: '155' }, { name: 'elise', hp: '217' }, ]); }, 300); } const getGoodPerformanceCars = function(callback) { let totalResults = new Set(), totalCalls = 0; const onCallComplete = function(results) { results.forEach(function(result) { totalResults.add(result.name); }); totalCalls += 1; if (totalCalls >= 2) { // Note that Array.from has no IE support, only MS Edge callback(Array.from(totalResults)); } } getFastCars(onCallComplete); getGoodHandlingCars(onCallComplete); } getGoodPerformanceCars(function(results) { console.info(results); }); // [ 'miata', 'elise', 'charger' ]

Which requires much less setup to get the unique parts. Normally, some kind of map would have to be used, then its keys would have to be extracted.

Unfortunately, sets track uniqueness in objects by reference and not value. So just inserting objects will not ensure they have they are unique in most cases. But for primitives (like Number), they work very well.

The simplist way to make an array unique, is to transform it into a Set since all values in Sets are unique:

const arr = [1, 4, 10, 4, 4, 7, 8, 10]; const uniqueValues = Array.from(new Set(arr)); console.info(uniqueValues); // [ 1, 4, 10, 7, 8 ]

I found this technique from this Stack Overflow answer. Although this technique is inefficient, it is a quick way to get unique values of small arrays (e.g. less than 100 items). It also does not deal with objects like Date or custom objects when they are directly added to an array since Set only compares object references and not values for equality:

const objects = [ { property1: 'value1' }, { property2: 'value2' }, { property3: 'value3' }, { property1: 'value1' }, ]; const uniqueObjects = Array.from(new Set(objects)); console.info(uniqueObjects); // [ { property1: 'value1' }, // { property2: 'value2' }, // { property3: 'value3' }, // { property1: 'value1' } ]

Instead the objects need to be added by reference into an Array:

const obj1 = { property1: 'value1' }, obj2 = { property2: 'value2' }, obj3 = { property3: 'value3' }; const objects2 = [obj1, obj2, obj1, obj3]; const uniqueObjects2 = Array.from(new Set(objects2)); console.info(uniqueObjects2); // [ { property1: 'value1' }, // { property2: 'value2' }, // { property3: 'value3' } ]

In terms of a more efficient solution, it is better to rely on libraries. Lodash has a uniqBy function for this: https://lodash.com/docs/4.17.10#uniqBy