JavaScript Asynchronous and Callback

❮ Prev Next ❯

Most of the time, JavaScript code is ran synchronously.

This means that a line of code is executed, then the next one is executed, and so on.

Everything is as you expect, and how it works in most programming languages.

However, there are times when you cannot just wait for a line of code to execute.

You can't just wait 2 seconds for a big file to load, and halt the program completely.

Also You can't just wait for a network resource to be downloaded, before doing something else.

JavaScript solves this problem using callbacks.

One of the simplest examples of how to use callbacks is timers.

Timers are not part of JavaScript, but they are provided by the browser, and Node.js.

Let me talk about one of the timers we have: setTimeout().

The setTimeout()function accepts 2 arguments: a function, and a number.

The number is the milliseconds that must pass before the function is ran.

Example: 


setTimeout(() => { 
  // runs after 2 seconds
  consolelog("inside the function");
}, 2000)

In the above example, the function containing the console.log('inside the function')line will be executed after 2 seconds.

If you add a console.log('before')prior to the function, and console.log('after')after it: 


consolelog("before");
setTimeout(() => { 
  // runs after 2 seconds
  consolelog("inside the function");
}, 2000)
consolelog("after");

You will see this happening in your console: 


before
after
inside the function

The callback function is executed asynchronously.

Here's how we can implement callbacks in our code.

We define a function that accepts a callback parameter, which is a function.

When the code is ready to invoke the callback, we invoke it passing the result: 


const doSomething = (callback){
  //do things
  //do things
  const result = callback(result);
}

Code using this function would use it like this: 


doSomething((result) => {
  console.log(result);
})

Let's learn about Promises in the next chapter.

❮ Prev Next ❯