JavaScript Scope & Hoisting
JavaScript Scope
JavaScript scope decides where in your code a variable can be seen and used.
A variable created inside a function belongs to that function.
Code outside cannot see it, which keeps different parts of a program from clashing.
Example
Example
javascript
let outside = "global";
function show() {
let inside = "local";
console.log(outside);
console.log(inside);
}
show();The function can see both variables.
Code after the function could only see outside.
What is Scope?
Scope is the area of your code where a variable is available.
JavaScript has three kinds: global scope, function scope, and block scope.
Keeping variables in the smallest scope that works is one of the simplest ways to avoid bugs.
Syntax
Syntax
javascript
let globalVariable = "seen everywhere";
function example() {
let localVariable = "seen only in here";
}A variable declared inside a function does not exist outside it.
Global Scope
A variable declared outside every function is global.
It can be read and changed from anywhere, which is convenient but risky in a large file.
Example
Example
javascript
let siteName = "My Site";
function showName() {
return siteName;
}
console.log(showName());The function can read the global variable without it being passed in.
Function Scope
A variable declared inside a function only exists while that function runs.
Example
Example
javascript
function calculate() {
let result = 42;
return result;
}
console.log(calculate());
console.log(typeof result);The last line prints undefined, because result does not exist outside.
The Scope Chain
When JavaScript cannot find a variable, it looks in the scope around it, then the one around that.
It keeps going outwards until it reaches the global scope.
Example
Example
javascript
const level1 = "one";
function outer() {
const level2 = "two";
function inner() {
const level3 = "three";
return level1 + " " + level2 + " " + level3;
}
return inner();
}
console.log(outer());The innermost function can see everything above it, but not the other way round.
Shadowing
An inner variable with the same name hides the outer one.
This is called shadowing, and the outer variable is left untouched.
Example
Example
javascript
let name = "outer";
function show() {
let name = "inner";
return name;
}
console.log(show());
console.log(name);The function returns "inner", and the global variable is still "outer".
Accidental Globals
Assigning to a variable that was never declared creates a global one by accident.
This is a classic bug, and strict mode turns it into an error instead.
Example
Example
javascript
function setValue() {
let counter = 1;
return counter;
}
console.log(setValue());Always declare variables with let or const.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Scope</title>
</head>
<body>
<h1>JavaScript Scope</h1>
<p id="result"></p>
<script>
const siteName = "My Site";
function buildTitle() {
const page = "Home";
return siteName + " - " + page;
}
document.getElementById("result").innerHTML = buildTitle();
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try moving a variable:
Move page outside the function and see that it still works.
Important Points
- Scope is the area of code where a variable can be used.
- A variable declared outside every function is global.
- A variable declared inside a function only exists inside it.
- Inner code can see outer variables, but not the reverse.
- An inner variable with the same name shadows the outer one.
Conclusion
JavaScript scope controls where each variable can be seen.
Keeping variables in the smallest scope that works prevents surprising bugs.
Understanding scope is the foundation for closures and hoisting.