Categories
Lodash

Learning JavaScript by Implementing Lodash Methods — Converting Objects

Spread the love

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 Lodash methods to convert objects.

toArray

The Lodash toArray method transforms a given value to an array.

For instance, we can implement as follows:

const toArray = val => {
  if (val instanceof String || typeof val === 'string') {
    return val.split('');
  } else if (val instanceof Object) {
    return Object.values(val)
  }
  return [];
}

In the code above, we checked if val is a string by using the instanceof operator for strings created with the String constructor and use the typeof operator to check for primitive strings.

Then we split the strings into with the split method in this case.

If val is an object, then we return the values with Object.values .

Otherwise, we return an empty array.

Then we can call it as follows:

console.log(toArray({
  'a': 1,
  'b': 2
}));

console.log(toArray('abc'));

console.log(toArray(1));

console.log(toArray(null));

The first call should return [1, 2] , the 2nd returns ['a', 'b', 'c'] , and the last 2 return an empty array.

toFinite

Lodash’s toFinite method converts values to finite values.

We can do that by checking for Infinity and -Infinity and then returning the finite values accordingly.

For instance, we can write the following function to do that:

const toFinite = (val) => {
  if (val === Infinity) {
    return Number.MAX_VALUE
  } else if (val === -Infinity) {
    return -Number.MAX_VALUE
  }
  return isNaN(val) ? 0 : +val;
}

In the code above, we checked if val is Infinity or -Infinity and return Number.MAX_VALUE and — Number.MAX_VALUE respectively.

Otherwise, we use the isNaN function to check is val can be converted to a number. The isNaN function tries to convert the argument into a number before checking if the converted value is NaN or not.

If it’s not NaN , then we return val converted to a number. Otherwise, we return 0.

Then we can call it as follows:

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

Then we get:

3.2
5e-324
1.7976931348623157e+308
3.2

from the console log output.

toInteger

Lodash’s toInteger method converted the given value to an integer.

We can implement our own toInteger function as follows:

const toInteger = (val) => {
  if (val === Infinity) {
    return Number.MAX_VALUE
  } else if (val === -Infinity) {
    return -Number.MAX_VALUE
  }
  return isNaN(val) ? 0 : Math.round(+val);
}

In the code above, we check if val is Infinity our -Infinity , then we return Number.MAX_VALUE and -Number.MAX_VALUE respectively.

Otherwise, we check if val can be converted to a number, and then call Math.round if the number can be converted to a number.

Then we can call it as follows:

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

We then get the following values logged for each function call:

3
0
1.7976931348623157e+308
3

toLength

The toLength method converts a number to an integer that’s suitable to be used as the length of an array-like object.

We can implement our own toLength method as follows:

const toLength = (val) => {
  if (val === Infinity || Math.round(+val) > 4294967295) {
    return 4294967295
  } else if (+val < 0) {
    return 0
  }
  return isNaN(val) ? 0 : Math.round(+val);
}

In the code above, we check that if val is Infinity or if the converted integer is bigger than 4294967295, which is the maximum length of an array.

If it is, then we return 4294967295. If val converted to a number if negative, then we return 0.

Otherwise, we call Math.round to round the converted number if the converted value is a number.

Then when we call it as follows:

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

We get the following values from the console log outputs:

3
0
4294967295
3

Conclusion

We can implement Lodash’s object conversion methods easily ourselves.

The toArray method can be implemented by splitting strings or getting the values of an object.

The toFinite method can be implemented by returning the biggest integer in JavaSscript if it’s Infinity and the negative of that if it’s -Infinity . Otherwise, if it’s a number, then we return the 0 if the value isn’t a number or the number itself if it can be converted into a number.

Likewise, the toLength method can implemented in a similar way except that instead of returning the largest integer for Infinity and negative of that for -Infinity , we return the maximum length of a JavaScript array for Infinity and 0 for -Infinity or any other negative number.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *