├── symbols.js ├── rest-params.js ├── spread.js ├── modules.js ├── destructuring-assignment.js ├── sets.js ├── default.js ├── template-string.js ├── constant.js ├── let.js ├── generators.js ├── weaksets.js ├── weakmaps.js ├── maps.js ├── class.js ├── README.md ├── arrow.js ├── promises.js └── proxy.js /symbols.js: -------------------------------------------------------------------------------- 1 | /** 2 | * unique and immutable datatype 3 | */ 4 | 5 | var foo = Symbol(); 6 | var bar = Symbol("foo"); -------------------------------------------------------------------------------- /rest-params.js: -------------------------------------------------------------------------------- 1 | /** 2 | * rest, params passed as an array to function 3 | */ 4 | 5 | function foo(...x){ 6 | // x is an array 7 | return x.length; 8 | } 9 | 10 | foo(1, 2, 3, 4); // 4 -------------------------------------------------------------------------------- /spread.js: -------------------------------------------------------------------------------- 1 | /** 2 | * spread allows you to pass each element of an array as a parameter. 3 | */ 4 | 5 | var list = [1, 2, 3, 4]; 6 | 7 | function foo(i, j, k, l){ 8 | return i*j*k*l; 9 | } 10 | 11 | foo(...list); // 24 -------------------------------------------------------------------------------- /modules.js: -------------------------------------------------------------------------------- 1 | /** 2 | * extract data from arrays or objects 3 | */ 4 | 5 | // utils.js 6 | export const pi = 3.14; 7 | export function add(x, y){ 8 | return x + y; 9 | } 10 | 11 | // index.js 12 | import {pi, add} from utils; -------------------------------------------------------------------------------- /destructuring-assignment.js: -------------------------------------------------------------------------------- 1 | /** 2 | * extract data from arrays or objects 3 | */ 4 | 5 | var foo = [1, 2, 3]; 6 | var [one, two, three] = foo; 7 | // one => 1, two => 2, three => 3 8 | 9 | var {a, b} = {a:1, b:2}; 10 | // a => 1, b => 2 -------------------------------------------------------------------------------- /sets.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Set is a collection of unique values. A Set can be iterated in order of 3 | * insertion of its elements. 4 | */ 5 | 6 | var foo = new Set(); 7 | 8 | foo.add(1); 9 | foo.add(2); 10 | foo.add("three"); 11 | 12 | foo.has(1); // true 13 | 14 | foo.size; // 3 15 | 16 | foo.delete(2); // removes 2 from foo 17 | -------------------------------------------------------------------------------- /default.js: -------------------------------------------------------------------------------- 1 | /** 2 | * default, param created in function args and passed a default value 3 | */ 4 | 5 | function foo(msg="I am default"){ 6 | return msg; 7 | } 8 | 9 | foo(); // I am default 10 | 11 | /** 12 | * ES5 version 13 | */ 14 | function ES5Foo(msg){ 15 | msg = msg || "I am default"; 16 | return msg; 17 | } 18 | 19 | foo(); // I am default 20 | -------------------------------------------------------------------------------- /template-string.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Syntactic sugar for string construction 3 | */ 4 | 5 | var x = "foo"; 6 | var y = "bar"; 7 | 8 | // es5 9 | var join = x + ' ' + y; // foo bar 10 | 11 | // es6 12 | var join = `${x} ${y}`; // foo bar 13 | 14 | /* 15 | foo 16 | bar 17 | */ 18 | 19 | // es5 20 | var join = x + '\n' + y; 21 | 22 | // es6 23 | var join = `${x} 24 | ${y}`; 25 | -------------------------------------------------------------------------------- /constant.js: -------------------------------------------------------------------------------- 1 | /** 2 | * constant is a single assignment variable. 3 | */ 4 | 5 | function foo(){ 6 | const i = 1; 7 | 8 | var bar = i; // 1 9 | var i = 2; // error 10 | } 11 | 12 | function fooTwo(){ 13 | const object = { 14 | nestedProperty: 1 15 | }; 16 | 17 | object = 2; // error 18 | object.nestedProperty = 2; // no error 19 | } 20 | -------------------------------------------------------------------------------- /let.js: -------------------------------------------------------------------------------- 1 | /** 2 | * let declares a block scope local variable. let has been in Firefox for a 3 | * long time and is now a part of ES6. 4 | * IMPORTANT: If outside of any block, let is scoped globally else will be scoped 5 | * to nearest enclosing block. 6 | */ 7 | 8 | function foo(){ 9 | for(let i = 0; i< 10; i++){ 10 | // i is visible 11 | } 12 | // i is not visible 13 | } 14 | -------------------------------------------------------------------------------- /generators.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Generators are functions which can be paused and resumed later. Function 3 | * context is saved across resumes. 4 | */ 5 | 6 | function* count(){ 7 | var start = 0; 8 | while(true) { 9 | yield start; 10 | ++start; 11 | } 12 | } 13 | 14 | var iterator = count(); 15 | 16 | iterator.next(); //{value: 0, done: false} 17 | iterator.next(); //{value: 1, done: false} 18 | iterator.next(); //{value: 2, done: false} 19 | iterator.return(); -------------------------------------------------------------------------------- /weaksets.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WeakSet are collection of objects. It allows to store weakly held objects 3 | * in collection. Weakly held objects are unique across collection. 4 | * Unlike Set, WeakSet can only store Objects. Objects are held weakly and no 5 | * reference is stored and hence prevents leaking. 6 | */ 7 | 8 | var x = {}; 9 | var y = function(){}; 10 | 11 | var ws = new WeakSet(); 12 | 13 | ws.add(x); 14 | ws.add(y); 15 | 16 | ws.has(x); // true 17 | 18 | ws.delete(x); 19 | 20 | ws.clear(); // purge whole weakset 21 | -------------------------------------------------------------------------------- /weakmaps.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WeakMap object are key/value collections in which the keys are objects. 3 | * Values in WeakMap can be any arbitrary value. 4 | * WeakMap, reference to key object are kept weakly and hence it does not 5 | * prevent it from being garbage collected. Hence WeakMap helps in preventing 6 | * memory leak issues. 7 | */ 8 | 9 | var x = {}; 10 | var y = function(){}; 11 | var z = "foo"; 12 | 13 | var w = new WeakMap(); 14 | 15 | w.set(x, "bar"); 16 | w.set(y, 123); 17 | w.set(z, "xyz"); // error - key needs to be an object 18 | 19 | w.get(x); // bar 20 | w.get(y); // 123 21 | 22 | w.has(x); // true 23 | -------------------------------------------------------------------------------- /maps.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Map object are simple key/value maps. Both object and primitive values can 3 | * be used as key or value in map. 4 | * Although Map looks similar to Object, its worth noting that keys of Object 5 | * are strings while there is no such restriction for a Map. Also Map size can 6 | * be retrieved like an array while this is not the case with Objects. 7 | */ 8 | 9 | var x = {}; 10 | var y = 9; 11 | var z = "foo"; 12 | 13 | var m = new Map(); 14 | 15 | m.set(x, 34); 16 | m.set(y, "bar"); 17 | m.set(z, {data: "test"}); 18 | 19 | m.get(x); // 34 20 | m.get(y); // "bar" 21 | m.get(z); // {data: "test"} 22 | 23 | m.size; // 3 24 | -------------------------------------------------------------------------------- /class.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Class is syntactical sugar over prototype based inheritance. 3 | */ 4 | class Animal { 5 | constructor(type, sound) { 6 | this.type = type; 7 | this.sound = sound; 8 | } 9 | 10 | makeNoise() { 11 | return ('The ' + this.type + ' goes ' + this.sound); 12 | } 13 | } 14 | 15 | var simone = new Animal("cat", "meow"); 16 | 17 | simone.makeNoise(); // returns "The cat goes meow" 18 | 19 | /** 20 | * ES5 version 21 | */ 22 | function ES5Animal(type, sound) { 23 | this.type = type; 24 | this.sound = sound; 25 | } 26 | 27 | ES5Animal.prototype.makeNoise = function() { 28 | return 'The ' + this.type + ' goes ' + this.sound; 29 | } 30 | 31 | var dogbert = new ES5Animal("dog", "bark"); 32 | 33 | dogbert.makeNoise(); // returns "The dog goes bark" 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # understanding-es6 2 | Simple examples to help you understand ES6. 3 | 4 | > You can track evolution of ES7 at [ES7 Features](https://github.com/sgaurav/es7features) 5 | 6 | __Available__ 7 | 8 | * [arrow](./arrow.js) 9 | 10 | * [class](./class.js) 11 | 12 | * [constant](./constant.js) 13 | 14 | * [destructuring-assignment](./destructuring-assignment.js) 15 | 16 | * [default-params](./default.js) 17 | 18 | * [generators](./generators.js) 19 | 20 | * [let](./let.js) 21 | 22 | * [maps](./maps.js) 23 | 24 | * [modules](./modules.js) 25 | 26 | * [promises](./promises.js) 27 | 28 | * [proxy](./proxy.js) 29 | 30 | * [rest-params](./rest-params.js) 31 | 32 | * [sets](./sets.js) 33 | 34 | * [spread](./spread.js) 35 | 36 | * [symbols](./symbols.js) 37 | 38 | * [template-string](./template-string.js) 39 | 40 | * [weakmaps](./weakmaps.js) 41 | 42 | * [weaksets](./weaksets.js) 43 | -------------------------------------------------------------------------------- /arrow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Arrow functions have shorter syntax than function expressions. 3 | * These functions also lexically bind `this` value and are always anonymous. 4 | */ 5 | 6 | let foo = ["Hello", "World"]; 7 | 8 | //single arguments do not require parenthesis or curly braces. 9 | //The return statement is implicit 10 | let bar = foo.map(x => x.length); 11 | 12 | // ES5 13 | var bar = foo.map(function(x) { return x.length; }); 14 | 15 | //multiline functions require curly braces 16 | //no arguments expect parenthesis 17 | let foobar = () => { 18 | console.log("Hello"); 19 | console.log("World"); 20 | }; 21 | 22 | // ES5 23 | var foobar = function() { 24 | console.log("Hello"); 25 | console.log("World"); 26 | }; 27 | 28 | //Returning object literal. Requires Brackets. 29 | let quux = () => ({ "myProp" : 123 }); 30 | 31 | //ES5 32 | var quux = function() { 33 | return { "myProp" : 123 }; 34 | }; 35 | -------------------------------------------------------------------------------- /promises.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Promises are used for deferred and asynchronous computations. 3 | * A Promise represents an operation that hasn't completed yet, but is expected in the future. 4 | */ 5 | 6 | var foo = new Promise(function (resolve, reject) { 7 | //Check if the current timestamp is an even number and resolve 8 | if (Date.now() % 2 === 0) { 9 | //Pass a status code of 200 to the success callback function 10 | resolve(200); 11 | } else { 12 | //Pass a status code of 404 to the failure callback function 13 | reject(404); 14 | } 15 | }); 16 | 17 | //When the promise has successfully resolved, execute the following 18 | //callback function 19 | foo.then(function (status) { 20 | console.log("Successfully resolved: " + status); 21 | }); 22 | 23 | //When the promise is rejected i.e. an error, execute the following 24 | //callback function 25 | foo.catch(function (status) { 26 | console.log("An error occurred: " + status); 27 | }); 28 | -------------------------------------------------------------------------------- /proxy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Proxies are special objects that allow you to provide custom implementations for operations on objects. 3 | (e.g. property lookup, assignment, enumeration, function invocation, etc). 4 | Proxies have a handler(a method that – if present – performs that operation), 5 | and target(the operation is performed on target if the handler doesn't intercept it). 6 | */ 7 | 8 | let target = { 9 | guest: "Welcome, Guest" 10 | }; 11 | 12 | let proxy = new Proxy(target, { 13 | get (obj, prop, val) { 14 | return val in obj ? obj[val] : 'Howdy, ${val}' 15 | }, 16 | set (obj, prop, val){ 17 | if(prop === 'password'){ 18 | if(val.length<8){ 19 | throw new TypeError('The length of password should be greater than 8'); 20 | } else { 21 | obj[prop] = val; 22 | } 23 | } else { 24 | obj[prop] = val; 25 | } 26 | } 27 | }); 28 | 29 | proxy.guest; // "Welcome, Guest" 30 | proxy.userX; // "Howdy, UserX" 31 | proxy.password = 'abc'; //Error The length of password should be greater than 8. 32 | proxy.age = 22; //age=22 33 | 34 | 35 | 36 | 37 | 38 | --------------------------------------------------------------------------------