Matthew Bodily
Lecture Slides for DevMountain's Web Development Course
JavaScript 7
Advanced JavaScript
JavaScript Type Coercion
true
false
+
1
What the heck is this?!
Topics for Today
Type Coercion
Hoisting
Async/Await
Try/Catch
Recursion
Memoization
Type Coercion
Type coercion is the process of converting a value from one datatype to another.
When we use ==, as opposed to ===, JavaScript attempts to coerce the types into the same datatype before evaluating the condition.
Coercion can occur with other operations.
Moral of the story? Use 3 equals instead of 2 unless you have a good reason not to.
JavaScript has internal rules for how datatypes are coerced:
Hoisting
Hoisting in computer terms refers to when variable declarations are "hoisted" to the top of the code file during the compiling phase.
In JavaScript, hoisting works a bit differently, because only variable declarations are hoisted, and not their initializations, or values.
Hoisting enables us to use variables before they are declared in our code, without breaking our program.
Async/Await
function asyncTasks() {
let a = asyncTaskA().then(res => res.data)
let b = asyncTaskB().then(res => res.data)
let c = asyncTaskC().then(res => res.data)
}
async function asyncTasks() {
let a = await asyncTaskA()
let b = await asyncTaskB()
let c = await asyncTaskC()
}
Without async/await:
With async/await:
But what about error handling?
With .then( ) we have .catch( )
One potential problem with async/await is that it doesn't have built in error handling...
Try/Catch
async function asyncTasks() {
try {
let a = await asyncTaskA()
let b = await asyncTaskB()
let c = await asyncTaskC()
let d = await asyncTaskD(c)
}
catch(err) {
console.log(err)
}
}
function asyncTasks() {
let a = asyncTaskA().then(res => res.data)
.catch(err => console.log(err))
let b = asyncTaskB().then(res => res.data)
.catch(err => console.log(err))
let d = asyncTaskC().then(res =>
asyncTaskD(res.data).then(res => res.data)
.catch(err => console.log(err)))
.catch(err => console.log(err))
}
Without async/await:
With async/await:
async function asyncTasks() {
try {
let a = await asyncTaskA()
let b = await asyncTaskB()
let c = await asyncTaskC()
}
catch(err) {
console.log(err)
}
finally {
console.log('do this thing')
}
}
Optional — finally
Note: Try/Catch blocks are not just for asynchronous code. They can be used for any kind of error handling, and it is good practice to use them.
Recursion
function factorial(num) {
if(num === 1) { return 1 };
return num * factorial(num - 1);
}The process in which a function calls itself directly or indirectly is called recursion
The above function enables us to calculate factorial values, by calling itself recursively.
Ex: 5! is 5 * 4 * 3 * 2 * 1
Memoization
Memoization is an optimization technique that is meant to increase a functions performance by caching its previously computed results.
function memoize(func) {
var cache = {};
return function() {
var key = JSON.stringify(arguments);
if(cache[key]) {
return cache[key];
}
else {
var val = func(...arguments);
cache[key] = val;
return val;
}
};
}Continued on next slide...
Memoization
var factorial = memoize(function(num) {
console.log('loading factorial(' + num + ')');
if(num === 1) { return 1 };
return num * factorial(num - 1);
});
// first call
console.log(factorial(3));
//=> loading factorial(3)
//=> loading factorial(2)
//=> loading factorial(1)
//=> 6
// successive calls
console.log(factorial(3)); //=> 6
console.log(factorial(3)); //=> 6
// short circuit higher factorial calls
console.log(factorial(4));
//=> loading factorial(4)
//=> 24For more info, see here: http://inlehmansterms.net/2015/03/01/javascript-memoization/
JavaScript 7
By Matthew Bodily
JavaScript 7
Advanced JavaScript Topics
