Like any kind of apps, JavaScript apps also have to be written well. Otherwise, we can 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.
Ternary Operator
The ternary lets us return expressions according to a condition. It takes 3 operands.
For instance, we can write:
const eating = true;
(eating) ? stop() : eat()
We check if eating is true and call stop() and return its value if it is. Otherwise, we call eat and return its value.
Logical Operators
JavaScript has a few logical operators. We have the and, or, and not operators. The and-operator returns true if both operands and true.
For instance, we write:
a && b > 10
It can also do checks on the first operand and evaluate the second operand if the first is truthy.
So we can write:
const color = dog && dog.color;
Then dog.color is evaluated only if dog is truth. The or operator returns true if at least one of the operands is true .
For instance, we can write:
a || b > 10
It’s also very useful for providing a default value. For example, we can write:
const color = dog.color || 'brown';
The expression evaluates dog.color and if it’s falsy, then 'brown' will be returned. The not operator is used to invert the value of a boolean.
For instance, we can write:
let foo = true
!foo
Then !foo is false since foo is true .
Return Values
Every JavaScript function returns a value. If a function doesn’t have an explicit return statement or have a return statement that doesn’t have an expression after it, then it returns undefined .
For instance, we can write:
const foo = () => {
return 'bar';
}
Then it returns 'bar' . A return statement can only return one value. If a function return arrays then we can use destructuring syntax to decompose the entries into variables.
For instance, we can write:
const foo = () => {
return ['james', 10];
}
const [name, age] = foo();
The returned array is decomposed into variables according to their position. Likewise, we can do the same thing if a function returns an object.
For instance, we can write:
const foo = () => {
return { name: 'james', age: 10 };
}
const { name, age } = foo();
This way we decompose the returned object into variables by their property names.
Spread Operator
The spread operator is used to expand an array, object, or string,
For instance, we can use it to spread array entries into another array:
const a = [1, 2, 3];
const b = [...a, 4, 5];
Then b os [1, 2, 3, 4, 5] .
We can copy an array by writing:
const copy = [...a];
It also works with objects, we can clone an object by writing:
const copyObj = { ...obj };
We can spread a string into an array of characters using the spread operator:
const hello = 'hello';
const arr = [...hello];
Then arr is [“h”, “e”, “l”, “l”, “o”] . The spread operator can also be used to spread an array.
For instance, we can write:
const foo = (a, b) => {};
const a = [1, 2];
foo(...a);
We spread the a array into the arguments of foo , so a is 1 and 1bis 2.
The rest operator lets us get the array entries that haven’t been spread by writing:
const nums = [1, 2, 3, 4, 5];
const [one, two, ...rest] = nums;
The one is 1, two is 2, and rest has an array with the remaining nums entries. Likewise, we can do the same with objects.
For instance, we can write:
const {
foo,
bar,
...others
} = {
foo: 1,
bar: 2,
a: 3,
b: 4,
baz: 5
}
We used the rest operator which has the object with the properties that haven’t been destructured. Also, we can use the spread operator to merge 2 objects together.
For instance, we can write:
const obj1 = {
name: 'james'
}
const obj2 = {
age: 15
}
const person = {...obj1, ...obj2 }
We combined obj1 and obj2 into a single person object using the spread operator.
Conclusion
There are many uses for the spread and rest operators with arrays and objects. The ternary operator can be used to replace short conditions. Functions always return some value either implicitly or explicitly.
