Week 15: Async Foundations

This week focus was on Async Foundations from Colt Steele The Advanced Web Developer Bootcamp.

 -Callback Functions  
 -findIndex 
 -The Stack and The Heap 
 -The Stack: An Example 
 -setTimeout and setInterval
 -The Event Loop and The Queue
 -Promise Basics

Callback Functions

define callback functions

a callbackfunction is passed into another function as a parameter then invoked by that other function


function callback() {
  console.log("Coming from callback"); 
}

function higherOrder(fn) {
 console.log("About to call callback"); 
 fn(); 
 console.log("Callback has been invoked"); 
}
higherOrder(callback)

define higher order functions

A higher order function is a function that accepts a callback as a parameter.

What are callbacks used for?

Advanced Array Methods
Browser events (click, submit, etc...)
AJAX Requests
React Development

code without callbacks


function sendMessageConsole(message) {
 console.log(message); 
}

function sendMessageAlert(message) {
 alert(message); 
}

function sendMessageConfirm(message) {
 return confirm(message); 
}

sendMessageAlert("Lots of duplication");

same code with callbacks


function sendMessage(message, callback) {
 return callback(message); 
}

sendMessage("Message for console", console.log); 

sendMessage("Message for alert", alert); 

var answer = sendMessage("Are you sure??", confirm);

another example of a callback function


function greet(name, formatter) {
 return "Hello, + formatter(name); 
} 

function upperCaseName(name) {
 return name.toUpperCase(); 
} 

greet("Tim", upperCaseName);

callbacks with anonymous functions


function greet(name, formatter) {
 return "Hello, " + formatter(name); 
}

greet("Tim", function(name) {
 return name.toUpperCase(); 
}); 

greet("Tim", function(name) {
 return name + "!!!!!"; 
});

use a callback function to make your code more general

create callbacks using anonymous functions

findIndex

describe and use the findIndex function

findIndex returns the index of the first element in the array for which the callback returns a truthy value. -1 is returned if the callback never returns a truthy value.

function findIndex(array, callback) {
//findIndex code to be implemented 
}

function callback(curElement, curIndex, array) {
}

findIndex Example: Find A Number

var arr = [3,4,6,2,1]; 
findIndex(arr, function(num, index, array) {
return num === 6; 
});

findIndex Example: Find First Even

var arr = [5,11,13,8,6,7]; 
findIndex(arr, function(num, index, array) {
 return num % 2 === 0; 
});

The Stack and The Heap

describe what the stack is

describe a stack frame

describe the heap

What is the Stack?

A stack is an ordered data structure that keeps track of functions invocations

How Your Code Changes the Stack

Whenever you invoke a function, the details of the invocation are saved to the top of the stack (pushed to the top)
Whenever a function returns, the information about the invocation is taken off the top of the stack (popped off of the top)

Stack Definition

An ordered set of stack frames most recently invoked function is on the top of the stack. The bottom of the stack is the first function invoked. The stack is processed from top to bottom.

Heap Definition

An area in memory where the data is stored.

setTimeout and setInterval

setTimeout

setTimeout is a function that asynchronously invokes a callback after a delay in milliseconds


function callback() {
 console.log("callback function"); 
}
var delay = 1000; //delay is in milliseconds
setTimeout(callback, delay); 

setTimeout(function() {
 console.log("Runs in approx. 200ms"); 
}, 2000);

setInterval

setInterval is a function that continually invokes a callback after every X milliseconds, where X is provided to setInterval.

function callback() {
 console.log("callback is called continuously"); 
}
 var repeat = 3000; 
 setTimeout(callback, repeat);

The Event Loop and The Queue

define the event loop and the queue

define JavaScript as a single threaded language

The Queue

The queue is an ordered list of functions waiting to be placed on the stack. Functions in the queue are processed on a first in, first out basis (FIFO)

The Event Loop

Functionality in the JavaScript runtime that checks the queue when the stack is empty. If the stack is empty, the front of the queue is placed in the stack.

Javascript is Single Threaded

Single Threaded: Code execution is linear. Code that is running cannot be interrupted by something else going on in the program.

Single Threaded Example

setTimeout(function() {
 console.log("Hello from the timeout"); 
}, 0); 

for (var 1 = 0; i < 1000000000; i++) {
 var x = i * 2; 
}
console.log("Done with loop");

Promise Basics

define a promise

A promise is an object that represents a task that will be completed in the future.

Creating a promise

var p1 = new Promise(function(resolve, reject) {
 resolve([1,2,3,4]); 
}); 

p1.then(function(arr) {
 console.log("Promise p1 resolved with data:" , arr); 
});

Promise: Handling Errors


javascript 

var p1 = new Promise(function(resolve, reject) {
reject("ERROR"); 
}); 

p1.then(function(data) {
 console.log("Promise p1 resolved with data:", data);
}).catch(function(data) {
  console.log("Promise p1 was rejected with data:", data);
});

Blog