Maintainable JavaScript — Functions and Arrays

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by looking at how to check for functions, arrays, and bad ways to check for object properties.

Detecting Functions

Functions are reference types in JavaScript.

They’re created from the Function constructor of which each function is an instance.

There’s a bad way to check for a function.

We shouldn’t check for functions with the instanceof operator.

For instance, we shouldn’t write:

function func() {}

console.log(func instanceof Function);

to check for a function.

This isn’t good because it doesn’t work across frames since each frame have their own Function instance.

Instead, we should use the typeof operator.

So we should write:

function func() {}

console.log(typeof func === 'function');

typeof works across all frames.

Only IE8 or earlier have limitations with this, so we don’t have to worry about it.

Detecting Arrays

Arrays are also objects, so we can check for arrays with the instanceof operator.

For instance, we can write:

arr instanceof Array

But like any other uses of the instanceof operator, it won’t work across frames.

Another way that was recommended by Douglas Crockford was to check for array methods.

For instance, we can write;

function isArray(value) {
  return typeof value.sort === "function";
}

to check whether the sort method exists in the value object.

But anything can have the sort method so it’s probably not very accurate.

Another suggestion is to call the toString method on the value to see if it returns '[object Array]' .

So we can write:

function isArray(value) {
  return Object.prototype.toString.call(value) === "[object Array]";
}

This works across all frames and only arrays return this string, so this can be used to check for array.

However, now there’s a built-in way to check for arrays with the Array.isArray method.

For instance, we can write:

function isArray(value) {
  if (typeof Array.isArray === "function") {
    return Array.isArray(value);
  } else {
    return Object.prototype.toString.call(value) === "[object Array]";
  }
}

We check if Array.isArray exists by checking whether it’s a function.

Then we can call it to check if it’s an array.

Array.isArray works across all frames, so we can use it to check for arrays anywhere.

This is implemented in IE9, Firefox 4+, Chrome, Opera 10.5+, and Safari 5+.

This means that we can just use Array.isArray and forget about everything else.

Bad Ways of Detecting Properties

Detecting properties is another tricky issue we may run into.

There are a few bad ways to check for properties in an object.

They include:

if (object[propertyName]) {
  //...
}

if (object[propertyName] != null) {
  //...
}

if (object[propertyName] != undefined) {
  //...
}

All of them check for all falsy values, so they won’t work well for our needs.

Falsy values include 0, null , undefined , '' (empty string)m and false .

So those expressions will all be true if objec[propertyName] is any of those values.

Conclusion

We can check for arrays with Array.isArray .

And we shouldn’t check for all falsy values to check if an object property exists.

We can detect functions with the typeof operator.