javascript tutorial - [Solved-5 Solutions] Scope of the variable in javascript - javascript - java script - javascript array
Problem:
What is the scope of variables in javascript ? Do they have the same scope inside as opposed to outside a function ? Or does it even matter ? Also, where are the variables stored if they are defined globally ?
Solution 1:
We think about the best we can do is give we a bunch of examples to study. Javascript programmers are practically ranked by how well they understand scope. It can at times be quite counter-intuitive.
1. A globally-scoped variable
var a = 1;
// global scope
function one() {
alert(a); // alerts '1'
}
click below button to copy the code. By JavaScript tutorial team
2. Local scope
var a = 1;
function two(a) {
alert(a); // alerts the given argument, not the global value of '1'
}
// local scope again
function three() {
var a = 3;
alert(a); // alerts '3'
}
click below button to copy the code. By JavaScript tutorial team
3. Intermediate:
No such thing as block scope in JavaScript (ES5; ES6 introduces let )
a.
var a = 1;
function four() {
if (true) {
var a = 4;
}
alert(a); // alerts '4', not the global value of '1'
}
click below button to copy the code. By JavaScript tutorial team
b.
var a = 1;
function one() {
if (true) {
let a = 4;
}
alert(a); // alerts '1' because the 'let' keyword uses block scoping
}
click below button to copy the code. By JavaScript tutorial team
4. Intermediate:
Object properties
var a = 1;
function five() {
this.a = 5;
}
alert(new five().a); // alerts '5'
click below button to copy the code. By JavaScript tutorial team
5. Advanced:
Closure
var a = 1;
var six = (function() {
var a = 6;
return function() {
// JavaScript "closure" means we have access to 'a' in here,
// because it is defined in the function in which we was defined.
alert(a); // alerts '6'
};
})();
click below button to copy the code. By JavaScript tutorial team
6. Advanced:
Prototype-based scope resolution
var a = 1;
function seven() {
this.a = 7;
}
// [object].prototype.property loses to
// [object].property in the lookup chain. For example...
// Won't get reached, because 'a' is set in the constructor above.
seven.prototype.a = -1;
// Will get reached, even though 'b' is NOT set in the constructor.
seven.prototype.b = 8;
alert(new seven().a); // alerts '7'
alert(new seven().b); // alerts '8'
click below button to copy the code. By JavaScript tutorial team
7. Global+Local:
An extra complex Case
var x = 5;
(function () {
console.log(x);
var x = 10;
console.log(x);
})();
click below button to copy the code. By JavaScript tutorial team
This will print out undefined and 10 rather than 5 and 10 since JavaScript always moves variable declarations (not initializations) to the top of the scope, making the code equivalent to:
var x = 5;
(function () {
var x;
console.log(x);
x = 10;
console.log(x);
})();
click below button to copy the code. By JavaScript tutorial team
8. Catch clause-scoped variable
var e = 5;
console.log(e);
try {
throw 6;
} catch (e) {
console.log(e);
}
console.log(e);
click below button to copy the code. By JavaScript tutorial team
This will print out 5, 6, 5. Inside the catch clause e shadows global and local variables. But this special scope is only for the caught variable. If we write var f; inside the catch clause, then it's exactly the same as if we had defined it before or after the try-catch block.
Solution 2:
Javascript uses scope chains to establish the scope for a given function. There is typically one global scope, and each function defined has its own nested scope. Any function defined within another function has a local scope which is linked to the outer function. It's always the position in the source that defines the scope.
An element in the scope chain is basically a Map with a pointer to its parent scope.
When resolving a variable, javascript starts at the innermost scope and searches outwards.
Solution 3:
Variables declared globally have a global scope. Variables declared within a function are scoped to that function, and shadow global variables of the same name.
Solution 4:
Here's an example:
<script>
var globalVariable = 7; //==window.globalVariable
function aGlobal( param ) { //==window.aGlobal();
//param is only accessible in this function
var scopedToFunction = {
//can't be accessed outside of this function
nested : 3 //accessible by: scopedToFunction.nested
};
anotherGlobal = {
//global because there's no `var`
};
}
</script>
click below button to copy the code. By JavaScript tutorial team
You'll want to investigate closures, and how to use them to make private members.
Solution 5:
In "Javascript 1.7" (Mozilla's extension to Javascript) one can also declare block-scope variables with let statement:
var a = 4;
let (a = 3) {
alert(a); // 3
}
alert(a); // 4