Skip to content

Instantly share code, notes, and snippets.

@danilosilvadev
Last active June 7, 2021 15:25
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save danilosilvadev/c013c95f395821e573244b8b98c287b3 to your computer and use it in GitHub Desktop.
Save danilosilvadev/c013c95f395821e573244b8b98c287b3 to your computer and use it in GitHub Desktop.
A quick guide to reference the ES06
//This gist is a fast reference to ES06 to whose already knows es05.
//I'm trying to use a different approach: first the example and after the explanation.
//Lesson 1: Template literals
console.log(`hello ${firstname},
how are you?`);
//Template literals are string literals with support for interpolation(using ${variable}) and multiple lines.
//Lesson 2: Tagged templates
var a = 5;
var b = 10;
function tagFun(strings, ...values){
console.log(strings[0]); //Hello
console.log(values[0]); // 15
}
tagFun `Hello ${a + b}`;
//These are functions calls whose parameters are provided via template literals.
//Lesson 3: let
//It's the same as "var" but is block scoped and have some restrictions like:
//Can't be created 2 variables let with the same name or referenced before be created.
//Lesson 4: const
const PI = 3.14;
//ES06 can create constants using the keyword "const". Their value are finals and cannot be re-assigned.
//Lesson 5: for...of
let values = [10, 20,30];
for(let value of values){
console.log(value);
}
//output:
//10
//20
//30
//for-of is a new loop that replaces for-in and forEach().
//Lesson 6: Arrow Functions
//With arrow functions
let intro = () => "welcome";
//The same but without arrow functions
let intro = function intro(){
return "welcome";
}
//Now an example with parameters
let multiply = value => value*5;
//More than one parameter
let multiply = (value1, value2) => value1*value2;
//Returning objects
let f = () => ({bar: 123})
//They replace functions to anonymous functions using functional programming approach.
//PS: can be used in map functions.
//Lesson 7: Rest parameter
function student(name, ...marks){
console.log(name); //myname
console.log(marks); //[10,20,40,30]
}
student('myname', 10, 20, 40, 30);
//The "..." is a tool that when putted in front of the last formal parameter means
//that it will receive all remaining actial parameters in an array.
//Lesson 8: Default parameters
function multiply(value1, value2 =1){
return value1*value2;
}
console.log(multiply(4)); //output: 4
//You can initialize parameters variables to be displayed as default in case of
//the variable don't receive any value.
//PS: work's too if the default be a function, like (value1, value2 = somevalue())
//Lesson 9: Spread operator
function myFunction(x, y, z){
console.log(x);
console.log(y);
console.log(z);
}
let args = [0, 1, 2];
myFunction(...args);
//output:
//0
//1
//2
//The spread operator is very similar to the rest parameter in its syntax, but does the opposite.
//Lesson 10: Destructuring
//Object
const obj = {total:26, isValid:true};
const {total, inValid} = obj;
console.log(total); //26
console.log(isValid); //true
//or
const obj = {total:26, isValid:true};
const {total: value1, inValid: value2} = obj;
console.log(value1); //26
console.log(value2); //true
//Array
let valueArray = [1, 2, 3];
let [value1, value2, value3] = valueArray;
console.log(value1); //1
console.log(value2); //2
console.log(value3); //3
//Arrays can have a default value too
let [one="black", two="white"] = [1];
console.log(one); //1
console.log(two); //white
//For of loop
const user = [
{name:'Robin', age:'23'},
{name:'Sid', age:'27'},
];
for (const {name, age} of user){
console.log(name, age);
}
//Output:
//Robin 23
//Sid 27
//Destructuring is a convenient way of extracting values from data stored in objects and arrays even if nested.
//Lesson 11: Classes
class Programing{/*some code here*/}
let classExample = class Language extends Programming {
let firstName;
let lastName;
constructor(firstName, lastName){
super();
this.firstName = firstName;
this.lastName = lastName;
}
fullName(){
return this.firstName + ' ' + this.lastName;
}
}
let newObject = new Language('ecma', 'script');
console.log(newObect.fullName);
//Like in java classes are abstractions that can be used to create objects, inherit and accessed by contructors.
//Classes don't need to have a name, like functions.
//PS: Classes aren't hoisted.
//PS: static methods don't need objects to be call, and are also not callable when the class is instantiated.
//Lesson 12: Promise
//Needs a good example and a better explanation.
//Promisse objects are used to async tasks.
//Lesson 13: Modules
//package1/util.js
function getRandomNumber(){
return Math.random();
}
export {getRandomNumber as random }; //You can rename using "as" if you want.
//package2/main.js
import {random from ./package1}
//or
import util.js from '../package2/util.js'
console.log(getRandomNumber()); //some random number
//ES06 modules are automatically strict-mode code. It is a design pattern very usefull in ES06
//that is just separate by packages your modules, and to comunicate them use import or export keywords.
//Lesson 14: More of import/export
//Lesson 15: Collections
//Map
let colorsMap = new Map();
colorsMap.set('redkey', 'red'); //(key, value)
let map = new map([
[1, 'one'],
[2, 'two']
]);
console.log(map.size); //2
map.delete('2'); //Now the map has just 1 element
for (let [key, value] of map){
console.log(`key: ${key} Value: ${value}`);
} //Output: key: 1 value: one
map.clear(); //new size 0
//WeakMap
//needs data
//Set
//needs data
//WeakSet
//needs data
//Map, WeakMap, Set and WeakSet are the new data structures of ES06
//Well done, now you can play with this new toy. lol
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment