Topics: tools, development
Author: Maitrik
var doWork = function(flag){
if(flag){
let x = 3;
return x;
}
}
let doWork = function(url, {data, cache, headers}){
return data;
}
let result = doWork(
"api/test", {
data: "test",
cache: false
}
);
expect(result).toBe("test");
var doWok = function (name="Scott"){
return name
};
var result = doWork(); // Scott
var result = doWork("undefined"); // Scott
var result = doWork(""); // No
class Person{
//---Constructor
constructor(name){
this.name = name;
}
//---Getter
get name(){
return this._name.toUpperCase();
}
//---Setter
set name(newValue){
if(newValue){
this._name = nameValue;
}
}
doWork(){
return "Not work and free";
}
}
//---Inheritance, Person(SuperClass) , Employee(BaseClass)
class Employee extends Person {
constructor(title, name){
//---Can invoke Super methods
super(name);
this.title = title;
}
get title(){
return this._title;
}
//---Override super methods
doWork(){
return `${this._name} is working and get paid`;
return "Paid" ;
//---Can invoke Super methods
return super() + "Paid" ;
}
}
let e1 = new Employee("Dev","Maitrik");
let p1 = new Person("Kruti");
var numbers = [1,2,3,4];
var sum = numbers.forEach(n => += n); // output 10
var doubled = numbers.map(n => n * 2); // output [2,4,6,8]
//---Generators with for of loop
let numbers = function*(start, end){
for (let i = start; i <= end; i++){
console.log(i);
}
}
let sum = 0 ;
console.log("next");
//---For of
for(let n of numbers(1,5)){
sum += n;
console.log("next");
}
//---Generators to avoid it for not loop through entire array.
let count = 0;
let company = new Company();
company.addEmployees("Tim", "Maitrik", "Kruti", "Tom", "Parth")
let filter = function*(items, predicate){
for(let item of items){
console.log("filter", item);
if(predicate(item)){
yield item;
}
}
}
for (let employee of filter(company, e => e[0] == 'T')){
count += 1;
}
// Output will be 2
var numbers = [for (n of [1,2,3]) n * n]; / [1,4,9]
var numbers = [for (n of [1,2,3]) if(n > 1) n * n]; / [4,9]
var numbers - (for (n of [1,2,3]) n * n); / [1,4,9]
var ary = [1,5,10];
var match = ary.find(item => item > 8); // 10
var ary = [1,5,10].find(item => item > 3); // Index 1 of number 5
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
const bar = ["a", "b", "c"];
Array.from(bar); // ["a", "b", "c"]
Array.from('foo'); // ["f", "o", "o"]
var a = ['a', 'b', 'c'];
var iterator = a.entries();
for (let e of iterator) {
console.log(e);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
var mySet = new Set();
mySet.add(1);
mySet.add(5);
mySet.add('some text')
mySet.size; // 3
var myMap = new Map();
myMap.set('a', 'alpha');
myMap.set('b', 'beta');
myMap.set('g', 'gamma');
myMap.get('b'); // Returns "beta".
myMap.size // 3
if( -0 === 0) // true
Object.is( -0, 0) // false
if( NaN === NaN) // false
Object.is( NaN, NaN) // true
Object.assign(target, ...sources)
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself
let view = new Proxy({
selected: null
},
{
set: function(obj, prop, newval) {
let oldval = obj[prop];
if (prop === 'selected') {
if (oldval) {
oldval.setAttribute('aria-selected', 'false');
}
if (newval) {
newval.setAttribute('aria-selected', 'true');
}
}
// The default behavior to store the value
obj[prop] = newval;
// Indicate success
return true;
}
});
let i1 = view.selected = document.getElementById('item-1');
console.log(i1.getAttribute('aria-selected')); // 'true'
let i2 = view.selected = document.getElementById('item-2');
console.log(i1.getAttribute('aria-selected')); // 'false'
var singleton = (function () {
var privateVariable;
function privateFunction(x) {
...privateVariable...
}
return {
firstMethod: function (a, b) {
...privateVariable...
},
secondMethod: function (c) {
...privateFunction()...
}
};
}());
IIFE (immediately invoked function expression) modules pattern
CommonJS Modules: The dominant implementation of this standard is in Node.js (Node.js modules have a few features that go beyond CommonJS). Characteristics: - Compact syntax - Designed for synchronous loading - Main use: server
Asynchronous Module Definition (AMD): The most popular implementation of this standard is RequireJS. Characteristics: - Slightly more complicated syntax, enabling AMD to work without eval() (or a compilation step). - Designed for asynchronous loading - Main use: browsers
ECMAScript 6 modules - Similar to CommonJS, they have a compact syntax, a preference for single exports and support for cyclic dependencies. - Similar to AMD, they have direct support for asynchronous loading and configurable module loading. - Named exports (several per module)
//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
return x * x;
}
function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
//------ main.js Import whole module------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5
//------ myFunc.js ------
default function () { ... };
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
// Default exports and named exports
import { named } from 'src/mylib';
import { named1, named2 } from 'src/mylib';
import theDefault from 'src/mylib';
import theDefault, { named1, named2 } from 'src/mylib';
// Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib';
// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';
import theDefault, * as mylib from 'src/mylib';
// Only load the module, don’t import anything
import 'src/mylib';
// All export can work with default naming too.
var myVar1 = ...;
let myVar2 = ...;
const MY_CONST = ...;
function myFunc() {
...
}
function* myGeneratorFunc() {
...
}
class MyClass {
...
}
// list everything you want to export at the end of the module
const MY_CONST = ...;
function myFunc() {
...
}
{ MY_CONST, myFunc };
{ MY_CONST as THE_CONST, myFunc as theFunc };