Let / var / const

var → accessible within functions

let → accessible within block

const → accessible within block

function say() {
	for(let i = 0; i < 5; i++) {
		console.log(print(i))
	}
	
	// Error below when use let, but ok with use var
	console.log(print(i))
}

A method

A function inside an object

const person = {
	name: 'J'
	,walk: function() { console.log( this )}
	,talk() {}            // ES6
}

Access object variables

person.talk();
person.name
person['name']

this keyword

// call method, return object
person.walk()
// `this` return `person` in console.log()

// call function ( in global ), return `window` object
const walk = function() { console.log( this )}
walk()
// console printed `window`

// if global function of `this` return `undefined`,
// it is because React app is in strict mode

Bind

object.bind( other ) bind this object to another

// a method
person.walk()

// an object
person.walk

// bind `walk` object manually to person
const walk = person.walk.bind(person)
walk()

// console printed `person`

Arrow function

// old
const square = function(n) {
	return n * n;
}

// ES6
const square = (n) => {
	return n * n;
}

// ES6, no need () if only 1 parameter
// no need `{}` and `return` if only 1 line
const square = n => n * n;

This that pattern

Arrow function does not rebind this

const person = {
	talk() {
		setTimeout(function() {
			console.log("this", this);
		}, 1000);
	}
};

person.talk();
// return `window` object, as setTimeout() is global function

// Fix it with `that`
const person = {
	talk() {
		var self = this;
		setTimeout(function() {
			console.log("this", self);
		}, 1000);
	}
};

// Or, with arrow function, as it does not rebind `this`
const person = {
	talk() {
		setTimeout(() => {
			console.log("this", this);
		}, 1000);
	}
};

Array.map()

const colors = ['red', 'green', 'blue']
// old
const items = colors.map(function(color) {
	return '<li>' + color + '</li>';
});

// ES6
const items = colors.map(color => '<li>' + color + '</li>');

// ES6 template literals
const items = colors.map(color => `<li>${color}</li>`);

Object Destructuring

const address = {
	street: ''
	,city: ''
	,country: ''
}

// object destructuring: create 3 const at once
const { street, city, country } = address;

// Can use alias
const { street: st } = address;

Spread Operator

const first = [1,2,3];
const second = [4,5,6];

//old
const combined = first.concat(second);

// spread operator ...
const combined = [...first, ...second];

Clone

const first = { name: "Mosh" };
const second = { job: "Instructor" };

const combined = { ...first, ...second, location: "US" };

Class

class Person {
	constructor(name) {
		this.name = name;
	}

	walk() {
		console.log("walk");
	}
}

const person = new Person("j");

Inheritance

class Teacher extends Person {
	constructor(name, degree) {
		super(name);
		this.degree = degree;
	}

	teach() {
		console.log("teach");
	}
}

const teacher = new Teacher("j", "Computer Science");

Module

Store code in different files

export makes classes public

// In person.js
export class Person {
	// Same as above
}

// In teacher.js
import { Person } from './person '
export class Teacher extends Person {
	// Same as above
}

Default exports

If a module only have 1 object you want to export, u can make it default export

// In person.js
export default class Person {
	// Same as above
}

export function promote() {}


// No {} needed for default export's object
// In teacher.js
import Person, { promote } from './person '
export class Teacher extends Person {
	// Same as above
}