//ES5 algorithm let notGreet = "Wel"; let eventGreet = "come"; alert(notGreet + eventGreet);// Welcome //The code above in ES6 const greet = x => "Wel" + x; alert(greet("come"));// Welcome window.onload = function() { document.getElementById("js").style.backgroundColor = "yellow" }; ///////////////////////// //Searching Strings //Before ES6 we only used the indexOf() method to find the position of the text in the string. For example: console.log("SoloLearn".indexOf("Solo") === 0); // true console.log("SoloLearn".indexOf("Solo") === (4 - "Solo".length)); // true console.log("SoloLearn".indexOf("loLe") !== -1); // true console.log("SoloLearn".indexOf("olo", 1) !== -1); // true console.log("SoloLearn".indexOf("olo", 2) !== -1); // false //ES6 has replaced this with a version that has cleaner and more simplified syntax: console.log("SoloLearn".startsWith("Solo", 0)); // true console.log("SoloLearn".endsWith("Solo", 4)); // true console.log("SoloLearn".includes("loLe")); // true console.log("SoloLearn".includes("olo", 1)); // true console.log("SoloLearn".includes("olo", 2)); // false ///////////////////// //Understanding NaN var a = isNaN("1") var b = !isNaN("1o"); var c = isNaN(1) console.log((a && b) === c);// true //undefined brain teaser document.write(typeof(null) && typeof({}) && typeof (undefined) + "
"); //JavaScript basics of nested for...loops var f=0; for(a=0; a<10; a++) { for(b=0; b<10; b++){ for(c=0; c<=3; c++) { f++; } } } document.write(f + "
");// 10*10*4 //ES5 var x = 3 for (var i=0; i<5; ++i) { i += x document.write(i); } //Output is 37 //The ES6 equivalent var x = 111; for (let i=0; i < 5; ++i) { x += 2; console.log(x); x += 4; console.log(x); } ////////////////////////// //ES6 Promises //A Promise is a better way for asynchronous programming when compared to the common way of using a setTimeout() type of method. /* setTimeout(function() { console.log("Work 1"); setTimeout(function() { console.log("Work 2"); }, 1000); }, 1000); console.log("End"); */ //It prints "End", "Work 1" and "Work 2" in that order (the work is done asynchronously). But if there are more events like this, the code becomes very complex. //ES6 comes to the rescue in such situations. //Here, resolve is the method for success and reject is the method for failure. //If a method returns a promise, its calls should use the then method which takes two methods as input; one for success and the other for the failure. /* function asyncFunc(work) { return new Promise(function(resolve, reject) { if (work === "") reject(Error("Nothing")); setTimeout(function() { resolve(work); }, 1000); }); } asyncFunc("Work 1") // Task 1 .then(function(result) { console.log(result); return asyncFunc("Work 2"); // Task 2 }, function(error) { console.log(error); }) .then(function(result) { console.log(result); }, function(error) { console.log(error); }); console.log("End"); */ //It also prints "End", "Work 1" and "Work 2" (the work is done asynchronously). But, this is clearly more readable than the previous example and in more complex situations it is easier to work with. ////////////////////// // for...of / for...in in ES6 let list = ["x", "y", "z"]; for (let val of list) { console.log(val); } for (let ans in list) { console.log(ans); } ///////////////////////// //ES5 var arr = [2, 3, 7, 8]; arr.forEach(function(el) { document.write(el * 2 + "
"); }); // The code above written in ES6 const rar = [2, 3, 7, 8]; rar.forEach(v => { document.write(v * 2 + "
"); }); ////////////////////////// //Functions in ES6 //ES5 layout function test(a, b = 3, c = 42) { return a + b + c; } console.log(test(5)); // Full ES6 equivalent const vest = (a, b = 3, c = 42) => a + b + c; console.log(vest(5)); // ForEach var numbers = [10,30,60]; var sum = 0; numbers.forEach(el => sum += el); console.log(sum); ////////////////////////// //ES5 format for properties properties to objects let y = { number: 10, color: 'colour', grow() { this.color += '(s)' this.number += 2; } }; y.grow(); console.log(y.number +" "+ y.color); // 12 green colour(s) //ES6 layout for the above code let number = 10; let color = 'colour'; color += '(s)' number += 2; let z = { number, // number: number, color // color: color }; console.log(z.number +" "+ z.color); //Output 12 green colour(s) //////////////////////// //Note; using let in place of var throws an error for the code below var a = {x: 1, x: 2, x: 3, x: 4}; console.log(a.x); // 4 var a = {y:2}; a = 3; console.log(a.y +" "+ a); //////////////////////// //Object.assign() in ES6 let person = { name: 'Jack', age: 18, sex: 'male' }; let student = { name: 'Mofey', age: 20, xp: '2' }; //Here, "person" comes first before student let newStudent = Object.assign({}, person, student); //Therefore,Bob is being ourputted for newStudent.name console.log(newStudent.name); // Bob console.log(newStudent.age); // 20 console.log(newStudent.sex); // male console.log(newStudent.xp); // 2 //However, using "="creates a reference to the base object. Because of this reference, changes intended for a new object mutate the original object: let person1 = { //used "person1" because "person" has already been declared in previous program name: 'Bob', age: 18 }; let newPerson = person1; newPerson.name = 'Jack'; console.log(person1.name); // Jack console.log(newPerson.name); // Jack //To avoid this (mutations), use Object.assign() to create a new object. let person2 = { name: 'Jackie', age: 18 }; let newPerson1 = Object.assign({}, person2); newPerson1.name = 'Bob'; console.log(person2.name); // Jackie console.log(newPerson1.name); // Bob //Or let person3 = { name: 'Samuel', age: 18 }; let newPerson2 = Object.assign({}, person3, {name: 'David'}); console.log(person3.name); // Samuel console.log(newPerson2.name); // David /////////////////////// //Destructuring Arrays in ES6 //The following example demonstrates how to unpack the elements of an array into distinct variables let array = ['1', '2', '3']; let [one, two, three] = array; console.log(one); // 1 console.log(two); // 2 console.log(three); // 3 //Destructuring an array returned by a function //Note that we left the second argument's place empty let d = () => { return [1, 3, 2]; }; let [four, , five] = d(); console.log(four); // 1 console.log(five); // 2 //The destructuring syntax also simplifies assignment and swapping values: let ab, bc, cd= 4, de = 8; [ab, bc = 6] = [2]; document.write(ab); // 2 document.write(bc); // 6 [cd = 3, de] = [de, cd]; document.write(cd); // 8 document.write(de + "
"); // 4 //Note that the value of cd does not change after the after declaration //Destructuring objects in ES6 are similar, the only difference is that when assigning without declaration,there are some requirements for that which is the "();" let ef, fg; ({ef, fg} = {ef: 'Hello ', fg: 'Frank'}); document.write(ef + fg + "
"); //////////////////////// //Before ES6, we used methods like this for Spread operators function myFunction(w, x, y, z) { document.write(w + x + y + z); } var args = [1, 2, 3]; myFunction.apply(null, args.concat(4)); //...but now, ES6 introduced a cooler way to write such program const myFunc = (w, x, y, z) => { document.write(w + x + y + z +"
"); }; let arg = [1, 2, 3]; myFunc(...args, 4); //////////////////////// //Repeating Strings //Before ES6 the following syntax was the correct way to repeat a string multiple times: document.write(Array(3 + 1).join("foo") + "
"); //With the new syntax, it becomes: document.write("foo".repeat(3) + "
"); ////////////////////// //Classes are useful when you are trying to make lots of objects of the same type. So if, let's say, you want to make a ball. You will need its positions, radius, velocities, and methods to move it. You can make an object if you only want one ball. But if you want to, let's say, make 30000 balls. Hopefully you are not going to write 30000 of the same object. You just make a class. Classes are a little better than constructor functions (imo), since they don't need to access the prototype to actually add methods to it. //A class uses the keyword class and contains a constructor method for initializing. class Triangle { constructor(height, width) { this.height = height; this.width = width; } } const rect = new Triangle(5, 5); const poster = new Triangle(2, 3); document.write(rect.height + "
"); //Class Methods in ES6 does not require the keyword function for a function assigned to a method's name. One type of class method is the prototype method, which is available to objects of the class. class Rectangle { constructor(height, width) { this.height = height; this.width = width; } get area() { return this.calcArea(); } calcArea() { return this.height * this.width; } } const square = new Rectangle(5, 5); document.write(square.area + "
"); // 25 /////////////////////// //ES6 Set //The size property returns the number of distinct values in a set. let set = new Set([1, 2, 4, 2, 59, 9, 4, 9, 1]); console.log(set.size); // 5 //Methods /*add(value) Adds a new element with the given value to the Set. delete(value) Deletes a specified value from the set. has(value) Returns true if a specified value exists in the set and false otherwise. clear() Clears the set. values() Returns an Iterator of values in the set.*/ //Here, writing another line of "let set = new Set" throws an error of "set has already been declared" set.add(5).add(9).add(59).add(9); console.log(set.has(9)); for (let v of set.values()) console.log(v); //Set supports different data types i.e. 1 and "1" are two different values. NaN and undefined can also be stored in Set. /////////////////////// //Symbol.iterator is the default iterator for an object. The for...of loops are based on this type of iterator. let myIterableObj = { [Symbol.iterator] : function* () { yield 1; yield 2; yield 3; } }; //First, we create an object, and use the Symbol.iterator and generator function to fill it with some values. //In the second line of the code, we use a * with the function keyword. It's called a generator function (or gen function). function* idMaker() { let index = 0; while (index < 5) yield index++; } var gen = idMaker(); console.log(gen.next().value); console.log(gen.next().value); console.log(gen.next().value); console.log(gen.next().value); console.log(gen.next().value); // Try to add one more console.log, just like the above see what happens. //We can exit and re-enter generator functions later. Their variable bindings (context) will be saved across re-entrances. They are a very powerful tool for asynchronous programming, especially when combined with Promises. They can also be useful for creating loops with special requirements. //We can nest generator functions inside each other to create more complex structures and pass them arguments while we are calling them. //The example below will show a useful case of how we can use generator functions and Symbol.iterators together. /* const arr = ['0', '1', '4', 'a', '9', 'c', '16']; const my_obj = { [Symbol.iterator]: function*() { for(let index of arr) { yield `${index}`; } } }; const all = [...my_obj] //Here you can replace the '[...my_obj]' with 'arr'. .map(i => parseInt(i, 10)) .map(Math.sqrt) .filter((i) => i < 5) // try changing the value of 5 to 4 see what happens. .reduce((i, d) => i + d); // comment this line while you are changing the value of the line above console.log(all); */ //We create an object of 7 elements by using Symbol.iterator and generator functions. In the second part, we assign our object to a constant all. At the end, we print its value. //////////////////////// //Another type of method is the static method, which cannot be called through a class instance. Static methods are often used to create utility functions for an application. class Point { constructor(x, y) { this.x = x; this.y = y; } static distance(a, b) { const dx = a.x - b.x; const dy = a.y - b.y; return Math.hypot(dx, dy); } } const p1 = new Point(7, 2); const p2 = new Point(3, 8); console.log(Point.distance(p1, p2)); /////////////////////// //Inheritance in ES6 //In the code below, the Dog class is a child of the Animal class, inheriting its properties and methods using the keyword "extends". class Animal { constructor(name) { this.name = name; } speak() { document.write(this.name + ' makes a noise.'); } } class Dog extends Animal { speak() { document.write(this.name + ' barks.' + "
"); } } let dog = new Dog('Rex'); dog.speak(); // Rex barks. //If there is a constructor present in the subclass, it needs to first call super() before using this. Also, the super keyword is used to call parent's methods. class BigCat { constructor(name1) { this.name1 = name1; } roar() { document.write(this.name1 + ' makes a noise.' + "
"); } } class Lion extends BigCat { roar() { super.roar(); // Super document.write(this.name1 + ' roars.' + "
"); } } let lion = new Lion('Lion'); lion.roar(); // Lion makes a noise. // Lion barks. //In the code above, the parent's speak() method is called using the super keyword. //Here's an example of declaring a class student which inherits from the Human class. class Human { constructor(name){ this.name = name; } } class Student extends Human { constructor(name, age) { super(name); this.age = age; } } //////////////////////// //ES6 Map /*An Object is similar to Map but there are important differences that make using a Map preferable in certain cases: 1) The keys can be any type including functions, objects, and any primitive. 2) You can get the size of a Map. 3) You can directly iterate over Map. 4) Performance of the Map is better in scenarios involving frequent addition and removal of key/value pairs.*/ //The size property returns the number of key/value pairs in a map. let map = new Map([['k1', 'v1'], ['k2', 'v2']]); document.write(map.size + "
"); // 2 /*Methods set(key, value) Adds a specified key/value pair to the map. If the specified key already exists, value corresponding to it is replaced with the specified value. get(key) Gets the value corresponding to a specified key in the map. If the specified key doesn't exist, undefined is returned. has(key) Returns true if a specified key exists in the map and false otherwise. delete(key) Deletes the key/value pair with a specified key from the map and returns true. Returns false if the element does not exist. clear() Removes all key/value pairs from map. keys() Returns an Iterator of keys in the map for each element. values() Returns an Iterator of values in the map for each element. entries() Returns an Iterator of array[key, value] in the map for each element.*/ let map1 = new Map(); map1.set('k1', 'v1').set('k2', 'v2'); document.write(map1.get('k1')); // v1 document.write(map1.has('k2')); // true for (let kv of map1.entries()) document.write(kv[0] + " : " + kv[1]); ///////////////////////// /*It is a good practice to divide your related code into modules. Before ES6 there were some libraries which made this possible (e.g., RequireJS, CommonJS). ES6 is now supporting this feature natively. Considerations when using modules: The first consideration is maintainability. A module is independent of other modules, making improvements and expansion possible without any dependency on code in other modules. The second consideration is namespacing. In an earlier lesson, we talked about variables and scope. As you know, vars are globally declared, so it's common to have namespace pollution where unrelated variables are accessible all over our code. Modules solve this problem by creating a private space for variables. Another important consideration is reusability. When we write code that can be used in other projects, modules make it possible to easily reuse the code without having to rewrite it in a new project.*/ /* // lib/math.js export let sum = (x, y) => { return x + y; } export let pi = 3.14; // app.js import * as math from "lib/math" console.log(`2p = + ${math.sum(math.pi, math.pi)}`) */ //Here we are exporting the sum function and the pi variable so we can use them in different files. //ES6 supports modules officially, however, some browsers are not supporting modules natively yet. So, we should use bundlers (builders) such as Webpack or Browserify to run our code. //////////////////////// //Array Element Finding //The legacy way to find the first element of an array by its value and a rule was the following: [4, 5, 1, 8, 2, 0].filter(function (x) { return x > 3; })[0]; //The new syntax is cleaner and more robust: [4, 5, 1, 8, 2, 0].find(x => x > 3); //You can also get the index of the item above by using the findIndex() method: [4, 5, 1, 8, 2, 0].findIndex(x => x > 3); ////////////////////// //It is always a good practice to refactor your code with the new syntax to learn new things and make your code more understandable.