In this article, you are going to understand Synchronous and Asynchronous in JavaScript, and you will be able to know where to use them in writing code.

JavaScript is a flexible programming language that works synchronously and asynchronously.

what does synchronous mean in JavaScript?

Synchronous in JavaScript is a type of function that won’t move to the next program if the current program is not yet executed.

for example

In a restaurant with different people that want food. the waiter will not attend to the next or second person if the first person's food is not yet available. In JavaScript, the next code will not run if the current or first code is not executed.

let's understand more in the code below.

const thirdFunction = () => {
    console.log("This is the third synchronous code")
 }

  const secondFunction = () => {
    console.log("This is the second synchronous code")
  }

  const firstFunction = () => {
    console.log("This is the third synchronous code")
  }

  firstFunction()
  secondFunction()
  thirdFunction()

//output:
//This is the first synchronous code
//This is the second synchronous code
//This is the third synchronous code

in the code above we saw the output of the first function before the second, then the last one because the first one was called first, and so on. remember synchronous work accordingly.

what does Asynchronous mean in JavaScript?

Asynchronous JavaScript is a type of function that move to the next program if the current program is not yet ready for execution.

using our previous example.

a restaurant with people that want food. the waiter will attend to the first person, if the first person's food is not yet available, the waiter will then move to the next person and attend to their order,

and will come back and attend to the first person when the food is available. In JavaScript asynchronous function move to the next function, if the current one is not ready for execution.

To understand the asynchronous functions more we are going to use an in-built function called setTimeout. setTimeout is an asynchronous function that outputs whatever instruction we give according to the time given.

const firstFunction = () => {
    setTimeout(() => console.log("This is the first synchronous                 code"), 3000)
  }

  const secondFunction = () => {
    console.log("This is the second synchronous code")
  }

  const thirdFunction = () => {
    console.log("This is the third synchronous code")
  }

  firstFunction()
  secondFunction()
  thirdFunction()

//Output :
// This is the second synchronous code
// This is the third synchronous code
// This is the first synchronous code

In the code above the first function was called first but the output was last because the instructions we give were to output it after 3 seconds. Remember asynchronous function move to the next program if the first one is not ready yet.

let’s wrap it all up.

Synchronous in JavaScript is executed accordingly

Asynchronous in JavaScript moves to the next program if the current one is not ready for execution.

I hope you liked this tutorial!

If you're interested in seeing a tutorial let me know in the comments or connect me on Twitter @hey_jonuel.