ES6 Features

Hey everyone👋🏻, in this blog we are going to discuss about ES6 features.

Topics Covered:

1. What is ES?
2. What is ES6?
3. Why should you use ES6 syntax?
4. New Features of ES6

Before getting started, I just wanna let you know that ES6 is just a syntactical change in JavaScript, many people have a misconception that it is a new language or that kind of stuff.

Let's get Started :

Before understanding what is ES6, one should understand what is ES?

So basically, ES stands for ECMAScript which is a general-purpose programming language which is standardized by ECMA international! So you might ask, How is it connected to JavaScript??

ECMA International also provides JavaScript standards which have to be adhered and they are meant to be ensured.

In simple terms, ES6 can be said as a version update of JavaScript, where some new syntax and features have been introduced and believe me they are amazing ✨!

Why should you use ES6 syntax?

1. ES6 is really fast :
   1. JavaScript itself is a very fast language and making it more efficient and fast can do wonders.
   2. ES6 makes the coding process faster as the developer has to write less lines of code, which will run faster.
2. ES6 has backward compatibility :
   1. The creators of ES6 did not want to solely adopt the new syntax and features of ES6, so they made it in a certain way in which a developer can use ES6 as well as ES5 in the same code.
   2. You can write the regular JavaScript (ES5 syntax) which y'all already know and then mix it with the new syntax of ES6, and gradually when you start getting familiar with the new syntax, you can shift to the new syntax completely.
3. ES6 follows Object-Oriented classes :
   1. There are a few different versions of inheritance of classes, and unlike the regular inheritance (supported in almost every other language) JavaScript had a different approach to it. JS supported prototypical inheritance which is a little bit different than the regular one.
   2. But in ES6 classes and their inheritance is made simple, by adding the class syntax, which means now JS developers can also use inheritance in a simple way.
   3. It might look like a small change, but it surely saves a lot of time and effort of new developers who had to learn prototypical inheritance to implement normal inheritance.
4. The new syntax is amazing! It saves lot of line of code and ample amount of time.
   1. I suppose this point is self explanatory.

---

Now let's discuss the main topic of this blog which is: New ES6 Features:

1.Variable Scopes with let and const :

1. const variable can not be re-assigned, it will give an error. Which means const variables are immutable.

2. let variables can be changed and re-assigned a new value, they are blocked scope i.e. the scope of the variable is only within the blocks.

2. Arrow Functions :

1. Arrow functions are the same as the regular functions but with better syntax which is more readable and structured.
2. The code above looks more modern and more readable, now if you wanna return a variable's value the syntax will become even shorter.
3. If there is a one liner function which returns something, you don't even have to put parenthesis! How cool is that!!

3. The arrow functions are also compatible with array functions/methods :

1. Here is a simple .filter() method with both ES5 and ES6 syntax.
2. If you don't know what array methods and ternary operators are?? Do check out one of my blogs on this topic (JavaScript Array Methods).
3. I am going to make a blog on arrow functions, where I am going to take a deep dive into this topic.

4. Template Literals :

1. Template Literals is a simple way of string concatenation.
2. Instead of (+) plus operator we have to write the string inside `` and give cover the variables with a ($) dollar sign and { } curly braces.
3. Lemme show you an example: Isn't this more readable!!

5. Default parameters in functions :

1. Whenever we forget to pass a value for a parameter, it will give the value of undefined in JS, and that can cause some errors.
2. So to reduce error you can give initial or default value to the parameter.

6. Object and Array destruction :

1. Destruction of object or array in JS means, assigning a value inside an object or an array to a new variable.
2. This may sound easy but it gets a little confusing when we have to deal with huge objects and arrays, but ES6 has got you covered👏🏻! Let's see an example:
3. NOTE : If the name of the variable is not identical to the name of the variable in the object, it will return undefined. (in ES6).
4. If we want to change the name of the variable we can write:
5. Array destruction is more or less the same:

7. Import and Export Statements :

1. Using import and export statements make the JavaScript application more easy and dynamic.
2. These statements allow you to create re-usable code and you can separate file so that the code is not clustered.
3. As the name suggests export lets you export the file/module to another JavaScript file.
4. import lets you import that module into the JavaScript file.
5. Let's take an example,
   1. We have 2 files details.js and app.js

8. Spread Operator :

1. Spread Syntax (...) allows an iterable such as an array or a string to be expanded in other variables.
2. Let's take a loot at an example:
3. Spread syntax can be used when the elements from an array or an object need to be included in a function or a list .
4. We can also add new numbers or values to the array using this method:

9. Classes using object-oriented programming approach :

1. Classes is one of the most important part of OOP, they help with a lot of things like, making you code more secure.
2. It helps to keep the code in a well structured manner and ES6 has made it really easy for developers.
3. You just have to write the keyword class ClassName and then 2 curly braces, like in functions.
4. You should always keep the first letter of the class name as a capital letter, there is no compulsion but just a naming convention.
5. If you don't understand what classes or OOP is don't worry, I will be making a blog on this too!!

---

Next blog's topic -> Arrow Functions

Quick Update : I post a new blog in every 4 to 5 days, so to stay updated do follow my twitter account @PahuneShreyas

---