JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at what JavaScript features should be used to write our JavaScript apps.
Writing Blocked-Scoped Code
Keeping all our code in blocks and variables inside it within the block’s scope is important because it reduces lots of confusion when people are reading code.
If everything is block-scoped, then we know that everything inside a block can only be accessed within the block. Therefore, it’s impossible for anyone to assign values to a block-scoped variable outside the block.
This means that we should never use var , we should always use strict mode, and we should always use let and const to declare variables and constants respectively.
let and const are both block-scoped, so that they’re only available in the block that they’re declared in.
For instance, we can create a code block with let and const variables and constants as follows:
if (foo){
let x = 1;
}
In the code above, we have an if block with the variable declaration for x inside it.
When we try to reference it anywhere outside the if block, we’ll get an error since it’s not accessible outside the block. This rule never changes.
Unlike variables declared with var , there’s no hoisting, and it can’t be accessed outside the block.
var variables are accessible within the entire function, which is probably not what we want as it creates confusion on where we can reference it. Therefore, we shouldn’t use it.
Since ES2015, we can also define standalone code blocks in addition to if , switch , and functions.
This also limits the access of our variables and constants to that block if we use let and const to declare the variables and constants respectively.
For instance, we can do that as follows:
{
let x = 1;
const y = 2;
}
In the code above, we defined a block and then declared the x variable and y constant.
They can only be referenced inside the curly braces. This is much better than declaring a function and running it immediately since it’s less typing and we don’t have to declare another function unnecessarily.
const is different from let in that we can’t reassign something that’s declared with const . However, we can still modify the assigned object if we wish.
The Spread Operator
The spread operator, which is denoted by 3 periods, spreads array entries and object values to another array or object respectively.
This lets us create objects and arrays by merging one or more of them together.
We can also spread arrays into objects, which creates an object with the indexes of the original array as the keys and the corresponding entries as the values.
This is a quick and easy to understand method to merge multiple objects or arrays or make copies of them without writing any loops or anything more complex.
For instance, we can spread and object as follows:
const arr = [1, 2]
const obj = {
...arr
};
Then we get:
{
"0": 1,
"1": 2
}
as the value of obj as we expected.
Also, we can make a copy of an object as follows:
const obj = {
a: 1
};
const copy = {
...obj
};
In the code above, we used the spread operator to make a shallow copy of obj by using the spread operator to spread the entries into the copy object.
Then we should see the same keys and values in both constants, but when we log obj === copy , we’ll see that the expression returns false since the spread operator creates a copy instead of referencing the original object.
The spread operator is also very handy for merging objects and arrays into one.
For objects, we can write the following to combine multiple object’s own properties into one object as follows:
const obj1 = {
a: 1
};
const obj2 = {
b: 2,
a: 3
};
const merged = {
...obj1,
...obj2
}
In the code above, we merged obj1 and obj2 into a new object called merged using the spread operator. If 2 keys are the same, then the one that’s merged in later is kept.
Therefore, we see that merged is:
{
"a": 3,
"b": 2
}
We can also use that with arrays. All entries of the original array are kept. For instance, we can write:
const arr1 = [1, 2]
const arr2 = [3, 4, 5]
const merged = [...arr1, ...arr2]
Then merged is:
[
1,
2,
3,
4,
5
]
The spread operator is a short, less error-prone, and easy to understand method to copy and merge objects and arrays, so it should be used for such purpose instead of writing anything more complex.
Conclusion
Some of the best JavaScript features that are released in the last few years are block-scoped variables and constants and the spread operator.
Block-scoped variables and constants reduces the chance of error by creating variables and constants that are always block-scoped, so it’s harder for values to be changed unintentionally.
The spread operator lets us copy and merge objects and arrays in a more reliable way.
