Global execution context in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of variable hoisting in global context

What is the output of the following JavaScript code when run in a browser console?

Javascript

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

A undefined\n10

B 10\n10

C ReferenceError: a is not defined

D undefined\nundefined

💡 Hint

Think about how variable declarations are hoisted but assignments are not.

In JavaScript, var declarations are hoisted to the top of their scope and initialized with undefined. So the first console.log(a) prints undefined. Then a is assigned 10, so the second console.log(a) prints 10.

❓ Predict Output

intermediate

Global object property from var declaration

What will be the output of this code snippet in a browser environment?

Javascript

var x = 5;
console.log(window.x);

A 5

B undefined

C ReferenceError

D null

💡 Hint

Consider how var variables relate to the global object in browsers.

In browsers, variables declared with var at the global scope become properties of the global window object. So window.x is 5.

❓ Predict Output

advanced

Output of let in global scope and window object

What will this code print in the browser console?

Javascript

let y = 20;
console.log(window.y);

A 20

B ReferenceError

C null

D undefined

💡 Hint

Think about how let differs from var in global scope.

Unlike var, let declarations at the global scope do NOT create properties on the global window object. So window.y is undefined.

❓ Predict Output

advanced

Global execution context and function declaration hoisting

What is the output of this code?

Javascript

foo();
function foo() {
  console.log('Hello from foo');
}
foo();

A TypeError: foo is not a function

B ReferenceError: foo is not defined

C Hello from foo\nHello from foo

D undefined\nHello from foo

💡 Hint

Remember how function declarations are hoisted completely.

Function declarations are hoisted with their body, so foo can be called before its definition. Both calls print 'Hello from foo'.

🧠 Conceptual

expert

Global execution context creation order

Which of the following correctly describes the order of steps when the JavaScript global execution context is created?

A Code execution phase, then variable and function declarations are hoisted

B Variable and function declarations are hoisted, then code execution phase runs

C Code execution phase runs, then global object is created

D Global object is created after code execution phase

💡 Hint

Think about what happens before the code runs.

When the global execution context is created, JavaScript first hoists all variable and function declarations (setting up memory space), then runs the code line by line.

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