Hello everyone,👋
In this article we'll list out the top features of EcmaScript6 (2015 Edition). ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.
Let's get Started with the top most great features of the ES6.🔥
⚡ 1. Default Parameters in ES6:
Functions can now be defined with default parameters. Missing or undefined values are initialized with the default value.
The syntax of Default Parameters in ES6 is below.
In JavaScript, function parameters default to undefined. However, it's often useful to set a different default value. This is where default parameters can help.
In the past, usually for setting defaults was to test parameter values in the function body and assign a value if they are undefined.
Let's have a look at example below, if no value is provided for b when multiply is called, b's value would be undefined when evaluating a * b and multiply would return NaN.
To handle this situation the Default Parameters of ES6 comes into the picture. Checks in the function body are no longer necessary. Now, you can assign 1 as the default value for b in the function head.
Have a look at example below.
👉 The default values can be more than just values, they can be expressions or functions.
Let's move to another feature of ES6.
⚡ 2. Template Literals in ES6:
Template literals make working with string so much easier than before. They're started with a back tick and can have variables inserted using ${variable}. So in ES5 we had to break the string like this:
Luckily, in ES6 we can use a new syntax ${NAME} inside of the back-ticked string:
😎This makes life far simpler and code easier to read. You can put anything inside of the curly braces: variables, equations, or function calls.
👉 Expression Interpolation:
In order to embed expressions within normal strings, usually we use the following syntax:
But now, with template literals, you are able to make use of the syntactic sugar, making substitutions like this more readable:
👉 Multi-Line Strings:
Another yummy syntactic sugar is multi-line string. In ES5, we had to use one of these approaches:
While in ES6, simply utilize the backticks:
⚡ 3. Destructuring in ES6:
Destructuring is the process of taking apart the array or object on the left hand side of the equal sign. The array or object can come from a variable, function or equation.
Let's have a look at below.
With objects destructuring the keys of the object can be listed inside curly braces to extract that key-value pair.
Sometimes you want to extract the values but assign them to a new variable. This is done using a 'key: variable' pairing on the left of the equals sign.
Another thing that object destructuring allows is assigning a value to multiple variables.
⚡ 4. Arrow Functions in ES6:
Arrow functions have 2 main ways: their structure and their 'this' binding.
They can have a much simpler structure than traditional functions because they don't need the 'function' key word and they automatically return whatever is after the arrow.
The fat arrows are amazing because they would make your this behave properly, i.e., this will have the same value as in the context of the function—it won’t mutate. The mutation typically happens each time you create a closure.
Using arrows functions in ES6 allows us to stop using that = this or self = this or _this = this or .bind(this). For example, the following code in ES5 is weird:
Luckily due to ES6 feature this code can be written as below.
👉 The parenthesis () are optional for single params in an arrow function signature. You need them when you use more than one param.
👉 One of the most useful places for arrow functions is in array functions like .map, .forEach or .sort.
⚡ 5. Spread Operator in ES6:
ES6 introduces the ... operator which is referred to as the spread operator. It has two main uses: spreading an array or object into a new array or object, and joining multiple parameters into an array. The first use case is the one you'll probably encounter most so well look at that first.
This can be very useful for passing in a set of variables to a function from an array.
An object can also be spread, inputting each of the key value pairs into the new object.
👉 Rest Syntax(Parameters):
Rest syntax looks exactly like spread syntax. In a way, rest syntax is the opposite of spread syntax. Spread syntax "expands" an array into its elements, while rest syntax collects multiple elements and "condenses" them into a single element.
⚡ 6. Number Literals:
ES5 code handled decimal and hexadecimal number formats well but octal form wasn't specified, and was actively disallowed in strict mode. ES6 has added a new format, adding an 'o' after the initial 0 to declare the number an octal. They've also added a binary format.
⚡ 7. The “let” and “const” keywords:
Let and Const are different ways of creating variables. We all are very well familiar with the var keyword which is used to create variables. Right!? Although, you can still use var to create variable although, you are highly encouraged to use let and const instead.
👉Let and const are different in terms of the use and scope.
👉Let is actually used for variable use where you need to reassign the value of variable but const is used when you don’t need to change its value once it is declared. Reassigning the value to the const type variable will trigger an error.
👉Moreover, difference between let and var is function scoped while let is blocked scoped.
And Much More…🔥😎
👉There is much, much more that ES6 offers us to make our code cleaner, shorter, easier to read and more robust.🔥
Top comments (0)