Execution Flow in JavaScript

Note that the execution of a program always begins on the first line. The code is then executed one line at a time from top to bottom. This is known as execution flow and is the order a program in JavaScript executes code.

For example, this program:

console.log("It's a beautiful day.");

function sayHello() {
	console.log("Hello coders!");
  	console.log("Welcome to AlgoCademy!");
}

console.log("Students are joining.");
sayHello();
console.log("We'll learn about functions.");

prints:

It's a beautiful day.
Students are joining.
Hello coders!
Welcome to AlgoCademy!
We'll learn about functions.

This is how the JavaScript interpreter goes through this code line by line:

console.log("It's a beautiful day."); // <- Print "It's a beautiful day."

console.log("It's a beautiful day.");

function sayHello() { // <- A function sayHello() is about to be defined

console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!"); // <- This is part of the function. Not executing the print tho.

console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!"); // <- This is also part of the function. Not executing the print tho.

console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!");
} // <- The function definition is over. 

console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!");
}

console.log("Students are joining."); // <- Print "Students are joining.".

console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!");
}

console.log("Students are joining.");
sayHello(); // <- Function call of sayHello(). Executing the code inside function:
            // Print "Hello coders!"
            // Print "Welcome to AlgoCademy!"

console.log("It's a beautiful day.");

function sayHello() {
  console.log("Hello coders!");
  console.log("Welcome to AlgoCademy!");
}

console.log("Students are joining.");
sayHello();
console.log("We'll learn about functions."); // <- Print "We'll learn about functions."

Assignment
Follow the Coding Tutorial and let's practice with execution flow!

Hint
Look at the examples above if you get stuck.