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);
});
Top comments (0)