Maintainable JavaScript — Undefined, Arrays, and Objects

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

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 with some conventions for undefined .

Undefined

undefined is a value that’s often confused with null .

This is partly because null == undefined returns true .

However, they’re actually very different from each other.

Variables that haven’t been assigned a value have the initial value of undefined .

This means it’s waiting for a real value to be assigned to it.

If we have:

let animal;
console.log(animal === undefined);

Then the console log will log true .

undefined shouldn’t be used much in our code.

But we need to check for them so that we’ll avoid all sorts of runtime errors.

We often get things that are undefined .

Non-existent properties have value undefined .

Parameters that haven’t have an argument passed in for it is also undefined .

If we try to do something to something that’s undefined , then we’ll get an error.

Therefore, we need to check for them.

To check for undefined , we can use the typeof operator.

If something is undefined , typeof will return 'undefined' .

For example, we can write:

let animal;
console.log(typeof animal);

Then we get 'undefined’ logged.

We shouldn’t use it for assignments, but we should check for them.

Object Literals

Object literals is a popular way to create objects with a set of properties.

It’s shorter than using the Object constructor and does the same thing.

Therefore, we should use the object literal notation to create an object.

For example, instead of writing:

let book = new Object();
book.title = "javascript for beginners";
book.author = "jane smith";

We should write:

let book = {
  title: "javascript for beginners",
  author: "jane smith"
}

It’s shorter and cleaner.

We just specify all the properties and values in between the curly braces.

We include the opening curly brace in the first line.

The properties are indented one level.

And the closing brace is in its own line.

Most style guides and linters suggest this format.

Guides like the Google style guide, Airbnb, style guide, ESLint default rules, etc. all look for this style.

Array Literals

Like object literals, we don’t need the Array constructor to create arrays.

Instead, we use the array literal notation.

For instance, instead of writing:

let fruits = new Array("apple", "orange", "grape");
let numbers = new Array(1, 2, 3, 4);

We write:

let fruits = ["apple", "orange", "grape"];
let numbers = [1, 2, 3, 4];

It’s much shorter and does the same thing.

It’s widely used and it’s common in JavaScript.

The Array constructor also has 2 versions.

It returns an array with the arguments if we pass in multiple arguments.

If there’s only one argument and it’s a nonnegative integer, then it creates an array with the number of empty slots as indicated by the argument.

Therefore, it’s another reason to avoid the Array constructor.

Conclusion

We can work with undefined , objects and arrays in better ways.

Literals are better than constructors for arrays and objects.

The post Maintainable JavaScript — Undefined, Arrays, and Objects appeared first on The Web Dev.