Some ES6 things in JavaScripts!
What is ES6?
ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript, and version 6 is the next version after version 5, which was released in 2011. It is a major enhancement to the JavaScript language and adds many more features intended to make large-scale software development easier. ECMAScript, or ES6, was published in June 2015. It was subsequently renamed ECMAScript 2015. Web browser support for the full language is not yet complete, though major portions are supported. Major web browsers support some features of ES6. However, it is possible to use software known as a transpiler to convert ES6 code into ES5, which is better supported on most browsers.
Immediately Invoked Function Expression (IIFE)
It is a JavaScript function that runs as soon as it defined. An IIFE (Immediately Invoked Function Expression) can be used for avoiding the variable hoisting from within the blocks. It allows the public access to methods while retaining the privacy for variables defined in the function.
IIFE is a design pattern that is also known as the Self-Executing Anonymous Function. It contains two major parts:
- The first part is the anonymous function having a lexical scope, which is enclosed within the Grouping operator ().
- The second part creates the IIFE by which the JavaScript engine will interpret the function directly.
Syntax:
(function ()
{
statements
})();
// Syntax of IIFE with ES6 arrow functions (though parentheses only allowed on outside)
(() => { /* … */ })();
Block Binding
The variable declaration is a tricky thing in all programming languages.in most other language variables are created at the spot where the declared variable occurs. In JavaScript, variables are actually created depends on how we declare them. And then ES6 makes it easier for us
Var Declarations and Hoisting
Var declaration is acted like if they are hoisted to the top of the function or the global scope, and they act as if they are outside of a function
Example :
function newSection(condition){
var food
if(condition){
name=’Burger’
console.log(name)
}
else{
Here we see that the function called at the start point of the code. But we can access the name variable from everywhere. ES6 introduces us to clock-level declarations like let and const
Block-Level Declarations
Block-level declaration occurs in two steps, they are :
- Inside of a function
- Inside of a block
let Declarations
The let declaration syntax is the same as the syntax for var. You can basically replace var with let to declare a variable, but the limit is only the current code block.
Example:
function getRoll(condition) {
if (condition) {
let value = “eleven”;// other code
return value;
} else {// value doesn’t exist here
return null;
}// value doesn’t exist here
}
const Declarations
When we declared a variable with const .then we can't change this value the second time that means this is value is never a change in the future ..like it is a constant value.
Example:
const pi = 3.14;
pi = 5; // error
This thing is to make an error .because the const is never changed.
Block Binding in Loops
for (var i=0; i < 10; i++) {
process(items[i]);
}
// i is still accessible here
console.log(i);
Here i is accessible here because, In JavaScript, the variable i is still accessible after the loop is completed because the var declaration gets hoisted.
for (let i=0; i < 10; i++) {
process(items[i]);
}
// i is not accessible here - throws an error
console.log(i);
In this example, the variable i only exists within the for loop. Once the loop is complete, the variable is destroyed and is no longer accessible elsewhere.
Emerging Best Practices for Block Bindings
Before the ES6 development, there was a belief you should use let by default instead of var for variable declarations in JavaScript. when the ES6 const arrived in JS the developer thing that is needed for modification protection
Then the developers are willing to use let and const. And not use the var to declared the variable .because they should not change their value after initializing them. This idea has a significant amount of traction and is worth exploring in your code as you adopt ECMAScript 6.
Default function parameters
this type of parameter is named with a default value. If there is no value then the value is undefined
Example:
function multiply(a, b = 6) {
return a * b;
}console.log(multiply(5, 6));
console.log(multiply(9));
OutPut: 30 and 54
JavaScript Spread Operator
var newValue = […value];
here the syntax operator is “…”
this is a syntax operator .that means it will target all value of the previous “value”, When … occurs in the function call or alike, it's called a spread operator. Spread operator can be used in many cases, like when we want to expand, copy, concat, with math object
Arrow Function
An arrow function is a compact alternative to a normal function, but it is limited and can’t be used in all situations.it does not have any arguments or new.target keyword.it can not be used as a constructor.
Example:
hello = () => {
return “Hello World!”;
}
Coding Style
The coding style should depend on the script of code. There is a coding style that we must follow —
Curly Brace is not needed, beginners sometimes do that
Line length is more important to write some code because no one like to read big horizontal code .you have to split it to user-friendly
use ESlints for better code expression.
Comments
An important sign of a good developer comment: their presence and even their absence.
Good comments allow us to maintain the code well, come back to it after a delay and use it more effectively.
When we comment on any code —
When there is the use of some function and define the overall structure, to give up the main high-level view we can comment out …and also when an important solution occurs then we should comment out some code
When we don't comment to any code —
To give a description like how the code works and how does the code is, we try to not comment out on these types of codes.
To explore more about ES6. Search on Google.