Important keywords in Javascript
There are important keywords, if you’re senior developer you may already know, if you’re a beginner you should find out about it:
- Javascript Engine: Google V8, SpiderMonkey
- Execution Context: Global Execution Context, Local Execution Context
- Call Stack
- Global Memory
Visualize Javascript code executions
- == vs === vs typeof
1 == "1" //true
1 === "1" //false
typeof {} //object
typeof "String" //String- Value Types, Reference Types
- Value Types: String, Number, undefined, Boolean, null
- Reference Types: Object, Array, Function
- Lexical Scope, Function Scope, Block Scope
- Expression, statements, function declaration, function expression, named function expression
- Expression: javascript code snippets that result in a single value.
- Statements: if-else, while, do-while, for, switch, for-in, with, variable declaration
1 == "1" //expression
1 + 2 * 3 //expression
true && isExactly() //expression
functionCall() //expression
if (true) { //statements
a = 1+1;
}- funcion declaration, function expression, named function expression
- Resource: link
//function declaration
function getPoint(){
return [1, 1];
}
//function expression
var getPoint = function(){
return [1, 1];
}
//named function expression
var addVariable = function addFunction(param1, param2) {
var res = param1 + param2;
if (res === 30) {
res = addFunction(res, 10);
}
return res;
} - IIFE, Modules, Namespaces
- Javascript modules, module formats, module loaders and module bundlers
- Message Queue and Event Loop
- Dom and Layout Trees
- Render tree: DOM and CSSOM, combine the DOM and CSSOM into a render tree, run layout on the render tree
- Factories and Classes
//ES5: class Hero
function Hero(name, level) {
this.name = name;
this.level = level;
};
Hero.prototype.greet = function(){
return '${this.name} says Hello.';
}
//ES5: class Mage extends Hero
function Mage(name, level, spell) {
Hero.call(this, name, level);
this.spell = spell;
}
//Note: class Mage don't has function greet()
//ES6: class Hero
class Hero {
constructor(name, level) {
this.name = name;
this.level = level;
}
// Adding a method to the constructor
greet() {
return `${this.name} says hello.`;
}
}
class Mage extends Hero {
constructor(name, level, spell) {
// Chain constructor with super
super(name, level);
// Add a new property
this.spell = spell;
}
}
//Note: class Mage don't has function greet()- this, call, apply, bind
- Function.prototype.call()
- Function.prototype.apply()
- Function.prototype.bind()
var obj = { name: 'Truong Dam'};
var greeting = function(a, b){
return 'welcome ' + this.name + ' to' + a + ' at ' + b;
}
console.log(greeting.call(obj, 'hcm city', '2018)); // function.prototype.call()
console.log(greeting.apply(obj, ['hcm city','2018']); // function.protorype.apply()
var bound = greeting.bind(obj); // function.prototype.bind()
console.log(bound('hcm', '2018');- Object.create, Object.assign
var obj = {
name: "truong dam",
printIntro : function() {
console.log('My name is ${this.name}. I live at ${this.city} ');
}
};
var copyObj = Object.create(obj);
copyObj.city = 'hcm';
copyObj.printIntro();
var asObj = Object.assign({class:'economic', age: '22'}, obj);
console.log(asObj.class, asObj.age, asObj.name);
-
Map, filter, reduce link
- Pure function, side effects, state mutation
- Closure
- Promise
var isMove = false;
var willMoveCity = new Promise( function(resolve, reject){
if (isMove){
var destination = {
city : 'hcm',
time: 2018
};
resolve(destination);
} else {
var reason = new Error('family don't move');
reject(reason);
}
});