Introduction

It is important to understand the order of execution in JavaScript, as this can impact the way your code behaves.

There are two main types of execution order in JavaScript:

1. Execution order within a function
2. Execution order of JavaScript code that is not contained within a function (global)

The order of execution within a function is generally well-defined. The JavaScript code within a function will execute in the order in which it appears. However, there are a few important exceptions to this rule. I’ve included some brief examples below.

Execution order within a function

Finally, it is important to note that the order of execution is not always deterministic. This means that the order in which code executes can vary depending on the circumstances. For example, consider the following code:

function myPlate() {
  return “Meal on plate is: “ + getMeal();
}

function getMeal() {
  let food = “Indian Food”;
  return food;
}

let food = myPlate();
alert(myPlate);

The interpreter will first need to get the results of the functions myPlate() and getMeal(). Here a couple of things happen that explain the order of execution. (1) The food variable gets its value from the myPlate() function. (2) Then, myPlate() creates a message by combining the string “Meal on plate is: “ with the result of getMeal(). (3) After, getMeal() returns the meal to myPlate(). (4) myPlate() now knows the meal, and combines it with the string. It then returns the message to the statement that called it in step (1). (5) The value fo the meal is stored in memory. (6). This food variables is written to an alert box.

Execution order globally

First, any code that is within a function that is called by another piece of code will execute first. For example, consider the following code:

function foo() {
  // some code
  return 'I like chickens'
}

function bar() {
  // some code
  return foo()
}

In this code, the function foo() will be executed first, before the code in function bar() continues execution. If you were to wrap this in a IIFE (immediately invoked function expression), the order of execution would be the same. It’d just prioritize the execution of the IIFE. You could use this to trigger a function and control variables to a specitic scope.

Execution order with event handlerr

Second, would be any code that is within an event handler will execute after the code that triggered the event. For example, consider the following code:

function foo() {
  // some code
}

button.addEventListener('click', foo)

In this code, the function foo() will be executed after the button element is clicked.

Execution order with callback

Third, would be using any code that is within a setTimeout() or setInterval() callback, and will execute after the specified time has elapsed. For example, consider the following code:

function foo() {
  // some code
}

setTimeout(foo, 1000);

In this code, the function foo() will be executed after 1000 milliseconds have elapsed. Although foo() appears first in the code, it will execute after the setTimeout() callback.

Execution order with jQuery

jQuery’s ready() callback will execute after the document has been loaded. For example, consider the following code:

function foo() {
  // some code
}

$(document).ready(foo)

In this code, the function foo() will be executed once the document has been loaded.

Ending Thoughts

The order of execution is important to understand execution context, the stack (how the js interpreter works), and alot more. This is fundamental stuff.

Resources:

jQuery

Javascript Execution Order