Core features of next generation JavaScript: ES6 and ES7
Nowadays, programming languages evolve very quickly, with an overwhelming addition of new, ‘different looking’ features . As developers, it’s important for us to learn these features, as they allow us to do more powerful things.
Needless to say, JavaScript is amongst the front-runners in such evolution. Sometimes, JS looks like a new language altogether because of how quickly it evolves and the next generation features it uses. It is important for us to understand these features as they enable us to write robust and clean code.
Here are the core features of the next generation JavaScript in ES6 and ES7.
let and const (bye bye var)
var
is a way to create variable in JavaScript. Even to create constant we use var
in old version of JS.
ES6 has introduced two keywords let
and const
. (... var
still works fine, but you are highly encouraged to use let
and const
…)
let
and const
has block level scope while var
has function level scope.
Problem with var
: This example will show, why you should use let
not var.
function print() {
var a = 10;
if (true) {
var a = 20;
}
console.log(a); // this prints 20( not expected)
}
In the above code, you can find that when the variable is updated inside the if loop, the value of variable “a” is persisted to 20 globally, instead of 10.
Therefore, we have to be very careful in using this functionality, because there is a possibility of overriding an existing value.
However, when we use let
function (as seen below), the value of “a” is not overridden outside the block.
function print() {
let a = 10;
if (true) {
let a = 20;
}
console.log(a); // this prints 10( block level scope)
}
Arrow function
It is a way to create function in a shorter way, plus it will also solve issues which you have with this
keyword.
Sometimes, this
keyword does not refer to what you have expected, when you write your code.
However, when you write this
inside the Arrow function, it always keeps its context. There are no surprise changes in the context of this
during runtime.(see here)
arrow function
may look a bit strange, but it’s actually simple, and helps create function in a shorter way. Here’s an example:
Old way of writing function:
let print = function (name) {
console.log(name);
}
New way of writing function:
let print = (name) => {
console.log(name);
}
//it further can be condensed, if u have only one argument
let print = name => {
console.log(name);
}
If your function only returns some value, and nothing else, you can use just a one liner function. For example,
let multiply = (number) => {
return number*2;
}
// you can omit curly braces and return keyword
let multiply = (number) => number*2;
export and import
The idea behind import
and export
is that inside any JS file, we can import other JS files so that files know their dependency.
You have to use export
keyword to make functionality available to outside file.
There are two types of export; export default
and named export
. Here is an example:
Spread and Rest Operator
Actually it is just one operator ...
which acts as spread
or rest
depending on how we use it. Spread operator allows you to pull elements of an array or properties of an object.
Here is an example with an array:
const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5] // now [1, 2, 3, 4, 5]
And here’s an example with an object:
const oldObject={ name: 'Max'};
const newObject={...oldObject, age: 28 }; // {name: 'Max', age: 28}
Spread operator is very useful for cloning and copying array or object.
As both are reference type, copying them safely could be tricky. With spread operator, you have easy way to copy or clone object and array.
Rest Operator: It is used to merge a list of function arguments into array. Here is syntax for rest operator:
function sortArgs(...args) {
return args.sort();
}
As you can see, we use rest
operator for function arguments. In above code, sortArgs
receives unlimited arguments and all arguments would be merged in array. You can apply any function of array conveniently in this stored array.
Destructuring array and object
It allows us to easily extract array elements or object properties and store them in variable. It may sound same as spread operator, but it is different.
Spread takes out all array elements, or all object properties and distributes them in new array or object.
On the other hand, Destructuring
allows you to pull out a single element or a single object property and store them in variables.
//array destructuring
[a, b] = [6, 8]
console.log(a); // 6
console.log(b); // 8
//Object destructuring
{name} = {name: "Max", age: 25};
console.log(name); // max.
Destructuring is very useful when working with function arguments. Consider this example:
const printName = (personObj) => {
console.log(personObj.name);
}
printName({name: 'Max', age: 28});//prints'Max'
Here, we only want to print the name in the function, but we pass a complete person object to the function.
Of course this will create no issue as such, but it forces us to call personObj.name unnecessarily.
With destructuring, we can condense this code inside our function like this:
const printName = ({name}) => {
console.log(name);
}
printName({name: 'Max', age: 28});//prints'Max')
As you can see, we get the same result as before, but we don’t have to call personObj.name.
By destructuring, we simply pull out the property and store it in a variable / argument name, which we can then use in the function body.