This article will be explaining some ES6-specific features which you can actually use or using in your day-to-day life.
Let & Const
As Js already has some reputation for being complicated language so I will try to explain the different types of keywords we used for variable declaration first & why use one over another.
So in ES6, ECMAScript Introduces Let & Const keywords for defining variables.
First, we have to understand the different types of scoping in JS. We have three variations here
Block Scope: This scope restricts the variable that is declared inside a specific block,(if else, switch, loops) from access by the outside of the block.
Functional Scope: When a variable is declared inside a function, it is only accessible within that function and cannot be used outside that function.
Global Scope: As the name suggests, all variables declared in this scope can be accessed globally without restriction.
Declaring variables with 'Let' & 'const' keywords, facilitates the variables to be block scoped.
Variables declared with the var keyword, do not have block scope.(Global)
If you declare a variable using let/const within block means an if-else statement or switch statement or loops, then that variable becomes blocked scoped. But if you declare the same variable within a function that makes it function-scoped.
Then comes Const, as the name suggests this keyword we use to make variable constant so we or the program itself doesn't change the value of that variable accidentally. Const is also a blocked scope variable as mentioned before.
Const is also mutable
But declaring variables with const, we have one caveat i.e const is mutable. So if you are declaring an array or object using const we will be able to modify the content within. But how's that even possible when const only works to prevent mutation? Actually, const does prevent modification by creating a read-only reference to a value. It does not mean the value it holds is immutable—just that the variable identifier cannot be reassigned means you can't reinitialize the whole array/obj.
Arrow Functions
ES6 introduced a new way of declaring functions. First, we will see what a normal function looks like & then we will convert it to an arrow function so you can do it too.
function traditionalFunction(name) {
console.log(`Hello Developer, ${name} !!!`);
}
traditionalFunction('Abhisekh');
Arrow Function :
const arrowFunction = (name) => {
console.log(`Hello Developer, ${name} !!!`);
};
arrowFunction('Abhisekh');
Arrow some new differences with normal functions which you may like
if you are taking one argument in your function then you don't need to include (). (It makes the code looks nice IMO). You only need to add parenthesis when you are working with more than one argument.
if your function doing one-liner work & returning the value, then you don't need to return as well curly braces({}).
The biggest functional differences are that arrow functions do not have their own this binding or prototype and cannot be used as a constructor.
Arrow functions don't have a constructor or prototype.
Example :
without parenthesis & return
const arrowFunction = name => `Hello Developer, ${name} !!!`;
console.log(arrowFunction('Abhisekh'));
ArrowFunction doesn't have a prototype & Constructor
const myArrowFunction = () => {}
console.log(myArrowFunction.prototype)
const arrowInstance = new myArrowFunction()
console.log(arrowInstance)
Rest Operator
The JavaScript spread operator (...) allows us to put the rest of some specific user-supplied values into a JavaScript array.
A function definition can only have one rest parameter, and the rest parameter must be the last parameter in the function definition.
The console would display the strings You have passed 3 arguments. and You have passed 4 arguments..
The rest parameter eliminates the need to check the args array and allows us to apply map(), filter() and reduce() on the parameters array.
Note: Beware! You Cannot Use “use strict” Inside a Function Containing a Rest Parameter
const spreadFuntion = (...args) =>'You have passed ' + args.length + ' arguments.';
console.log(spreadFuntion(0, 1, 2));
console.log(spreadFuntion('string', null, [1, 2, 3], {}));
Conclusion
So these are the few new features that ES6 introduced. There is a lot to cover. But I try to outline some of the most important ones which I usually find myself using.
Thank you for reading.
If you want to explore here are some links.
GitHub - ECMAScript 6
ECMAScript 6: New Features: Overview and Comparison (es6-features.org)
