Week 15: Async Foundations
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-09-09 20:53:24

---
title: Week 15: Async Foundations 
published: true
description: 
tags: javascript, webdev, codenewbie, beginners
---


####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 

```javascript 

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 
```javascript 

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 

```javascript 

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 

```javascript 

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

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

greet("Tim", upperCaseName); 

```

callbacks with anonymous functions 

```javascript 

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. 

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

function callback(curElement, curIndex, array) {
}
```
##findIndex Example: Find A Number 

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

##findIndex Example: Find First Even 
```javascript 
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)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bz6rtmty0uujr7tjkr2c.png)

###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 

```javascript 

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. 

```javascript
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
```javascript 
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 

```javascript 
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);
});