Find Where a Name Is Visible

Scope determines where a name can be used. A block-local let can have the same name as an outer variable without changing that outer variable. Clear names help prevent accidental shadowing.

Before this topic, review Write a Small Arrow Function if its terms are unfamiliar.

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

Scope in JavaScript determines the visibility and accessibility of variables. Knowing where and how your variables are accessible is essential for writing clean, bug-free code.

JavaScript primarily deals with three types of scope:

• Global Scope
• Local (Function) Scope
• Block Scope

Variables declared outside of any function or block are in the global scope. They can be accessed from anywhere in the code.

let name = "JavaScript"; // global variable

function greet() {
  console.log("Hello, " + name);
}

greet(); // accessible
console.log(name); // also accessible

Hello, JavaScript
JavaScript

When you declare a variable inside a function using var, let, or const, it's local to that function. You cannot access it outside the function.

function showAge() {
  let age = 30;
  console.log("Age is: " + age);
}

showAge();
console.log(age); // ReferenceError

Age is: 30
ReferenceError: age is not defined

Block scope is created using curly braces { }. Only let and const support block-level scope. var does not respect block boundaries.

{
  let blockLet = "Scoped with let";
  const blockConst = "Scoped with const";
  var blockVar = "Function or Global Scoped";
  console.log(blockLet);   // accessible
  console.log(blockConst); // accessible
  console.log(blockVar);   // accessible
}

console.log(blockVar);   // accessible
console.log(blockLet);   // ReferenceError
console.log(blockConst); // ReferenceError

Scoped with let
Scoped with const
Function or Global Scoped
Function or Global Scoped
ReferenceError: blockLet is not defined
ReferenceError: blockConst is not defined

var is function-scoped, while let and const are block-scoped. This difference becomes crucial in loops and conditions.

Example: Using var in a for loop

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

3
3
3

Why? Because var is function-scoped — the same variable i is used in each iteration.

Example: Using let in a for loop

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

0
1
2

Why? Because let is block-scoped — a new i is created for each iteration.

Functions can access variables from their outer scope. This is called lexical scoping.

let language = "JavaScript";

function outer() {
  let framework = "React";

  function inner() {
    console.log("Language: " + language);
    console.log("Framework: " + framework);
  }

  inner();
}

outer();

Language: JavaScript
Framework: React

Shadowing occurs when a variable in a local scope has the same name as one in an outer scope. The local variable shadows the outer one.

let value = 100;

function test() {
  let value = 200; // shadows outer 'value'
  console.log(value);
}

test();
console.log(value);

200
100

Declaring too many global variables can cause conflicts — especially when integrating multiple scripts. To avoid this:

• Use let and const instead of var
• Encapsulate code in functions or IIFEs
• Use modules (ES6+)

An IIFE is a function that runs immediately, creating its own local scope:

(function () {
  let secret = "hidden";
  console.log("Inside IIFE");
})();
console.log(secret); // Error

Inside IIFE
ReferenceError: secret is not defined

Mastering scope in JavaScript isn’t just about avoiding errors — it’s about designing better logic, writing safer code, and being in full control of variable access. Whether you’re debugging a tricky bug or architecting a new feature, understanding how scope works will always give you the upper hand.

Explore scope. Control visibility. Write smarter code.

var does not introduce the same block scope. Visibility and object lifetime are related but different questions.

Your task: Replace marks = 80 with marks = 90. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

The edit changes only the inner binding; the outer value remains 70.

Scope determines where a name can be used. A block-local let can have the same name as an outer variable without changing that outer variable. Clear names help prevent accidental shadowing.

Check your variation against this explanation: The edit changes only the inner binding; the outer value remains 70.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.