Global execution context in Javascript - Mini Project: Build & Apply

Understanding Global Execution Context in JavaScript

📖 Scenario: Imagine you are writing a simple JavaScript program that runs in a web browser. You want to understand how JavaScript starts running your code and what happens first in the background.

🎯 Goal: You will create a simple JavaScript program that shows how variables and functions are handled in the global execution context. You will see how JavaScript prepares your code before running it.

📋 What You'll Learn

Create a global variable with a specific value

Create a global function that returns a string

Use a variable to store a message

Call the global function and store its result

Print the stored message and function result

💡 Why This Matters

🌍 Real World

Understanding the global execution context helps you write better JavaScript code that runs correctly in browsers or Node.js environments.

💼 Career

Many programming jobs require knowledge of how JavaScript runs code, especially for debugging and writing clean, efficient scripts.

1

Create a global variable

Create a global variable called greeting and set it to the string "Hello, world!".

Javascript

// Create a global variable called greeting and set it to "Hello, world!"
// Your code here

Hint

Use let to create a variable named greeting and assign the text "Hello, world!".

2

Create a global function

Create a global function called getMessage that returns the string "This is the global execution context.".

Javascript

let greeting = "Hello, world!";
// Create a function called getMessage that returns "This is the global execution context."
// Your code here

Hint

Define a function named getMessage that returns the exact string "This is the global execution context.".

3

Store messages in variables

Create a variable called message and set it to the value of the global variable greeting. Then create another variable called contextMessage and set it to the result of calling the function getMessage().

Javascript

let greeting = "Hello, world!";
function getMessage() {
    return "This is the global execution context.";
}
// Create variable message and set it to greeting
// Create variable contextMessage and set it to getMessage() result
// Your code here

Hint

Assign message the value of greeting. Assign contextMessage the value returned by calling getMessage().

4

Print the messages

Use console.log to print the variables message and contextMessage on separate lines.

Javascript

let greeting = "Hello, world!";
function getMessage() {
    return "This is the global execution context.";
}
let message = greeting;
let contextMessage = getMessage();
// Print message and contextMessage using console.log
// Your code here

Hint

Use console.log(message) and console.log(contextMessage) to show the values in the console.

Practice

1. What does the global execution context in JavaScript contain?

easy

A. Global variables, functions, and the global object

B. Only local variables inside functions

C. Only the code inside loops

D. Only event listeners

Solution

1. Step 1: Understand what global execution context is

   The global execution context is the environment where all JavaScript code runs initially, outside any function.

2. Step 2: Identify what it holds

   It holds global variables, functions declared globally, and the global object (like window in browsers).

3. Final Answer:

   Global variables, functions, and the global object -> Option A

4. Quick Check:

   Global execution context = global variables + functions + global object [OK]

Hint: Global context holds everything outside functions [OK]

Common Mistakes:

• Thinking it only holds local variables
• Confusing with function execution context
• Assuming it holds event listeners only

2. Which of the following is the correct way to declare a global variable in JavaScript?

easy

A. let myVar = 10;

B. function myVar() {}

C. const myVar;

D. var myVar = 10;

Solution

1. Step 1: Identify global variable declaration syntax

   Using var outside any function declares a global variable in JavaScript.

2. Step 2: Check other options

   function myVar() {} declares a function, not a variable. let and const can declare global variables but behave differently in scope and hoisting; const myVar; is invalid because const needs initialization.

3. Final Answer:

   var myVar = 10; -> Option D

4. Quick Check:

   Global variable declaration = var outside functions [OK]

Hint: Use var outside functions for global variables [OK]

Common Mistakes:

• Using const without initialization
• Confusing function declaration with variable
• Assuming let always creates global variables

3. What will be the output of the following code?

var x = 5;
function test() {
  var x = 10;
  console.log(x);
}
console.log(x);
test();
console.log(x);

medium

A. 10 10 10

B. 5 5 5

C. 5 10 5

D. 10 5 10

Solution

1. Step 1: Understand variable scopes

   var x = 5; declares a global variable x with value 5. Inside test(), var x = 10; declares a local variable x that shadows the global one.

2. Step 2: Trace console.log outputs

   First console.log(x); outside function prints global x = 5. Inside test(), console.log(x); prints local x = 10. After calling test(), the last console.log(x); prints global x again, which is still 5.

3. Final Answer:

   5 10 5 -> Option C

4. Quick Check:

   Global x = 5, local x = 10 inside function [OK]

Hint: Local vars shadow globals inside functions [OK]

Common Mistakes:

• Assuming global x changes after function call
• Confusing local and global scopes
• Expecting all outputs to be same

4. Identify the error in the following code related to global execution context:

console.log(a);
var a = 10;

medium

A. undefined because of hoisting of 'var a'

B. SyntaxError due to missing semicolon

C. 10 because 'a' is initialized before console.log

D. ReferenceError because 'a' is not defined

Solution

1. Step 1: Understand hoisting of var declarations

   In JavaScript, var declarations are hoisted to the top of their scope with an initial value of undefined.

2. Step 2: Trace the console.log output

   At console.log(a);, variable a exists but is not yet assigned 10, so it prints undefined.

3. Final Answer:

   undefined because of hoisting of 'var a' -> Option A

4. Quick Check:

   var hoisting = undefined before assignment [OK]

Hint: var declarations hoist but initialize as undefined [OK]

Common Mistakes:

• Expecting ReferenceError instead of undefined
• Thinking variable is initialized before console.log
• Confusing var with let/const hoisting

5. Consider this code snippet:

var count = 1;
function increment() {
  count++;
  var count = 10;
  console.log(count);
}
increment();
console.log(count);

What will be the output and why?

hard

A. 10 1

B. NaN 1

C. 1 1

D. ReferenceError 1

Solution

1. Step 1: Analyze variable hoisting inside function

   Inside increment(), var count is hoisted to the top of the function scope but not initialized yet, so it starts as undefined.

2. Step 2: Evaluate the increment operation

   The line count++; tries to increment the local count which is undefined, setting it to NaN. Then count = 10; assigns 10, and console.log(count); prints 10.

3. Step 3: Check global count after function call

   The global count remains unchanged at 1, so console.log(count); outside prints 1.

4. Final Answer:

   NaN 1 -> Option B

5. Quick Check:

   Local var hoisted undefined -> NaN on increment -> 10 on assignment [OK]

Hint: Hoisted local var undefined causes NaN on ++ [OK]

Common Mistakes:

• Thinking the output is NaN 1 because of undefined++
• Assuming increment affects global count
• Ignoring hoisting of local var