Global scope in Javascript - Mini Project: Build & Apply

Understanding Global Scope in JavaScript

📖 Scenario: Imagine you are creating a simple web page that tracks the number of visitors. You want to store the visitor count in a place that can be accessed anywhere in your script.

🎯 Goal: You will create a global variable to hold the visitor count, then write code to update and display this count.

📋 What You'll Learn

Create a global variable named visitorCount with the initial value 0.

Create a variable named newVisitors and set it to 5.

Add newVisitors to visitorCount using a simple addition.

Print the final value of visitorCount using console.log.

💡 Why This Matters

🌍 Real World

Global variables are useful for storing information that many parts of a program need to access, like user settings or counters.

💼 Career

Understanding global scope helps you avoid bugs and write clearer code, which is important for any programming job.

1

Create a global variable

Create a global variable called visitorCount and set it to 0.

Javascript

// Your code here

Hint

Use let outside any function to create a global variable.

2

Add new visitors count

Create a variable called newVisitors and set it to 5.

Javascript

let visitorCount = 0;
// Your code here

Hint

Use let to create the variable newVisitors.

3

Update the global visitor count

Add the value of newVisitors to the global variable visitorCount using visitorCount = visitorCount + newVisitors.

Javascript

let visitorCount = 0;
let newVisitors = 5;
// Your code here

Hint

Use the assignment operator = to update visitorCount.

4

Display the visitor count

Use console.log(visitorCount) to print the final value of visitorCount.

Javascript

let visitorCount = 0;
let newVisitors = 5;
visitorCount = visitorCount + newVisitors;
// Your code here

Hint

Use console.log to show the value in the console.

Practice

1. What does it mean when a variable is in the global scope in JavaScript?

easy

A. The variable can be accessed anywhere in the code.

B. The variable can only be used inside a function.

C. The variable is hidden from all parts of the code.

D. The variable is deleted after a function finishes.

Solution

1. Step 1: Understand global scope meaning

   Global scope means a variable is declared outside any function and is accessible everywhere in the code.

2. Step 2: Compare options with definition

   Only The variable can be accessed anywhere in the code. correctly states that the variable can be accessed anywhere.

3. Final Answer:

   The variable can be accessed anywhere in the code. -> Option A

4. Quick Check:

   Global scope = accessible everywhere [OK]

Hint: Global variables are outside functions, accessible everywhere [OK]

Common Mistakes:

• Thinking global variables are only inside functions
• Confusing global with local scope
• Believing global variables disappear after function ends

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

easy

A. Inside a function using let

B. Outside any function using var

C. Inside a block using const

D. Inside a function using const

Solution

1. Step 1: Identify where to declare global variables

   Global variables must be declared outside any function or block.

2. Step 2: Check declaration keywords

   Using var outside functions creates a global variable. Options A, B, and D declare inside functions or blocks, so they are not global.

3. Final Answer:

   Outside any function using var -> Option B

4. Quick Check:

   Global variable = declared outside functions [OK]

Hint: Declare global variables outside functions with var [OK]

Common Mistakes:

• Declaring variables inside functions and expecting global scope
• Using let or const inside blocks thinking they are global
• Confusing block scope with global scope

3. What will be the output of this code?

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

medium

A. 10

B. undefined

C. ReferenceError

D. null

Solution

1. Step 1: Identify variable scope

   Variable x is declared globally with var and has value 10.

2. Step 2: Check function access

   The function show logs x. Since x is global, it is accessible inside the function.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Global variable accessed inside function = 10 [OK]

Hint: Global variables are accessible inside functions [OK]

Common Mistakes:

• Expecting undefined because variable is outside function
• Thinking console.log will cause ReferenceError
• Confusing local and global scope

4. Find the error in this code related to global scope:

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

medium

A. No error, prints 5

B. TypeError: a is undefined

C. ReferenceError: a is not defined

D. SyntaxError: var inside function

Solution

1. Step 1: Check variable scope

   Variable a is declared inside function test with var, so it is local to that function.

2. Step 2: Access variable outside function

   Trying to log a outside the function causes a ReferenceError because a is not in global scope.

3. Final Answer:

   ReferenceError: a is not defined -> Option C

4. Quick Check:

   Local variable accessed globally = ReferenceError [OK]

Hint: Variables inside functions are not global [OK]

Common Mistakes:

• Assuming var inside function is global
• Expecting output 5 instead of error
• Confusing ReferenceError with SyntaxError

5. You want to create a global counter variable that increases every time a function runs. Which code correctly uses global scope to do this?

hard

A. let counter = 0;
function count() {
let counter = 0;
counter++;
console.log(counter);
}

B. function count() {
var counter = 0;
counter++;
console.log(counter);
}

C. function count() {
let counter = 0;
counter++;
console.log(counter);
}

D. var counter = 0;
function count() {
counter++;
console.log(counter);
}

Solution

1. Step 1: Identify global variable declaration

   var counter = 0;
   function count() {
     counter++;
     console.log(counter);
   }

   declares counter outside the function, making it global and accessible inside the function.

2. Step 2: Check counter increment behavior

   Inside count, counter++ increases the global variable, so the count persists across calls.

3. Final Answer:

   var counter = 0; function count() { counter++; console.log(counter); } -> Option D

4. Quick Check:

   Global counter increments inside function =

   var counter = 0;
   function count() {
     counter++;
     console.log(counter);
   }

   [OK]

Hint: Declare counter outside function to keep it global [OK]

Common Mistakes:

• Declaring counter inside function resets it each call
• Using let inside function hides global variable
• Expecting local counter to remember previous value