About ES6(ECMAScript)
What is ES6?
ES6 refers EchmaScript. It is version 6 of JavaScript. It was released in 2015. ES6 is the first major update to the language since ES5 which was standardized in 2009.
Now let’s have a look at some major changes that ES6 brings to JavaScript.
1.Var Declaration
In the Case of var declaration in ES6, you can get the result only if you declare and initialize the variable before the console. For example,
var num;
num= 6;
console.log(num) //6
And If you console before the code, you will get the result undefined. For example,
console.log(num) //undefined
var num;
num= 6;
2.Block-level Declarations
Block-level declarations are not accessible outside of a declared block. Block scopes are created inside a function and/or inside of a block. This method usually used in association with if-else and for statements. For example,
function getValue(condition){
if(condition){
let value= ‘blue’
return value;
}
else{
return null
}
}
const result =getValue(true)
console.log(result) // ‘blue’
3. Block-binding in Loops
In ES6 block-level variables introduced as ‘let’ and ‘const’ identifiers. Those variables can be declared of a function or inside of any code block, for example, with an if-else statement or for-loop. If the ‘let’ variable is used inside of a code block and console it outside of the code block, the result will be an error. For example,
function numbers(){
for (let i = 0; I < 10; i++){
let element = 10;
}
console.log(element);
}
//error
Because this element variable in this case only belongs to the for-loop and can only use within that scope.
4. Global-block Bindings
ES6 variable ‘var’ and ‘const’ is different than the JS variable ‘var’. They work differently from global scope behavior. For example. if ‘var’ is used in the global scope, it can overwrite an existing global and create a new global variable in the window in browsers. But if ‘let’ and ‘const’ are used, they can not overwrite. This means, they can create a new binding but can not add any property to the global object(window in browsers). For example,
if ‘var’ is used,
var greetings = ‘Hello, good morning!’;
console.log(window.greetings) // ‘Hello, good morning!’
if ‘let’ is used,
let greetings = ‘Hello, good morning!’;
console.log(greetings) // ‘Hello, good morning!’
console.log(window.greetings === greetings) // false
5.Emerging Best Practices for Block Bindings
After ES6 developed, it is offered to be a best practice to use ‘let’ and ‘const’ instead of ‘var’. Variable ‘let’ can be used when the variable value may change and ‘const’ can be used when the variable may not change or default.
6.Functions with Default Parameter Values
In ES6 default parameter values can be passed when the function called, which was difficult before with ES5. For example,
function add(num1, num2 = 0){
return num1 +num2
}
console.log(add(2, 3)) // 5
console.log(add(2)) // 2
7.The Spread Operator
The spread operator allows an array to expand in places where arguments are expected. It is commonly used to make shallow copies of JS objects. Using this operator makes the code concise and enhance its readability. For example,
let array1= [21, 15, 30, 65];
let array2 =[ 7, 9, 10];
let combine =[40, …array1, 50, …array2]
console.log(combine) // [40, 21, 15, 30, 65, 50, 7, 9, 10]
8. Arrow Functions
In ES6 arrow function is used to write shorter syntax. For example,
(traditional function expression)
function add(a, b) {
return a * b
}
console.log(add (2, 5)) //10
(arrow function)
let add =(a, b) => a * b
console.log(add (2, 5)) //10