Public
🔸🔹🔸 ECMAScript-6 🔸🔹🔸
Course ID: 55107
All major JavaScript implementations adhere to the ECMAScript standard.
ECMAScript Defines
Language Syntax – parsing rules, keywords, statements, declarations, operators, etc.
Types – boolean, number, string, object, etc.
Prototypes and Inheritance
Standard Library of built-in objects and functions
ECMAScript = ES:
ECMAScript is a Standard for scripting languages.
Languages like Javascript are based on the ECMAScript standard.
ECMA Standard is based on several originating technologies, the most well known being
JavaScript (Netscape) and JScript (Microsoft).
ECMA means European Computer Manufacturer’s Association
JavaScript = JS:
JavaScript is the most popular implementation of the ECMAScript Standard.
The core features of Javascript are based on the ECMAScript standard, but Javascript also
has other additional features that are not in the ECMA specifications/standard.
ActionScript and JScript are other languages that implement the ECMAScript.
JavaScript was submitted to ECMA for standardization but due to trademark issues with the
name Javascript the standard became called ECMAScript.
Every browser has a JavaScript interpreter.
ES6 = ECMAScript 6 = ES2015 = ECMAScript 2015:
ECMAScript6 or ES6 is the sixth edition of the ECMA script Language specification standard.
ES2015 is a version of the ECMAScript (new/future one).
Officially the name ES2015 should be used instead of ES6.
ES6 will tackle many of the core language shortcomings addressed in TypeScript and
CoffeeScript.
ES6 is the next iteration of JavaScript, but it does not run in today's browsers.
There are quite a few transpilers that will export ES5 for running in browsers.
TC39, is the committee that drafts the ECMAScript specifications. They follow a yearly model for
defining new standards, where new features are added as they are approved, rather than waiting till
all features are ready. Thus ES7 will contain all features proposed and approved in 2016.
🔹 Course Covers:
Block scope (let and const)
Default, Rest and Spread parameters
Destructuring
Arrow Functions
Template Literals
ClassesandModules
Public
Public
Promise
Maps and Sets
Symbols
Transpiling
🚩 Block Scope Variables :
Block is a group of zero or more statements delimited by a pair of curly brackets {}.
Block scope variables are the ones that exist only within the innermost block that surrounds
them.
In JavaScript, var is used to create variables. ES6, introduces 2 other keywords for declaring
Block scope variables.
1. Let keyword in ES6 is used to create Block scope variables. It works like var, but differs in few
aspects.
let doesn't allow properties to be added to the global (window) object.
let provides Block scope rather than function /global scope.
var x = 10; console.log(window.x) // 10let x = 10;
console.log(window.x) // undefined
let doesn't allow re-declaring a variable
2. Const
Freeze
Const doesn't make objects immutable. To make object immutable, use the freeze()
function.
Using freeze()
const car = Object.freeze({ name: 'Benz', class: 'c' })car.class =
's'console.log(car) // { name: 'Benz', class: 'c' }
Challenge 1: Max of
let maximum = (a,b) => {
if (a > b) {
return a;
} else {
return b;
Public
Public
module.exports = {maximum}
🚩 Parameters and Arguments :
Parameters (or formal parameters) are given in the function declaration, whereas Arguments (or
actual parameters) are passed to the function.
Types of Parameters:
1.Default Parameter
2.REST Parameter
3.Spread Parameter
Default values to Function Parameters :
SPREAD PARAMETER
🚩 Destructing content :
Destruction Handson:
Public
Public
🚩 Arrow Functions:
Arrow functions in ES6 are the modified and abbreviated syntax of JavaScript
functions.
These functions make use of => token and hence known as Fat Arrow functions.
Also, Arrow functions are less verbose than the traditional function expressions.
Way 1:
====
let add=(a,b)=>a+b;
//add function in single statement
Way 2:
=====
let add=(a,b)=>{
return a+b;
}
//add function with paranthesis
Way :1
=====
let numbers=[2,3,4,5,6,7];
let doubled=numbers.map(function(n){
return n*2;
});
console.log(doubled;)
Way :2
=====
let numbers=[2,3,4,5,6,7];
let doubled=numbers.map(n=>n*2);
console.log(doubled;)
This Keyword:
let person={
name:'Pazhani',
sayName:() => {
console.log('Hi i am $(this.name)');
}
}
Public
Public
person.sayName();
Using ForEach and printing HOBBIES array using arrow function:
let person={
name:'Ryan',
hobbies:['Robots','Computers','Internet'],
showHobbies:function(){
this.hobbies.forEach( hobby => {
console.log(`${this.name} likes ${hobby}`)
});
}
}
person.showHobbies();
🚩 Template Strings / Literals: `
Way 1:
let name='Pazhani';
console.log('His name is ' +name+ 'and he is working in TCS');
Way 2:
let name='Pazhani';
console.log('His name is ${name} and he is working in TCS');
🚩 Class in ES6:
class User{
constructor (username,email,password){
this.username=username;
this.email=email;
this.password=password;
}
register(){
console.log(this.username+' is now registered');
Public
Public
static countUsers(){
console.log('There are 50 users');
}
}
let bob=new User('bob','bob@gmail.com','12345');
bob.register();
class Member extends User{
constructor (username,email,password,memberPackage){
super(username,email,password);
this.package=memberPackage;
}
getPackage(){
console.log(this.username+' is subscribed to the '+this.package+
package');
}
}
let mike=new Member('mike','mike@gmail.com', '123','Standard');
mike.getPackage();
🚩 Maps and Sets:
Set Handson
let myArray=[10,28,45,12];
let mySet=new Set(myArray);
mySet.add('Pazhani');
mySet.add(91.11);
mySet.add('100');
mySet.delete('100');
//mySet.clear();
console.log(mySet.size);
mySet.forEach(function(val){ //To print all values of mySet
console.log(val);
});
Set Output:
Map Handson
let myMap=new Map([['a1','Hello'],['b1','Goodbye']]);
myMap.set('c3','Foo');
Public
Public
myMap.delete('a1');
console.log(myMap.size);
console.log(myMap);
Map Output:
WeakSet Handson
let carWeakSet=new WeakSet();
let car1={
make: 'Honda',
model: 'Civic'
}
carWeakSet.add(car1);
let car2={
make: 'Toyota',
model: 'Camry'
}
carWeakSet.add(car2);
carWeakSet.delete(car1);
console.log(carWeakSet);
WeakSet Output:
WeakMap Handson
let carWeakMap=new WeakMap();
let key1={
id:1
}
let key2={
id:2
}
let car1={
make: 'Honda',
model: 'Civic'
}
let car2={
make: 'Toyota',
model: 'Camry'
}
carWeakMap.set(key1,car1);
carWeakMap.set(key2,car2);
console.log(carWeakMap);
carWeakMap.delete(key1);
console.log(carWeakMap);
Public
Public
Weak Map Output:
🚩 Symbols:
🚩 Modules:
🚩 Promise:
🚩 Generators:
🚩 Transpiling:
ES6 Course Summary
This brings us to the end of the course. In this course, we have covered all the new features
available through ES6 and also learnt how to use Babel to transpile the code to be
compatible with all browsers. ES6 is a biggest update to JavaScript and we encourage you to
Public
Public
continue and stay updated about the new features that will be added in future versions of
ECMAScript.
Public
