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:
const divs = [...document.querySelector('div')];
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:
const arrayLike = {
0: "a",
1: "b",
2: "c",
length: 3
};
const arr = Array.from(arrayLike);
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:
const a = [1, 2, 3, 4, 5];
instead of:
const a = new Array(1, 2, 3, 4, 5);
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:
let x;
then x is undefined .
If we have a return statement without a value, then it returns undefined .
So if we have:
function f() {
return;
}
Then f() returns undefined .
This is the same as:
function g() { }
And g() also returns undefined .
Function parameters that have bo argument passed into it is undefined .
For instance, if we have:
function f(x) {
return x;
}
Then calling f without an argument would make x undefined .
Treating undefined as the absence of a value is convention established by the language.
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.
