Better JavaScript — Arrays, Undefined and Conventions

Image for post
Image for post
Photo by Wonderlane on Unsplash

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at ways to improve our JavaScript code.

Use Array Methods on Array Like Iterable Objects

Array methods can be used on array-like iterable objects by using the spread operator.

For instance, we can write:

Then we return an array of DOM elements.

querySelector with a NodeList of DOM elements.

Then we used the spread operator to turn the array of elements into an array.

We can do the same thing with strings and other iterable objects.

If we have a non-iterable array object, then we can convert it to an array with the Array.from method.

For instance, we can write:

We have numeric indexes and the length property in the object so we can use Array.from to convert it to an array.

Prefer Array Literals to the Array Constructors

Array literals are shorter than using the Array constructor to create arrays.

So we should use the array literals to create our arrays.

We can write:

instead of:

There’re problems with the Array constructor.

If we have to make sure Array hasn’t been modified.

And if it has one argument, it works differently than if it has multiple arguments.

If it has one argument, then it creates an empty array with the given number of slots if the argument is a number.

If it has multiple arguments, then it creates an array with the arguments.

Maintain Consistent Conventions

When we create libraries, we should create interfaces with consistent conventions so we don’t have to look up the names all the time.

For instance, we create constructors with Pascal case names.

And we create functions, variables, and properties with camelCase names.

For function, if we have arguments, then they should have consistent types and order.

This way, we can predict the order and type and work faster.

Sticking to conventions reduces confusion and makes working with them more predictable since we don’t have to look up stuff all the time.

Treat undefined as No Value

undefined is a speicla value in JavaScript.

It means no specific value.

Unassigned values has value undefined .

So if we have:

then x is undefined .

If we have a return statement without a value, then it returns undefined .

So if we have:

Then f() returns undefined .

This is the same as:

And g() also returns undefined .

Function parameters that have bo argument passed into it is undefined .

For instance, if we have:

Then calling f without an argument would make x undefined .

Treating undefined as the absence of a value is convention established by the language.

Image for post
Image for post
Photo by Jossuha Théophile on Unsplash

Conclusion

Array-like objects can be converted to an array with the spread operator.

Also, APIs should have consistent interfaces and conventions.

And undefined should be treated as no value.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store