string, number, boolean, null, undefined //primitive, everything else object
object = {type:"fiat", color:"white"}; //object
function Person(first, last, age, eyecolor) { //constructor function, 1st class object
this.firstName = first;
this.lastName = last;
}
var myFather = new Person("John", "Doe");
NaN: not a legal number
undefined: does not have value
null: is empty, not pointing to memory address
compare two javascript objects always return false
2. == and ===
3. closure
var counter = 0;
return function () {return counter += 1;}
})();
/* add() is a function, where it searches for the 'counter' value via lexical scope chain till find it */
2. == and ===
- never use ==
- === compare 'type' and 'value' for primitive type
- === compare 'reference' for complex type
- == do type conversion before comparison
3. closure
- closure is function with preserved scope data
- closure is an (usually anonymous) inner function within a outer function
- inner function access latest value of the outer function's variable
- essence: function can always see the variable in scope when it's defined, if the variable is not global, it will not pollute namespace
var counter = 0;
return function () {return counter += 1;}
})();
/* add() is a function, where it searches for the 'counter' value via lexical scope chain till find it */
add(); // 1
add(); // 2
add(); // 3
4. hoist
- 'hoisted' means you can use it before declaring it
- 'var' and function declaration are hoisted
- 'let' and 'const' is not hoisted
- always declare your variables at the top!
function foo() {
function bar() {
return 3;
}
return bar();
function bar() {
return 8;
}
}
alert(foo()); //8
function foo(){
var bar = function() {
return 3;
};
return bar();
var bar = function() {
return 8;
};
}
alert(foo()); //3
5. const
- const is not const value but const reference
- cannot reassign const value, array, object
- can change element of const array, can change property of const object
6. function
7. property
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
- javascript function is OBJECT!
- first class function/object: language treat function as variable
- high-order function: function that works on other function, i.e. can accept function as parameter, can return function as result
- a free form object can add property any time
- an object created from constructor can not add additional property
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
8. prototype chain
9. wait for ajax call to complete
10. promise
11. arrow function (arguments on the left, return type on the right)
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression // equivalent to: => { return expression; }
singleParam => { statements }
() => { statements }
params => ({foo: bar})
var MakePoint: () => {x: number; y: number;}; //function declaration, not definition
var MakePoint = () => 1; //function definition
12. scope
13. context vs scope
14. this
name: "John",
getName : function() {
return this.name;
}
};
person.getName(); //John, 'this' refer to person
var person = {
name: "John",
getName : () => {
return this.name;
}
};
person.getName(); //window.name, 'this' refer to window
function Person(name) {
this.name = name;
this.getName = () => {
return this.name;
}
}
person = new Person('Mike');
person.getName(); //Mike
15. curried function
16. callback
function getWidthOfImage(src) {
var imgWidth;
var img = document.createElement('img');
img.onload = function() {
imgWidth = this.width; //async call
};
return imgWidth; //return 'undefined'
}
var width = getWidthOfImage('lolcat.png');
alert(width);
function getWidthOfImage(src, cb) {
var img = document.createElement('img');
img.onload = function() {
cb(this.width);
};
}
getWidthOfImage('lolcat.png', function (width) {
alert(width); //using callback
});
17. var vs let, const
18. common function
19. ...
20. async and await
21. catch error for promise
22. generator and yield
23. IIFE
/* */
- all javascript objects (including function) inherit property and method from prototype
- 'prototype' allow you to add new property and method to constructor function
- after prototype is changed, all newly created object will have the changed property value, all previously created object will have previous value
- '__proto__' is the property of an object, pointing to its prototype
9. wait for ajax call to complete
- it depends on how ajax call is implemented
- if implemented in jquery, use jquery function
10. promise
- implementation
var promise = new Promise (function(resolve, reject) {
// "producing code" (may take some time)
if (/* everything turned out fine */) {
resolve("stuff worked!"); //return 'stuff worked!'
}
else {
reject(Error("It broke")); //return Error('it broke')
}
});
- usage
promise.then (
onFulfilled (result) {
console.log(result); // "Stuff worked!"
},
onRejected (err) {
console.log(err); // Error: "It broke"
});
promise.catch (
onRejected (err) {
console.log(err); // Error: "It broke"
});
- function needs to return a promise to be able to use .then()
11. arrow function (arguments on the left, return type on the right)
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression // equivalent to: => { return expression; }
singleParam => { statements }
() => { statements }
params => ({foo: bar})
const multiplyES6 = (x, y) => { return x * y };
(id, name) => ({ id: id, name: name });var MakePoint: () => {x: number; y: number;}; //function declaration, not definition
var MakePoint = () => 1; //function definition
12. scope
- global scope
- function scope and block scope
- 'var' has functional scope
- 'let' and 'const' has block scope
- declare variable at beginning of script
for (var i=0; i<10; i++) {
// block scope for the for statement
}
console.log(i) // => 10
for (let i=0; i<10; i++) {
// block scope for the for statement
}
console.log(i) // ReferenceError: i is not defined
- closure: outer function variable visible in inner function
13. context vs scope
- context is the value of 'this' when function is called
- scope is how javascript resolve a variable at run time
14. this
- in regular function 'this' refer to current context (the object that calls the function)
- in arrow function 'this' will always be the context when function is initially defined
- closure can not access outer function's 'this'
name: "John",
getName : function() {
return this.name;
}
};
person.getName(); //John, 'this' refer to person
var person = {
name: "John",
getName : () => {
return this.name;
}
};
person.getName(); //window.name, 'this' refer to window
function Person(name) {
this.name = name;
this.getName = () => {
return this.name;
}
}
person = new Person('Mike');
person.getName(); //Mike
15. curried function
- transform a function from f(a, b, c) to f(a) (b) (c)
- equivalent curried function: let add = x => y => x + y;
16. callback
function getWidthOfImage(src) {
var imgWidth;
var img = document.createElement('img');
img.onload = function() {
imgWidth = this.width; //async call
};
return imgWidth; //return 'undefined'
}
var width = getWidthOfImage('lolcat.png');
alert(width);
function getWidthOfImage(src, cb) {
var img = document.createElement('img');
img.onload = function() {
cb(this.width);
};
}
getWidthOfImage('lolcat.png', function (width) {
alert(width); //using callback
});
17. var vs let, const
- var is scoped to the nearest function scope
- let, const is scoped to the nearest block scope
- use 'let' if you'll reassign value
- use 'const' unless you'll reassign value
- never use 'var'
18. common function
- map() create a new array when calling a function on current array
- splice() insert item into array at specified index
- split() split a string into an array of substrings
- slice(begin, end) return part of the string
19. ...
- rest operatunor: get the argument list passed to function
function countArguments(...args) {
return args.length;
}
20. async and await
- async function returns a promise
- you can use await with any function that returns a promise (not necessarily async)
- you should use async function ONLY when you use await inside the function
- makes it easier to use common programming constructs like return and try/catch
- await won't work in the top level code
21. catch error for promise
- use asyn/await
- ending promise chain with catch()
save()
.then(
handleSuccess,
handleNetworkError
)
.catch(handleProgrammerError)
;
22. generator and yield
- generator return an iterator
- each call to the iterator's next() function return the next step
- each step's value is the value specified by yield
- does not pollute global namespace
/* */
return {} //return object literal
})()
24. shallow copy vs deep copy
})()
24. shallow copy vs deep copy
- primitive type: pass value
- structural type: pass reference
- shallow copy does not work with nested objects
25. optional access operator
- ? // optional chaining, if object is undefined or null, it will short circuit to undefined instead of throwing error
reference
1. javascript closure
2. javascript promise
3. how javascript promise works
4. understand javascript this
5. understanding javascript closure
6. ES6 arrow functions
7. typescript deep dive
8. javascript scope and context
9. when to use arrow function
10. call back, promise and async await
11. the modern javascript tutorial
12. javascript scope and closures
13. function scope and block scope
14. catch error in javascript promise
14. arrow function
15. javascript inheritance
16, top javascript to learn 2017
17. promise resolve and reject
18. From JavaScript Promises to Async/Await: why bother?
19. javascript generators: understanding them
20. the basics of javaScript generators
21. the modern javascript tutorial
22. need to return a promise to be used by then()
23. javascript inheritance pattern
24. 6-advanced-javascript-techniques-you-should-know
25. 23 advanced javascript interview questions
26. javascript.info async-await
1. javascript closure
2. javascript promise
3. how javascript promise works
4. understand javascript this
5. understanding javascript closure
6. ES6 arrow functions
7. typescript deep dive
8. javascript scope and context
9. when to use arrow function
10. call back, promise and async await
11. the modern javascript tutorial
12. javascript scope and closures
13. function scope and block scope
14. catch error in javascript promise
14. arrow function
15. javascript inheritance
16, top javascript to learn 2017
17. promise resolve and reject
18. From JavaScript Promises to Async/Await: why bother?
19. javascript generators: understanding them
20. the basics of javaScript generators
21. the modern javascript tutorial
22. need to return a promise to be used by then()
23. javascript inheritance pattern
24. 6-advanced-javascript-techniques-you-should-know
25. 23 advanced javascript interview questions
26. javascript.info async-await
