Converting Lodash's _.uniqBy() to native JavaScript

Question

Here in this snippet I am stuck with as in _.uniqBy(array, iteratee). This

• iteratee can be a function or a string at the same time
• Where to put the condition to check uniqueness on the property, because the iteratee function can be anything

var sourceArray = [ { id: 1, name: 'bob' },
  { id: 1, name: 'bill' },
  { id: 1, name: 'bill' } ,
  {id: 2,name: 'silly'},
  {id: 2,name: 'billy'}]

function uniqBy (inputArray, callback) {
  return inputArray.filter(callback)
}
var inputFunc = function (item) {
  return item.name
}

// var destArray = _.uniqBy(sourceArray,'name')

var destArray = uniqBy(sourceArray, inputFunc)
console.log('destArray', destArray)

What is the solution?

Adjoining

Check lodash.uniqBy() code – Gestapo

Yeah, have a look and see if the source code helps: github.com/lodash/lodash/blob/4.17.2/lodash.js#L8419 – Optometry

Answer 1

An ES6 uniqBy using Map with a complexity of O(n):

const uniqBy = (arr, predicate) => {
  const cb = typeof predicate === 'function' ? predicate : (o) => o[predicate];

  return [...arr.reduce((map, item) => {
    const key = (item === null || item === undefined) ?
      item : cb(item);

    map.has(key) || map.set(key, item);

    return map;
  }, new Map()).values()];
};

const sourceArray = [
  { id: 1, name: 'bob' },
  { id: 1, name: 'bill' },
  null,
  { id: 1, name: 'bill' } ,
  { id: 2,name: 'silly'},
  { id: 2,name: 'billy'},
  null,
  undefined
];

console.log('id string: ', uniqBy(sourceArray, 'id'));

console.log('name func: ', uniqBy(sourceArray, (o) => o.name));

Bobolink

When there is a Object/item with null or undefined it breaks. Lodash handles this differently. E.g: _.uniqBy([{ 'x': 1 }, null, { 'x': 1 }, { 'y': 1 }], 'x'). Results into: [Object{x: 1}, null] – Launceston

@M.Suurland - good catch. Updated answer to handle null and undefined values in the same way. – Bobolink

I like this implementation, but I keep getting ".slice() is not a function". Any ideas? – Naphthyl

My solution contain 0 uses of .slice() so I can't really help you with the :) – Bobolink

I'm running my code through Webpack via CreateReactApp, it must be using a polyfill for spread that uses slice. I posted a variation of your solution: https://mcmap.net/q/37120/-converting-lodash-39-s-_-uniqby-to-native-javascript (inline code doesn't work so well :) – Naphthyl

Is this faster than the Lodash version? Or is it pretty much the same thing? – Collop

Answer 2

I refactored ori-drori's solution and removed

1. undefined
2. null
3. extra numbers in the mixed array
4. return [] if the first parameter is not Array

const uniqBy = (arr, predicate) => {
  if (!Array.isArray(arr)) { return []; }

  const cb = typeof predicate === 'function' ? predicate : (o) => o[predicate];

  const pickedObjects = arr
    .filter(item => item)
    .reduce((map, item) => {
        const key = cb(item);

        if (!key) { return map; }

        return map.has(key) ? map : map.set(key, item);
    }, new Map())
    .values();

  return [...pickedObjects];
};

const a = [
  12,
  undefined,
  { id: 1, name: 'bob' },
  null,
  { id: 1, name: 'bill' },
  null,
  undefined
];

const b = [
  12,
  { id: 1, name: 'bob' },
  { id: 1, name: 'bill' },
];

uniqBy(a, 'name');
uniqBy(b, Math.floor);
uniqBy([2.1, 1.2, 2.3], Math.floor);

Rask

Answer 3

I'm running my code through Webpack via Create React App, it must be using a polyfill for spread that uses slice. Here's what I did instead, a variation of oridori's answer:

const uniqBy = (arr: any[], predicate: (item: any) => string) => {
  const cb = typeof predicate === 'function' ? predicate : (o) => o[predicate];
  const result = [];
  const map = new Map();

  arr.forEach((item) => {
    const key = (item === null || item === undefined) ? item : cb(item);

    if (!map.has(key)) {
      map.set(key, item);
      result.push(item);
    }
  });

  return result;
};

Naphthyl

Answer 4

For those looking for the one-line answer:

const inputArr = [
  { id: 1, name: { first: 'bob' } },
  { id: 1, name: { first: 'bill' } },
  { id: 1, name: { first: 'bill' } },
  { id: 1 },
  undefined,
  { id: 2, name: { first: 'silly' } },
  { id: 2, name: { first: 'billy' } }
]
var uniqBy = (arr, key) => {
  return Object.values([...arr].reverse().reduce((m, i) => {m[key.split('.').reduce((a, p) => a?.[p], i)] = i; return m;}, {}))
}
console.log(uniqBy(inputArr, 'id'))
console.log(uniqBy(inputArr, 'name.first'))

Tentacle

I went with this solution as it's the only one that worked with nested properties 🙂 One issue though, reverse function mutates the array, so you can't use a const to define the original array. A solution is to make a copy of the array before reversing it: [...arr].reverse() – Grados

Answer 5

You could use a sort ordered by name and a filter based on the neighborhood comparison like this:

var sourceArray = [ { id: 1, name: 'bob' },
  { id: 1, name: 'bill' },
  { id: 1, name: 'bill' } ,
  {id: 2,name: 'silly'},
  {id: 2,name: 'billy'}]

var uniqBy = (inputArray, callback) => inputArray.sort((a,b) => callback(a) > callback(b))
.filter((x,i,arr) => i === arr.length -1 ? true : callback(x) !== callback(arr[i+1]));
var inputFunc = item => item.name;


var destArray = uniqBy(sourceArray, inputFunc)
console.log('destArray', destArray)

Legator