Since 2015, JavaScript has improved immensely.
It’s much more pleasant to use it now than ever.
In this article, we’ll look at the core features of JavaScript.
From var to const/let
var is no longer the only keyword used to declare variables.
There’re the better alternatives which are let and const .
var is function scoped and can be hoisted.
This makes determining where a variable declared with var hard.
On the other than, determining where a variable declared with let or const is easy.
They’re both block-scoped, so we know they’re only available within a block.,
For instance, if we have:
var x = 100;
function foo(randomize) {
if (randomize) {
var x = Math.random();
return x;
}
return x;
}
foo(false);
Then we don’t know what x would be without looking at the each line.
On the other hand, if we have:
let x = 100;
function foo(randomize) {
if (randomize) {
let x = Math.random();
return x;
}
return x;
}
foo(false);
Then we know x on the outside has nothing to with x on the inside.
x outside the function is 100.
And x inside the function is the random number.
Therefore, we should declare variables with let or const .
If we don’t want to change the variable’s value after it’s declared, then we declare it with const .
We can’t blinding replace var with let or const .
We got to make sure the logic is still correct after replacement.
But from now in, we use const most of the time, let for variables that can change, and never use var .
IIFEs to blocks
To make private variables before ES6, we put them in IIFEs.
IIFEs stands for immediately invoked function expression.
It’s an expression that looks like:
(function() {
var foo = '...'
}());
We have a function that we wrap around parentheses and called.
tmp isn’t available outside the function.
With ES6, we can use blocks with let or const keywords to create private variables:
{
let foo = '..';
}
We created the variable foo which is only available inside the block.
Concatenating Strings to Template Literals
With ES6, we finally have template literals.
They let us interpolate expressions in our strings.
This is much better than concatenation since they’re easier to ready and debug.
For instance, instead of writing:
function getDimensions(width, height) {
console.log('width: ' + width + ', height: ' + height);
}
We write:
function getDimensions(width, height) {
console.log(`width: ${width}, height: ${height}`);
}
Multi-line Strings
We can make multiline strings easily with template literals.
We just have to put them in the string the way we want them.
For instance, instead of writing:
let html = '<!doctype html>\n' +
'<html>\n' +
'<head>\n' +
' <meta charset="UTF-8">\n' +
' <title></title>\n' +
'</head>\n' +
'<body>\n' +
'</body>\n' +
'</html>\n
We write:
let html = `
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
It’s much cleaner and we don’t have to do any concatenation anymore.
Conclusion
The core features of modern JavaScript are let , const and template strings.
