ECMAScript-6 — Beginner’s Guide
ES6 is a new standard for writing Javascript and is also known as ECMAScript 2015. With ES6, the syntax for writing code becomes a lot easier compared to ES5. There are a lot of new features as well, that got introduced in ES6 which save our time in writing too much of code as well as it is much more readable.
So let’s start working with the awesome features of ES6. So the topics that we will cover as part of this conversation will be :
PART-1
- Understand the scope of the variable (understanding let, const & var).
- Working with Maps & Sets.
- Spread Operator, Template Strings & For..of loop
PART-2
- What is Destructured Assignments, Rest Parameters, Default Parameters?
- Working with Arrow Function, Promises & Fetch, Async & Await.
- ES6 class syntax & Inheritance
So let’s begin our ES6 journey for writing much better & readable code 😊 😊
Use of Let, Const & Var
function test() {
var x = 10;
console.log("Before loop scope PRINTING....", x);
for (var x = 0; x < 3; x++) {
console.log("PRINTING....", x);
}
console.log("Out of for loop scope PRINTING....", x);
}Output: Before loop scope PRINTING.... 10
PRINTING.... 0
PRINTING.... 1
PRINTING.... 2
Out of for loop scope PRINTING.... 3
Keynotes for var keyword:
- if you redeclare var variable, it will hold the new value as is shown in the above code.
- var has a global scope declaration, as it is shown in the above code that we can print x outside for loop with the updated value(updated inside the for loop).
function test() {
let x = 10;
console.log("Before loop scope PRINTING....", x);
for (let x = 0; x < 3; x++) {
console.log("PRINTING....", x);
}
console.log("Out of for loop scope PRINTING....", x);
}Output: Before loop scope PRINTING.... 10
PRINTING.... 0
PRINTING.... 1
PRINTING.... 2
Out of for loop scope PRINTING.... 10
- if you redeclare let variable, it will hold new value till the block in which it is declared.
- let have a local scope declaration, as it is shown in the above code that the value of x that will be printed in the last line is the same value of x which is declared before for loop.
function test() {
const x = 10;
x = x+1;
console.log(x);
}Output: Uncaught SyntaxError: embedded: "x" is read-only
- const is basically constant block-scoped variable. As its name suggests, you cannot change its value. So the above code will give an error.
- const is mostly same as let but you cannot re-assign the variable value if it’s a const variable.
Cool!! So we are done with understanding the scope of variable & we should be good enough to proceed for other topics 🏃 🏃 🏃
Maps
Maps are basically key-value pair which have a unique key for each value present in the map. We can create a map using 2 ways as shown below:
- Create a Map using the new keyword and then use the set keyword for inserting value inside a map:
const noOfAnimals = new Map();
noOfAnimals.set('Cat', 1);
noOfAnimals.set('Dog', 4);console.log(noOfAnimals);Output: Map(2) {"Cat" => 1, "Dog" => 4}
- Create a Map using the new keyword and pass the value while creating a Map:
const noOfAnimals = new Map([
['Cat', 1],
['Dog', 4]
]);console.log(noOfAnimals);Output: Map(2) {"Cat" => 1, "Dog" => 4}
Now as we know how to create map let’s see how to iterate over maps. One point to be noted here is, maps iterate its object in insertion order i.e. the order in which map values got inserted, it will iterate in the same order. It will be more clear with the below example:
noOfAnimals.forEach(function (animalCount, animalName,) {
console.log(animalName, animalCount);
});Output: Cat 1
Dog 4
here, the forEach loop will execute this function for each of the key-value pair present in the Map and thus we are able to print each value of pair.
Sets
Sets allow us to store a unique set of value which can be of any type. Set don’t have duplication of values. we can create a set using the Set keyword.
const letters = new Set();
letters.add('A')
.add('B')
.add('C');
console.log(letters);Output: Set(3) {"A", "B", "C"}
Set have a lot of methods that are actually very helpful for dealing with the set values. Instead of going through the theory of these method lets see the usage of some of these frequently used methods for more clarification:
console.log('size of Set', letters.size);
console.log('Give me all the values of Set', letters.values());
console.log('Does Set have A', letters.has('A'));
console.log('Deleting A from Set',letters.delete('A'));
console.log('Does Set still have A', letters.has('A'));
console.log('Deleting all the elements from set', letters.clear());
console.log(letters, 'new size of set', letters.size);Output: size of Set 3
Give me all the values of Set SetIterator {"A", "B", "C"}
Does Set have A true
Deleting A from Set true
Does Set still have A false
Deleting all the elements from set undefined
Set(0) {} "new size of set" 0
Spread Operator
Spread Operators allow an iterable to be expanded in places where multiple elements/variables/arguments are expected or an object expression to be expanded in places where multiple key-value pairs are expected.
let letters = ["A","B","C"];
let words = ["Dog","Elephant"];
let example = ["1","2",letters,"3","4",...words]
console.log(example);Output: ["1", "2", Array(3), "3", "4", "Dog", "Elephant"]
You can clearly see the difference of using and not using of spread operators i.e., if you will not use spread operator then you end up adding an array inside another array i.e., that is what happened with letters array.
String Literal
String literals are also called Template Literal interchangeably. template string allows printing embedded expressions.e.g.,
function deliverMessage(name, noOfEmployees) {
let partTimeEmployee = 10;
console.log(`Hi ${name}, Thanks for delivering the message!!!
No of Employees: $${noOfEmployees}
Part Time Employee: $${partTimeEmployee}`
);
}
deliverMessage('XYZ', '100');Output:Hi XYZ, Thanks for delivering the message!!!
No of Employees: $100
Part Time Employee: $10
Notice here that the paragraph and the indentation that we have given while putting our message inside template string(``) remains intact in the output. And you can simply print the value of variables (e.g., name, noOfEmployees, etc.) inside the template string using ${value}.
For …of Loop
For …of loop is used for iterating over an iterable object (e.g., sets, maps, arrays, etc). If you are aware how for loops work then this loop is quite similar, in fact, it increases code readability.
const animal = new Map();animal.set('1', 'Dog');
animal.set('2', 'Cat');
animal.set('3', 'Cow');for (let animal of animal.keys()) {
console.log(animal)
}Output: 1
2
3
You can consider Array also instead of Map because an array is also iterable:
let animals = ['Dog', 'Cat', 'Cow'];for (let animal of animals) {
console.log(animal);
}Output: Dog
Cat
Cow
So, We completed all the topics for PART-1. Feel free to add if you have something. Here is the link for PART-2 https://medium.com/@srivastavaankita080/es6-beginners-guide-contd-4d02358e3f94 go ahead if you like it 😉
Happy Coding 😊 😊
