Learning JavaScript by Implementing Lodash Methods — Type Checks

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 Lodash methods for doing type checks.

isBoolean

The Lodash isBoolean method checks whether a value is a boolean.

We can easily check if a value is a boolean with the typeof operator. For instance, we can write the following code:

const isBoolean = val => typeof val === 'boolean'

In the code above, we just used the typeof operator to check is val is a boolean.

Then we can call it as follows:

const result = isBoolean(true);

result is true since true is a boolean. Otherwise, if we run:

const result = isBoolean(1);

We get that result is false since 1 isn’t a boolean.

isArrayBuffer

The Lodash isArrayBuffer checks if an object is an instance of the ArrayBuffer constructor. We can use the constructor.name property of an object to do that check.

Therefore, we can write our own function to do the same thing as follows:

const isArrayBuffer = val => val.constructor.name === 'ArrayBuffer'

In the code above, we just used the constructor.name property to check if an object is an instance of theArrayBuffer constructor.

We can also use the instanceof operator to check if val is an instance of the ArrayBuffer as follows:

const isArrayBuffer = val => val instanceof ArrayBuffer

Then we can call it as follows:

const result = isArrayBuffer(new ArrayBuffer());

and result should be true since it’s an instance of ArrayBuffer .

isArrayLike

The isArrayLike method checks if an object is an array-like object by checking if the length property exists and has a value that’s greater than or equal to 0 or less than or equal to Number.MAX_SAFE_INTEGER .

With these criteria, we can implement our own isArrayLike function as follows:

const isArrayLike = val => typeof val.length === 'number' && val.length >= 0 && val.length <= Number.MAX_SAFE_INTEGER

In the code above, we check if val.length is a number with the typeof operator. Then we check if val.length is between 0 and Number.MAX_SAFE_INTEGER .

Then if we run our isArrayLike function as follows:

const result = isArrayLike('foo');

We get that result is true since a string has a length property that’s between 0 and Number.MAX_SAFE_INTEGER .

On the other hand, if we call isArrayLike with 1 as follows:

const result = isArrayLike(1);

Then we get that result is false since 1 doesn’t have a length property.

isElement

The Lodash isElement method checks whether an object is an HTML element. Since all HTML elements are an instance of the HTMLElement constructor, we can use the instanceof operator to check if an object is an instance of that constructor as follows:

const isElement = obj => obj instanceof HTMLElement

In the code above, we check if obj is an element by checking if it’s an instance of HTMLElement .

Then when we run it as follows:

const result = isElement(document.body);

We get that result is true since document.body is an HTML element, which means that it’s an instance of the HTMLElement constructor.

On the other hand, if we call it as follows:

const result = isElement('foo');

Then we get that result is false because it’s not an HTMLElement object.

isEmpty

Lodash’s isEmpty method checks whether an object, collection, map, and set is an empty object.

Objects are empty if they have no enumerable own properties. Array-like values like arguments , arrays, strings, etc. are considered empty is the length is 0.

Maps and sets are considered empty if their length is 0.

With the conditions clearly defined, we can write our own function to do the isEmpty check.

We can implement our own isEmpty function as follows:

const isEmpty = obj => {
  if (typeof obj.length === 'number') {
    return obj.length === 0;
  } else if (obj instanceof Map || obj instanceof Set) {
    return obj.size === 0;
  } else {
    return Object.keys(obj).length === 0;
  }
}

In the code above, we check if the length property is a number to check whether obj is an array-like object. If it is, then we return obj.length === 0 .

If obj is an instance of the Map or Set constructor, we can check the size property instead of the length property.

Otherwise, we use Object.keys with obj as the argument and get the length property and check if it’s 0.

Then if we call it as follows:

const result = isEmpty('');

We get that result is true since an empty string has length 0.

Conclusion

We can do type checking of primitive values with the typeof operator. For objects, it’s better to use the instanceof operator to get the name of the constructor as a string.

To get the size of an array-like object, we use the length property. Otherwise, we use the size property for Map and Set instances.