#compare objects in an array in javascript

const someObject = { 'foo': true, 'bar': false };

if you're familiar with any other programming languages, you might call this structure a dictionary, and think of it as it's own type compared to (for example) an array or a set.

but in JS, everything except the built-in primitives are objects:

typeof []; // => "object" typeof new Set(); // => "object" typeof document.createElement('div'); // => "object"

which leaves me with something to ponder...

what's the clearest way to communicate that I am specifically talking about an object that consists of just key-value pairs, and not another, fancier kind of object?

Bonus: what I think your answer says about you...

As of ES6, JavaScript now supports using computed property names directly in objects. When defining object properties with constants or variables, this can make code easier to read. To understand this, compare these 2 implementations of toObject:

function toObjectLong(key, value) { const obj = {}; obj[key] = value; return obj; } function toObject(key, value) { return { [key]: value }; } console.log(toObjectLong('hp', 100)); // { hp: 100 } console.log(toObject('hp', 100)); // { hp: 100 }

To see where this is useful, the above can be built upon. Below is a function that is given an array of array values and a list of keys. That way the property values do not have to be defined with the initial data. Which could be useful for UIs where users can give data custom property names:

function createCarsObj(cars, key1, key2) { const carObj = {}; for (let car of cars) { carObj[car[0]] = { [key1]: car[1], [key2]: car[2] }; } return carObj; } const carData = [ ['miata', 155, 2400], ['elise', 217, 2000], ['alfaromeo', 237, 2465] ]; console.log(createCarsObj(carData, 'hp', 'weight')); // { miata: { hp: 155, weight: 2400 }, // elise: { hp: 217, weight: 2000 }, // alfaromeo: { hp: 237, weight: 2465 } }

Filtering for unique values is a useful operation when processing lists of data that can more information than needed. Dealing with simple values like integers or strings, the process is quite obvious:

function unique(array) { const newArray = []; // A map cannot be used since there may be less items in the new array array.forEach(function(element) { let isDuplicate = false; for (let index = 0; index < newArray.length && isDuplicate === false; index += 1) { isDuplicate = element === newArray[index]; } if (isDuplicate === false) { newArray.push(element); } }); return newArray; } console.log(uniq([1, 2, 2, 3, 3, 4, 5])); // [ 1, 2, 3, 4, 5 ] console.log(uniq([5, 4, 5, 3, 2, 4, 1])); // [ 5, 4, 3, 2, 1 ] console.log(uniq(['test1', 'test1', 'test2'])); // [ 'test1', 'test2' ]

That function maintains the ordering of the original array and always uses the first unique value. Which is similar to (_.uniq from Lodash)[https://lodash.com/docs/4.17.4#uniq].

A very important note; An object key comparison cannot be used to simplify the above. Object keys are always stored as strings with anything being sent into a key being transformed into a string. Meaning objects with different references, but the same contents would be incorrectly labeled as duplicates. The Github source at the bottom of this post gives an example of this.

This basic unique will not handle more complex cases like when deep objects need to be compared on a single property, which is why it needs to be extended to support callbacks that determine uniqueness. For example, data is retrieved from a database that lists all cars and all thier versions, but only the unique car names need to be determined:

const cars = [ { name: 'miata', hp: '115' }, { name: 'miata', hp: '133' }, { name: 'elise', hp: '217' }, { name: 'miata', hp: '155' }, { name: 'elise', hp: '189' }, ]; const uniqueCars = unique(cars, function(carA, carB) { return carB !== undefined && carA.name === carB.name; }); console.log(uniqueCars); // [ { name: 'miata', hp: '115' }, // { name: 'elise', hp: '217' } ] The only part that changed in the original function was a check for if there is a callback: function unique(array, callback) { const newArray = []; const hasCallback = typeof callback === 'function'; // A map cannot be used since there may be less items in the new array array.forEach(function(element, index) { let isDuplicate = false; for (let index = 0; index < newArray.length && isDuplicate === false; index += 1) { if (hasCallback === true) { isDuplicate = callback(element, newArray[index]) === true; } else { isDuplicate = element === newArray[index]; } } if (isDuplicate === false) { newArray.push(element); } }); return newArray; }

This is similar to (_.uniqWith from Lodash)[https://lodash.com/docs/4.17.4#uniqWith]

In this part, we are going to see that how we can compare objects in an array. So we will create some arrays, and we will compare those arrays to eliminate duplicate values. And also we will compare objects which are present in these arrays, so we can get a duplicate free array. It is a little bit hard to compare objects in JavaScript if you are a learner, so we will try to understand the problem…