JavaScript Scope & Hoisting
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
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.
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
javascript
let globalVariable = "seen everywhere";
function example() {
let localVariable = "seen only in here";
}A variable declared inside a function does not exist outside it.
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
javascript
let siteName = "My Site";
function showName() {
return siteName;
}
console.log(showName());The function can read the global variable without it being passed in.
A variable declared inside a function only exists while that function runs.
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.
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
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.
An inner variable with the same name hides the outer one.
This is called shadowing, and the outer variable is left untouched.
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".
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
javascript
function setValue() {
let counter = 1;
return counter;
}
console.log(setValue());Always declare variables with let or const.
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>Run the above example in the Try It Editor.
Try moving a variable:
Move page outside the function and see that it still works.
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.