Learning JavaScript by Implementing Lodash Methods — Transforming Objects

Lodash is a very useful utility library that lets us work with objects and arrays easily.

However, now that the JavaScript standard library is catching up to libraries such as Lodash, we can implement many of the functions in simple ways.

In this article, we’ll look at how to implement some object methods with plain JavaScript.

toPlainObject

The Lodash’s toPlainObject method converts an object to a plain object by merging in the inherited enumerable properties into the object itself.

We can implement it by using the Object.create method

Then we use the Object.getPrototypeOf method and then merge them into the object’s own properties.

For instance, we can implement it as follows:

const toPlainPObject = (obj) => {
  let plainObj = Object.create(null);
  plainObj = {
    ...obj
  };
  let prototype = Object.getPrototypeOf(obj)
  while (prototype) {
    plainObj = {
      ...plainObj,
      ...prototype
    }
    prototype = Object.getPrototypeOf(prototype)
  }
  return plainObj;
}

In the code above, we have our toPlainObject function, which takes the obj parameter containing the object that we want to convert to a plain object.

We then create a new object with Object.create with the argument null , which creates a plain object by creating an object without a prototype.

Then we use the spread operator to merge obj ‘s own properties into plainObj .

Next, we call Object.getPrototypeOf with obj passed in to get obj ‘s prototype. Then we use a while loop to merge the prototype’s properties into plainObj and go up the prototype chain with:

prototype = Object.getPrototypeOf(prototype)

In the end, we return plainObj .

Now when we call it as follows:

function Foo() {
  this.a = 1;
}

Foo.prototype.b = 2;
console.log(toPlainPObject(new Foo()));

We get the console log output is {a: 1, b: 2} .

toSafeInteger

Lodash’s toSafeInteger method converts a value to a safe integer. It does this by checking for Infinity and -Infinity and then return the maximum safe integer and the maximum safe integer multiplied by 1 respectively.

We can implement it as follows:

const toSafeInteger = val => {
  if (val === Infinity) {
    return Number.MAX_SAFE_INTEGER
  } else if (val === -Infinity) {
    return -1 * Number.MAX_SAFE_INTEGER
  }
  return isNaN(+val) ? 0 : Math.round(+val);
}

In the code above, we check if val is Infinity or -Infinity . If it’s Infinity , then we return Number.MAX_SAFE_INTEGER . If val is -Infinity , then we return -Number.MAX_SAFE_INTEGER .

Otherwise, we check if val can be converted to a number by calling isNaN . If it returns true then we return 0, otherwise, we call Math.round with +val after it’s converted to a number.

Then we can call it as follows:

console.log(toSafeInteger(3.2));
console.log(toSafeInteger(Number.MIN_VALUE));
console.log(toSafeInteger(Infinity));
console.log(toSafeInteger('3.2'));

Then we get the following output from each of the respectively:

3
0
9007199254740991
3

toString

Lodash’s toString method coverts a given value to a string. An empty string is returned for null and undefined values.

For instance, we can implement it as follows:

const toString = val => {
  if (Object.is(val, -0)) {
    return '-0'
  } else if (Object.is(val, +0)) {
    return '+0'
  } else if (Object.is(val, null) || Object.is(val, undefined)) {
    return ''
  } else if (Array.isArray(val)) {
    return val.join(',');
  }
  return JSON.stringify(val);
}

In the code above, we used Object.is to check whether val is one of the listed values. We use Object.is instead of === because -0 and +0 are considered different with Object.is .

If val isn’t -0 , +0 , null or undefined then we use JSON.stringify to convert the object to a string.

Then we can call it as follows:

console.log(toString(null));
console.log(toString(-0));
console.log(toString([1, 2, 3]));

Then we get an empty string from the first console log, '-0' from the 2nd console log and 1,2,3 from the last console log.

invert

The Lodash invert method flips the keys and values of an object. If 2 properties have the same value, then the later one overwrites the earlier one.

We can do that ourselves with the Object.keys method to get the keys to populate a new object with the keys and values inverted as follows:

const invert = (obj) => {
  let invertedObj = {};
  for (const key of Object.keys(obj)) {
    invertedObj[obj[key]] = key;
  }
  return invertedObj;
}

In the code above, we created the invertedObj object. Then we loop through the keys by getting them with the Object.keys method and then looping through them with the for...of loop.

Then we populate the values of obj as the keys of invertedobj and the keys of obj as the values of invertedObj .

In the end, when we call it as follows:

const object = {
  'a': 1,
  'b': 2,
  'c': 1
};

console.log(invert(object));

We get {1: “c”, 2: “b”} logged from the console log output.

Conclusion

To implement the toPlainObject method, we can use the Object.getPrototype method to traverse the prototype chain of an object.

The toString and toSafeInteger methods are similar in that they both do a series of checks on the argument passed in and then return some values accordingly.

Finally, we can use Object.keys to get the keys of an object to implement invert .