JavaScript execution flow

Introduction

JavaScript execution flow shows how the computer reads and runs your code step by step. It helps you understand what happens first, next, and last.

When you want to know why some code runs before other code.

When you want to fix bugs by understanding the order of actions.

When you write functions and want to see when they run.

When you use conditions or loops and want to follow the steps.

When you want to learn how asynchronous code like timers or events work.

Syntax

Javascript

JavaScript runs code from top to bottom, line by line.
Functions run only when called.
Asynchronous code runs later, after current code finishes.

JavaScript reads and runs your code in order, unless told otherwise by functions or special commands.

Understanding this flow helps you predict what your program will do.

Examples

This prints messages in the order they appear.

Javascript

console.log('First');
console.log('Second');
console.log('Third');

The function runs only when called, so 'Hello!' prints between 'Start' and 'End'.

Javascript

function greet() {
  console.log('Hello!');
}
console.log('Start');
greet();
console.log('End');

The timeout code runs later, so 'After timeout' prints before 'Inside timeout'.

Javascript

console.log('Before timeout');
setTimeout(() => {
  console.log('Inside timeout');
}, 1000);
console.log('After timeout');

Sample Program

This program shows how JavaScript runs code top to bottom, but functions run only when called.

Javascript

console.log('Step 1: Start');

function stepTwo() {
  console.log('Step 2: Inside function');
}

stepTwo();

console.log('Step 3: End');

Important Notes

Remember, functions do not run when defined, only when called.

Asynchronous code like setTimeout runs after the main code finishes.

Understanding execution flow helps you avoid surprises in your program.

Summary

JavaScript runs code line by line from top to bottom.

Functions run only when you call them.

Asynchronous code runs later, after current code finishes.