JS ES6 neophyte

var and let: global vs block;

Prevent Object mutation

function freezeObj() {
  "use strict";
  const MATH_CONSTANTS = {
    PI: 3.14
  };
  
  Object.freeze(MATH_CONSTANTS);  // this prevent const object mutation

  try {
    MATH_CONSTANTS.PI = 99;
  } catch( ex ) {
    console.log(ex);
  }
  return MATH_CONSTANTS.PI;
}

const PI = freezeObj();

console.log(PI);

Arrow functions

var magic = function() {
  return new Date();
};

is equivalent to:

var magic = () => {
  return new Date();
};

When only a single return in func body:
var magic = () => new Date();

With Params:

var myConcat = function(arr1, arr2) {
  return arr1.concat(arr2);
};
console.log(myConcat([1, 2], [3, 4, 5]));

same:

var myConcat = (arr1, arr2) => arr1.concat(arr2);
console.log(myConcat([1, 2], [3, 4, 5]));

Higher order (using map, filter && reduce):

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2];

const squareList = (arr) => {
  const squaredIntegers = arr.filter(num => Number.isInteger(num) && num > 0).map(x => x * x);
  return squaredIntegers;
};

const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

map, filter, reduce functions are mostly used w. anonymous function definitions in the form of

arrayName.map/filter/reduce(e/(p1, p2) => blabla);

1. args.map(): call func on each element in args, return mapped res;
2. args.reduce(): call func on all elements, return accumulated res;
3. args.filter(): call func on all eles, return filtered res.

Set Default params

const increment = (function() {
	return function increment(number, value = 1) {
		return number + value;
	};
})();
console.log(increment(5, 2));
console.log(increment(5));

Rest operator (...args); ~ *args in python

const sum = (function() {
	return function sum(x, y, z) {
		const args = [x, y, z];
		return args.reduce((a, b) => a + b, 0);
	}
})();
console.log(sum(1,2,3));

is equivalent to:

const sum = (function() {
	return function sum(...args) {
		return args.reduce((a, b) => a + b, 0);
	}
})();
console.log(sum(1,2,3,4));

Spread operator [...args]: copy✅, reference❌; (make copy)

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;
(function() {
	arr2 = arr1; // reference; change arr2 would change arr1
	arr1[0] = 'potato'
})();
console.log(arr2);

spread operator:

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;
(function() {
	arr2 = [...arr1]; // spread operator; make a copy
	arr1[0] = 'potato'
})();
console.log(arr2);

Destructing assignment {a:b} = obj: assign object values to variables; ~ “unbox” in py/java

template:

var voxel = {x: 3.6, y: 7.4, z: 6.54 };

// old way
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54

// { field: newVariable } = oldVar;
const { x : a, y : b, z : c } = voxel;  

const AVG_TEMP = {
	today: 77.5;
	tomorrow: 79
};

function getTempOfTomorrow(avgTemp) {
	"use strict";

	// destructing 
	const { tomorrow: temp } = avgTemp;

	return temp;
}
console.log(getTempOfTomorrow(AVG_TEMP));

nested:

const LOCAL_FORECAST = {
	today: { min: 72, max: 83 },
	tomorrow: { min: 73.3, max: 84.6 }
};

function getMaxOfTmoorrow(forecast) {
	"use strict";

	const {tomorrow : { max : max_tomorrow }} = forecast;

	return max_tomorrow;
}

console.log(getMaxOfTmoorrow(LOCAL_FORECAST));

Destructing assign [] = arr: assign vars from arrays;

const [z, x] = [1,2,3,4,5,6];
console.log(z, x); // 1 2

const [z, x, , y] = [1, 2, 3, 4, 5, 6];
console.log(z, x, y); // 1 2 4

let a = 8, b = 6;
(() => {
  "use strict";
  [a, b] = [b, a]  
})();
console.log(a); // 6
console.log(b); // 8

Destructing assign with Rest operator

const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list) {

  const [ , , ...arr] = list; 

  return arr;
}
const arr = removeFirstTwo(source);
console.log(arr); 
console.log(source);

Destructing assign: pass an Object as param; or fields of Objects

// create an object with {};
const stats = {
	max: 56.78,
	standard_deviation: 4.34,
	median: 34.54,
	mode: 23.87,
	min: -0.75,
	average: 35.85
};

// create an object in format: func();
const half = (function() {
	return function half({ max, min }) { // pass only desired fields 
		return (max + min) / 2;
	}
})();
console.log(stats);
console.log(half(stats));

---

from above: ways to create objects in js:

1. create several similar objects: new

   function person(fname, lname, age, eyecolor){
     this.firstname = fname;
     this.lastname = lname;
     this.age = age;
     this.eyecolor = eyecolor;
   }
   
   myFather = new person("John", "Doe", 50, "blue");
   document.write(myFather.firstname + " is " + myFather.age + " years old.");

2. create one object of a kind, like a singleton;

   var Robot = {
     metal: "Titanium",
     killAllHumans: function(){
       alert("Exterminate!");
     }
   };
   
   Robot.killAllHumans();

3. initialize propertieis of the objects depending on other properties;

   var NewObject = {};
   
   NewObject['property1'] = value;
   NewObject['property2'] = value;
   NewObject['method'] = function(){ /* function code here */ }

Anyway, {} is used a lot; JS objects are represented in {}.

---

Create Strings w. Template Literals ~ Template in Django MVT

1. xxxx as code block in markdown;
2. ${object fields};

const person = {
	name: "Lei",
	age: 999
};

const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting);

const result = {
	success: ["max-length", "no-amd", "prefer-arrow-functions"],
	failure: ["no-var", "var-on-top", "linebreak"],
  	skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
	const resDisplayArray = [];
	for (let i = 0; i < arr.length; ++i) {
		resDisplayArray.push(`<li class="text-warning">${arr[i]}</li>`)
	}

	return resDisplayArray;
}
const resDisplayArray = makeList(result.failure);

Concise Object literals declarations via Simple fields

const createPerson = (name, age, gender) => {

	return {
		name: name,
		age: age,
		gender: gender
	};
};
console.log(createPerson("Lei", 999, "male"));

Create objects via Class

Old way: constructor function, new

var SpaceShuttle = function(targetPlanet){
  this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');

console.log(zeus.targetPlanet)

New way:

class SpaceShuttle {
	constructor(targetPlanet) {
		this.targetPlanet = targetPlanet;
	}
}
var zeus = new SpaceShuttle('Jupiter');
console.log(zeus.targetPlanet);

another example:

function makeClass() {
	class Vegetable {
		constructor(name) {
			this.name = name;
		}
	}
	return Vegetable; // return a class 
}
const Vegetable = makeClass(); // create a class
const carrot = new Vegetable('carrot'); // create an object
console.log(carrot.name);

Getter, setter

class Book {
	constructor(author) {
		this._author = author;
	}
	// getter
	get writer() {
		return this._writer;
	}
	// setter
	set writer(updatedAuthor) {
		this._author = updatedAuthor;
	}
}

another example:

function makeClass() {
	class Thermostat {
		constructor(temp) {
			this._temp = 5/9 * (temp - 32);
		}
		get temp() {
			return this._temp;
		}
		set temp(updatedTemp) {
			this._temp = updatedTemp;
		}
	}
	return Thermostat; // return a class
}

const Thermostat = makeClass(); // create a class
const thermos = new Thermostat(76); // create an object
let temp = thermos.temp; // object.fieldName
console.log(temp); // 24.4444
thermos.temp = 26;
temperature = thermos.temp; 
console.log(temperature); // 26
`

import

Files can be imported from files that export.

1. In one file string_function.js:
   export const capitalizeString = str => str.toUpperCase()
2. In another file index.js under same path:

   import { capitalizeString } from "./string_function"
   const cap = capitalizeString("hello");
   
   console.log(cap);

Use export to reuse a Code block

const capitalizeString = (string) => {
	return string.charAt(0).toUpperCase() + string.slice(1);
}

export { capitalizeString };

export const foo = "bar";
export const bar = "foo";

// now function capitalizeString, const foo, bar can be imported

create an export fallback w. export default

export default function subtract(x, y) {return x - y;}

import a default export

Suppose there is a file math_functions

import subtract from "math_functions";
subtract(7, 4);

React inline styling

1. styles should be wrapped up with in {}.
2. inside the {} is a JS object.
3. JS object also included in {}.
4. This will make the inline styling two {}.
5. usually JS object is written in the previous places.
6. so two {} are not shown in the same line