JAVASCRIPT

what is asynchronous in javascript

// some functions
function foo() {
	console.log("foo")
}
function bar() {
	console.log("bar")
}

/*  due to the javascript event-loop behavior this code
	is going to be asynchronous but what does that mean?
    
    well, first you need to understand the concept of asynchronous, 
    In computer programming, asynchronous operation means that a 
    process operates independently of other processes. 
*/
setTimeout(foo, 2000)
console.log("faz")
bar()

// this code above is going to print out:
// "faz"
// "bar"
// "foo"

/* this happens because the event loop first executes all the synchronous code 
then waits for the timer to complete and then when it's done puts the callback 
that we passed it in as a first param in something called the task queue where 
it will be added to the call stack and executed

Asynchronous in javascript

//Asynchronous JavaScript
console.log('I am first');
setTimeout(() => {
    console.log('I am second')
}, 2000)
setTimeout(() => {
    console.log('I am third')
}, 1000)
console.log('I am fourth')
//Expected output:
// I am first
// I am fourth
// I am third
// I am second

Asynchronous in javascript

//Asynchronous JavaScript
console.log('I am first');
setTimeout(() => {
    console.log('I am second')
}, 2000)
setTimeout(() => {
    console.log('I am third')
}, 1000)
console.log('I am fourth')
//Expected output:
// I am first
// I am fourth
// I am third
// I am second

asynchronous javascript

console.log ('Starting');
let image;

fetch('coffee.jpg').then((response) => {
  console.log('It worked :)')
  return response.blob();
}).then((myBlob) => {
  let objectURL = URL.createObjectURL(myBlob);
  image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}).catch((error) => {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});

console.log ('All done!');

javascript asynchronous

<script>
    document.write("Hi");
    document.write("<br>");
  
    setTimeout(() => {
        document.write("Let us see what happens");
    }, 2000);
  
    document.write("<br>");
    document.write("End");
    document.write("<br>");
</script>

/*Hi
End
Let us see what happens*/

Asynchronous JavaScript

function myDisplayer(something) {
  document.getElementById("demo").innerHTML = something;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);