Work In Progress
This Page is not a in-depth guide but a quick reference document.I've tried to keep it as simple as possible.
ECMAScript Compatibility table
Immutable Variables- Variables which cannot be re-assigned new content.However,the content in which the constant is defined can still be altered.
constant value = 27;
value = 30; //Doesn't change the value
console.log(value);
//
constant Obj = {
value = 30;
}
Obj.value = 35; //Changes the value
console.log(Obj);if(true_condition){
let age = 30;
}
console.log(age); //Throws ReferenceError: age is not defined
//
if(true_condition){
let age = 30;
console.log(age); //Returns 30
}//General Function
function fx(){
console.log("Hello")
}
fx();
//Arrow'izing it as ES6 standards
var fx = () => console.log("Hello");
fx();
//If function returns something,
var fx = () => "Hello";
console.log(fx());
//Works great with arguments too!
var fx = (a,b) => a+b;
console.log(fx(3,5)); //Returns 8//Traditional way
function IsEqualTo(number1,number2) {
return number1 == number2;
}
console.log(IsEqualTo(10,10)); //Logs true
//Doing this Es6 way (giving values for default parameters)
var IsEqualTo = (number1=10,number2=12) =>number1 == number2;
console.log(IsEqualTo()); //Logs false
//You can play around by passing values for different parameters
var IsEqualTo = (number1,number2=12) => number1 == number2;
console.log(IsEqualTo(12)); //Logs TrueAccording to the definition from ECMAScript 6
Aggregation of remaining arguments into single parameter of variadic functions.
Bouncer ? Let me simplify that!
//Function to add numbers in an pre-defined array
var numbers = [12,13,14,15];
function addNumbers(numberArray){
var result = 0;
for(var i = 0; i<numberArray.length; i++){
result+=numberArray[i];
}
return result;
}
console.log(addNumbers(numbers)); //Logs 54, but hey don't you wish there was a easier way to pass dynamic values as arguments instead of the predefined array ? With ES6,you can!
//Let's write the same function using Rest Parameter or (...) opeartor! (Yes,three dots!)
function addNumbers(...numberArray){
var result = 0;
for(var i = 0;i<numberArray.length;i++){
result+=numberArray[i];
}
return result;
}
console.log(addNumbers(15,16,17,18)); //Logs 66
console.log(addNumbers(12,136,1,13)); //Logs 162 Spreading of elements of an iterable collection (like an array or even a string) into both literal elements and individual function parameters.
In short words,spread operator is opposite of rest parameter.Quite self-explianatory if you read this page.
Also known as template strings,provides a better way of handling in-string manipulations.Though it may sound complicated but it actually isn't.
Template string uses `` literal around the content.I don't know the official name for it,but let's call it the back-tick for now.
//Traditional way
var employee = { name: "Foo" };
var emp_details = { days: 30, dept: "Admin", salary: 420 };
//Printing employee details with the given data
var details = "Hello " + employee.name + ",\n" + "your salary for 30 days is " +
(emp_details.days * emp_details.salary) + " rupees" ;
console.log(details); //Logs "Hello Foo, your salary for 30 days is 12600 rupees"
//Using Template String
var employee = { name: "Foo" }
var emp_details = { days: 30, dept: "Admin", salary: 420 }
//Check the back-tick before "Hello" and after "rupees"
var details = `Hello ${employee.name},your salary for 30 days is ${emp_details.days * emp_details.salary} rupees`
console.log(details); //Logs "Hello Foo, your salary for 30 days is 12600 rupees"Less messey right ? If you're used to server side processing languages like SASS you would know how convinient it is to use interpolation that is "${ }" for slotting values into other values.
As the title says,Destructuring is basically breaking down of complex objects into simple individual variables during assignment.Don't worry if you didn't get that,below example should make it clear(I hope).
//Consider an example of swapping two numbers
// Traditional way
var swap = [5,10,20];
var a = swap[0],b = swap[2];
console.log(a,b); //logs 5,20
var temp = a; a = b; b = temp;
console.log(a,b); //logs 20,5
//By Destructuring the arry
var swap = [5,10,20];
var [a, ,b] = swap
console.log(a,b); //logs 5,20
[b, a] = [a, b]
console.log(a,b); //logs 20,5
//Also,you will notice that the original array is not changed
console.log(swap); //logs [5, 10, 20]
var swap = [5,10,20];
var [a, ,b] = swap //Referencing the array by Pattern Matching as the original array
console.log(swap); //logs [5,10,20]
var newswap = [a,b]; //Destructing the original array
console.log(newswap); //logs [5, 20]Take a note how we left an empty space between a and b [a, ,20] as compared to the original array. That's the basics of destructuring for now.Simiarly you can destructure objects in JavaScript.
They're here! Finally!Say good-bye to your traditional var num = function() {} way of 'achieving' object oriented paradigm in javascript! Not just classes but ES6 brings other OOP concepts like inhertience,base classes etc.
It wouldn't be difficult for you to follow if you have programmed in pure Object Oriented Language before. Quite Self Explianatory : http://es6-features.org/#ClassDefinition
Cleaner data-structure for common algorithms based on sets.
In my words,a simple work around to reduce array based or object-key based operations that involves use of indexOf() anf filter() functions.Sets are comparatively faster.
//Basic Set Operation
let s = new Set();
s.add('Red').add('Yellow').add('Green')
for(let key of s.values()){
console.log(key); //logs Red Yellow Green,in that order
}
s.clear();
console.log(s); //Returns an empty set [object Set] { ... }