Learn JavaScript VARIABLE SCOPE in 5 minutes! (5:26)
Variable scope determines where a variable is recognized and accessible in your code. Learn the differences between local scope and global scope, understand scope rules, and when to use each.
- What is variable scope
- Local scope vs global scope
- How functions access variables
- Scope precedence rules
- Best practices for scope management
- Variable shadowing
From transcript: "Variable scope is where a variable is recognized and accessible. Accessible locations depend on where the variable is declared (local vs global)."
- Local Scope - Variables declared inside functions or code blocks
- Global Scope - Variables declared outside all functions
From transcript: "Each variable name needs to be unique within that scope."
// ❌ Error: Can't declare same name in same scope
let x = 1;
let x = 2; // SyntaxError: Identifier 'x' has already been declared// ✅ OK: Same name in different scopes
function function1() {
let x = 1; // Local to function1
console.log(x);
}
function function2() {
let x = 2; // Local to function2
console.log(x);
}
function1(); // Output: 1
function2(); // Output: 2From transcript: "You can reuse the same variable names in your program as long as they're within different scopes."
From transcript: "Any variable declared inside of a function has a local scope, or anytime you declare a variable within a set of curly braces."
function function1() {
let x = 1; // Local scope - only accessible in function1
console.log(x);
}
function function2() {
let y = 2; // Local scope - only accessible in function2
console.log(y);
}
function1(); // 1
function2(); // 2Key Points:
- Local variables only exist inside their function/block
- They're created when the function runs
- They're destroyed when the function ends
- No naming conflicts with other scopes
From transcript: "Functions can't see inside of other functions. It's kind of like functions are neighboring houses - you can't necessarily see inside of your neighbor's house."
function function1() {
let x = 1;
console.log(y); // ❌ ReferenceError: y is not defined
}
function function2() {
let y = 2;
console.log(x); // ❌ ReferenceError: x is not defined
}
function1(); // Error! function1 can't see y from function2
function2(); // Error! function2 can't see x from function1From transcript: "Function 1 has no idea what variable Y is. We've declared that within another function."
// function1 = House 1
function function1() {
let secret = "House 1 secret";
// Can't see House 2's secrets
}
// function2 = House 2
function function2() {
let secret = "House 2 secret";
// Can't see House 1's secrets
}From transcript: "Function one has no idea what Y is. Likewise function 2... has no idea what x is. Each of these variables are declared inside of a function so they have a local scope."
From transcript: "A global scope for a variable is any variable declared outside of a function."
let x = 3; // Global scope - accessible everywhere
function function1() {
console.log(x); // Can access global x
}
function function2() {
console.log(x); // Can access global x
}
function1(); // Output: 3
function2(); // Output: 3From transcript: "Any variable declared outside of a function has a global scope. It's available through the whole program. A global variable is recognized and accessible from anywhere."
From transcript (bonus analogy): "Anything that's declared in the global scope isn't found within any houses - it's outside. Everybody can plainly see it. It's kind of like a creepy stalker that's under a street light at three in the morning. Everybody while inside of their house can still see everything outside."
let stalker = "I can see everyone!"; // Global - visible to all functions
function house1() {
console.log(stalker); // Can see global variable
}
function house2() {
console.log(stalker); // Can see global variable
}From transcript: "When inside of a function, we'll use any local instance of a variable first. If it's not found, we'll look at the global scope."
let x = 3; // Global x
function function1() {
let x = 1; // Local x - shadows global x
console.log(x); // Uses local x
}
function function2() {
let x = 2; // Local x - shadows global x
console.log(x); // Uses local x
}
function1(); // Output: 1 (local)
function2(); // Output: 2 (local)
console.log(x); // Output: 3 (global)From transcript: "If we have two variables with the same name and they're in different scopes, we'll use the local version first. That's why X is one and not three."
let x = 3; // Global
function function1() {
let x = 1; // Local
console.log(x);
// Lookup order:
// 1. Check local scope first ✓ (found: x = 1)
// 2. If not found, check global scope
}
function function2() {
// No local x
console.log(x);
// Lookup order:
// 1. Check local scope (not found)
// 2. Check global scope ✓ (found: x = 3)
}
function1(); // 1 (uses local)
function2(); // 3 (uses global - no local exists)From transcript: "If these local variables weren't available, we would use the global version instead, where x equals three."
// variable scope = where a variable is accessible within the code
// and accessible locations depend on where the variable is declared (local vs global)
let x = 0; // Global scope
function function1() {
let x = 1; // Local scope - overrides global x within this function
console.log(x);
}
function function2() {
// Uses global x since there is no local x
console.log(x);
}
function1(); // Output: 1
function2(); // Output: 0From transcript: "It's not recommended to declare global variables in a large program just because you can have naming conflicts. In a large program I might accidentally reuse the variable X or change it somewhere. X is a very common name for a variable. So in a large program I would stick with local variables."
// ❌ Avoid in large programs
let data = "global data"; // Can be accidentally modified anywhere
// ✅ Better - use local variables
function processData() {
let data = "local data"; // Safe from outside interference
// Process data here
}// ✅ Small program - global OK
let userName = "BroCode";
function greet() {
console.log(`Hello ${userName}`);
}
function farewell() {
console.log(`Goodbye ${userName}`);
}From transcript: "In a small program like this it's fine."
// ❌ Large program - avoid globals
// Prefer passing parameters instead
function greet(userName) { // Parameter - local scope
console.log(`Hello ${userName}`);
}
function farewell(userName) { // Parameter - local scope
console.log(`Goodbye ${userName}`);
}
greet("BroCode");
farewell("BroCode");┌─────────────────────────── GLOBAL SCOPE ───────────────────────────┐
│ │
│ let x = 3; // Accessible everywhere │
│ │
│ ┌─────────── function1() ───────────┐ │
│ │ │ │
│ │ let x = 1; // Local to function1│ │
│ │ console.log(x); // Uses local: 1│ │
│ │ │ │
│ └────────────────────────────────────┘ │
│ │
│ ┌─────────── function2() ───────────┐ │
│ │ │ │
│ │ // No local x │ │
│ │ console.log(x); // Uses global: 3│ │
│ │ │ │
│ └────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
| Aspect | Local Scope | Global Scope |
|---|---|---|
| Location | Inside functions/blocks | Outside all functions |
| Accessibility | Only within that function | Everywhere in program |
| Lifetime | Created when function runs, destroyed when it ends | Exists throughout program |
| Naming | Can reuse names in different scopes | Must be unique globally |
| Best Practice | Preferred for large programs | Use sparingly |
| Example | function f() { let x = 1; } |
let x = 1; |
From transcript: "Variable scope - it's where a variable is recognized and accessible. You have a local scope - that's any time a variable is declared within a set of curly braces. That variable is then only accessible to anything within that set of curly braces. And a global scope is where a variable is declared outside of any functions - it's available throughout the whole program."
-
Local Scope - Variables inside functions/blocks
- Only accessible within that scope
- Destroyed when scope ends
- Can have same name in different scopes
-
Global Scope - Variables outside all functions
- Accessible everywhere
- Exists throughout program
- Use sparingly to avoid conflicts
-
Scope Precedence - Local first, then global
- Functions check local scope first
- If not found, check global scope
- Local variables "shadow" global ones
-
Function Isolation - Functions can't see into each other
- Like neighboring houses
- Each has its own private space
- Global variables are like things outside all houses
-
Best Practice - Prefer local variables
- Especially in large programs
- Prevents naming conflicts
- Makes code more predictable
const PI = 3.14159; // Global constant - won't change
function calculateArea(radius) {
let area = PI * radius * radius; // Uses global PI
return area;
}
function calculateCircumference(radius) {
let circumference = 2 * PI * radius; // Uses global PI
return circumference;
}// ❌ Using global variable
let count = 0;
function increment() {
count++; // Modifies global
}
// ✅ Better - use parameters and return
function increment(count) {
return count + 1; // No global modification
}
let myCount = 0;
myCount = increment(myCount);function createCounter() {
let count = 0; // Private/local to this function
function increment() {
count++;
console.log(count);
}
increment(); // 1
increment(); // 2
increment(); // 3
}
createCounter();function badExample() {
x = 10; // ❌ No let/const/var - creates global!
}
badExample();
console.log(x); // 10 - oops, x is global!function setName() {
let name = "Alice";
}
function greet() {
console.log(name); // ❌ ReferenceError: name is not defined
}
setName();
greet(); // Error!Duration: 5:26
Difficulty: Beginner
Category: Variables & Scope