DEV Community

Cover image for When lodash is too much
David Lacarta
David Lacarta

Posted on

When lodash is too much

#javascript #lodash

It is not always necessary to use the well-known lodash utility library to do some basic operations with arrays and javascript objects.

Get safe object properties 

function isObject(object) {
  return object && typeof object === "object";
}
function hasKey(object, key) {
  return key in object;
}

function safe(object) {
  return new Proxy(object, {
    get: (target, name) => {
      if (!hasKey(target, name)) {
        return "undefined";
      }
      if (!isObject(target[name])) {
        return target[name];
      }
      return safe(target[name]);
    }
  });
}
Enter fullscreen mode Exit fullscreen mode

let's try... 

const objectDeep = { a: { b: "x" } };
console.log(objectDeep.a.b);
// x
console.log(objectDeep.c.d);
// TypeError: Cannot read property 'd' of undefined
console.log(safe(objectDeep).a.b);
// x
console.log(safe(objectDeep).c.d);
// undefined
Enter fullscreen mode Exit fullscreen mode

Get object's array unique 

function isEqual(objectA, objectB) {
  return JSON.stringify(objectA) === JSON.stringify(objectB);
}

function unique(array) {
  return array.reduce((uniqueArray, currentElement) => {
    const isDuplicated = uniqueArray.find(element =>
      isEqual(element, currentElement)
    );
    return isDuplicated ? uniqueArray : [...uniqueArray, currentElement];
  }, []);
}
Enter fullscreen mode Exit fullscreen mode

let's try... 

console.log(unique([{ a: "x" }, { a: "z" }, { a: "x" }]));
// [ { a: 'x' }, { a: 'z' } ]
Enter fullscreen mode Exit fullscreen mode

Get array one dimension less 

function flat(array) {
  return [].concat.apply([], array);
}
Enter fullscreen mode Exit fullscreen mode

let's try... 

console.log(flat([["a", "b"], ["c", "d"]]));
// [ 'a', 'b', 'c', 'd' ]
Enter fullscreen mode Exit fullscreen mode

Get clone object deep 

function cloneDeep(object) {
  return JSON.parse(JSON.stringify(object));
}
Enter fullscreen mode Exit fullscreen mode

let's try... 

const objectDeep = { a: { b: "x" } };

const objectDeepClonedAssign = Object.assign(objectDeep);
objectDeep.a.b = "assign";
console.log(objectDeep);
// { a: { b: "assign" } }
console.log(objectDeepClonedAssign);
// { a: { b: "assign" } }

const objectDeepCloned = cloneDeep(objectDeep);
objectDeep.a.b = "deep";
console.log(objectDeep);
// { a: { b: "deep" } }
console.log(objectDeepCloned);
// { a: { b: "assign" } }
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
anduser96 profile image
Andrei Gatej •

Thank you for sharing!

I'd like to point out a case when comparing 2 objects with JSON.stringify() could lead to unexpected results:

function isEqual(objectA, objectB) {
  return JSON.stringify(objectA) === JSON.stringify(objectB);
}

const a = { name: 'andrei', age: 18}
const b = { age: 18, name: 'andrei' }

console.log(isEqual(a,b)) // false
Enter fullscreen mode Exit fullscreen mode

As far as I can understand, the order matters.
I didn't know about this a while ago, so I thought it was worth sharing.

Collapse
 
briancodes profile image
Brian •

That's really one of the main reasons to use a utility library like lodash - there are a multitude of edge-cases that have been identified and fix over the years

Collapse
 
davidlacarta profile image
David Lacarta •

Thank you for point out it!

Read next

hitesh_developer profile image

Angular vs Next.js: A Detailed Comparison

Hitesh Chauhan -

abhay_yt_52a8e72b213be229 profile image

Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Mastering MobX: Simplified and Reactive State Management for React

Abhay Singh Kathayat -

prince_beec5ccde00b7c6c73 profile image

Toggle Switch Realistic illusion using the core html and core Css Code

Prince -