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 some tips we should follow to write JavaScript code faster and better.
Function Parameters
A JavaScript function can accept zero or more parameters.
For instance, we can write:
const foo = () => {
//...
}
or:
const bar = (a) => {
//...
}
or:
const baz = (a, b) => {
//...
}
Starting with ES6, we can set default values for parameters,
For instance, we can write:
const baz = (a = 1, b = 2) => {
//...
}
Then if we don’t pass in anything when we call baz then a is 1 and b is 2.
Since ES2018, trailing commas are allowed for function parameters.
This helps reduce bugs because of missing commas around parameters.
For instance, we can write:
const baz = (a = 1, b = 2,) => {
//...
}
We can also call a function with trailing commas:
baz(3, 4,)
Also, we can use the spread operator to spread array entries into arguments.
For instance, we can write:
const args = [2, 'foo'];
baz(...args);
We can also destructure object parameters into variables so that we don’t have to remember the order that arguments have to be passed in.
We can write:
const baz = ({ a = 1, b = 2 }) => {
//...
}
We destructure the properties into variables.
If the property isn’t set, then we set the default value given.
Switch Statements
An alternative to the if-else statements is to use the switch statement.
For instance, we can write:
switch(a) {
case 1:
//do something
break;
case 2:
//do something
break;
case 3:
//do something
break;
}
We check the value of a and then do something given those values.
We need a break statement at the end of each case so that the code below a matching case won’t run.
Alternatively, we can use return :
switch(a) {
case 1:
return 'foo';
case 2:
return 'bar';
case 3:
return 'baz';
}
Also, we can provide a default case which runs if none of the values of a matches.
For instance, we can write:
switch(a) {
case 1:
//do something
break;
case 2:
//do something
break;
case 3:
//do something
break;
default:
break;
}
if and else
The if statement makes a program run something if a condition is true .
For instance, the following always runs:
if (true) {
// do something
}
And this never runs:
if (false) {
// never runs
}
We can add an else block below an if block if we need to do something if a condition is false .
For instance, we can write:
if (foo) {
// do something
} else if (bar) {
// do something else
} else {
// fallback case
}
delete Operator
The delete operator lets us remove a property from an object.
For instance, we can write:
const dog = {
breed: 'chow chow',
color: 'brown'
}
Then we can remove the color property by writing:
delete dog.color;
We can also write:
delete dog['color'];
Converting to Strings
We can call the toString method on primitive values and objects to get the string representation of it.
Converting Number to String
To convert a number to a string, we can use the String function or the toString method.
For instance, we can write:
String(100);
which returns '100', or:
(100).toString();
which returns the same thing.
Convert Boolean to String
Likewise, we can use the String function or toString method to convert booleans to a string.
If we write:
String(true)
or:
true.toString()
we get true .
We can do the same with false .
Convert Date to String
The String function and toString method can also be used to convert Date instances to strings.
For instance, we can write:
String(new Date(2020, 0, 1))
Then we get:
"Wed Jan 01 2020 00:00:00 GMT-0800 (Pacific Standard Time)"
and we can do the same with toString :
(new Date(2020, 0, 1)).toString()
Converting Special Values to String
The String function can also convert null , undefined , or NaN to a string.
If we write:
String(null)
and we get 'null' .
If we write String(undefined) and we get 'undefined' .
String(NaN) returns ‘NaN' .
Conclusion
JavaScript functions can take zero or more function parameters.
We can set default values for them.
The delete operator can be used to remove a property.
