API is an acronym for "Application Programming Interface". It is a type of software interface that offers a service to other pieces of software. Using a restaurant setting as an example, the servers and waiters can be referred to as an API. Their job is to fetch from the kitchen (the backend/server) and deliver to the feeding area (front end).

There are different types of APIs but the most popular is the REST API. You send requests to the server, the server uses the data you send to run a series of functions and then it sends the output back to the client.

An example of a REST API is the fetch.

fetch(url, options)
.then(res => )
.then(data => )
.catch(e => console.log(e)
// Url - The URL on which the request is made 
// Options - This is optional. It is an object that consists 
// of the additional data for the server.

fetch('https://official-joke-api.appspot.com/random_joke')
    .then(response => response.json())
    .then(
        data => ( 
            (setup.innerHTML = data.setup, punchlineBtn.style.display         ='inline-block'), 
            (joke = data)
        )
    .catch(e => console.log(e)
 )

Async awaits and promises are features that let you push the handling of a task until a later time. Async awaits lets you push the handling of a task until a later time by using the "await" keyword. You can use await with the sync or execute methods of an asynchronous function.

var asyncFunction = function() { var awaitingTask = []; 
// Async awaits lets you defer the handling of a task until a later time by using the await keyword. 

await await sync("task to be executed immediately", await awaitingTask); 
// You can also use the async and await methods of an asynchronous function. await async("task to be executed later", await awaitingTask); 

};

Promises are a feature that let you defer the conclusion of a task until a certain time or a certain condition occurs. You can create a promise using the promise constructor, or using the then and catch methods of a promise object to handle the outcome of a task.

var promise = new Promise( function(resolve, reject) { 
// Resolve the promise if the task is successful. 

if (taskResult == "success") { 
// Reject the promise if the task fails. reject(err); 
} }); 

promise.then(function() { 
// Do something with the resolved value of the promise 
}

Callbacks are functions that get passed in as an argument for another function. The callback function is designed to run after the first function runs.

// Fucntion to be called
function calcSum(){ 
    var x= document.querySelector('.x').value;  
    var y = document.querySelector('.y').value;
    var sum = x + y;
    var sumDisplay = document.querySelector('.display');
    sumDisplay.innerHTML = sum;
} 

// Callback Function
const sum = document.getElementById('sum');
    sum.addEventListener('click', => { 
    calcSum();
}