It's all about variable access...
Scope determines what variables are available for you to use at any given point in your program.
You can 'hide' variables in functions (local scopes)
-OR-
make variables available everywhere (global scope).
var func = function(){
var local = true;
};
func();
console.log(local);
ReferenceError: local is not defined
Note: keyword var is important here!
var global;
var func = function(){
var local = true;
};
func();
console.log(local);
console.log(global); //undefined
var x = 'global!';
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
var x = 'global!';
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
What gets print to the console?
Let's walk through the code as the JS interpreter...
console.log(y) //???
var x = 'global!';
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
REMEMBER: y is not declared until addToGlobalScope is called!
addToGlobalScope();
console.log(y); //???
var x = 'global!';
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
var z = 'using var inside a
function body makes this local';
}
The var keyword is important!
It creates a variable and then assigns it to the current scope.
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
var aliensExist = false; //global scope
console.log(aliensExist); //false
var secretClearance = function() {
var aliensExist = 'only sort of...';
console.log(aliensExist); //'only sort of...'
};
secretClearance();
var superTopSecretClerance = function() {
var aliensExist = 'They totally do';
console.log(aliensExist) //'They totally do'
};
superTopSecretClearance();
Let's walk through how this code gets executed...
var globalRequirement = 'pies';
var cookingBonanza = function(ingredient) {
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
cookingBonanza('collard greens');
//'I am cooking pies with guacamole'
Don't worry, I don't get to do much of the cooking in my house.
var globalRequirement = 'pies';
var cookingBonanza = function(ingredient) {
var obstinateChef = function() {
var ingredient = 'guacamole'; //we are 'masking' ingredient here
//we can still access the global globalRequirement variable
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
cookingBonanza('collard greens');
var globalRequirement = 'pies';
var cookingBonanza = function(ingredient) {
var obstinateChef = function() {
var ingredient = 'guacamole'; //we are 'masking' ingredient here
//we can still access the global globalRequirement variable
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
obstinateChef();
//notice that our change to ingredient (using the var keyword!) doesn't
//ever have to leave it's scope. the ingredient variable
//inside obstinateChef exists only in that scope.
console.log('I am cooking ' + globalRequirement + ' with ' + ingredient);
};
cookingBonanza('collard greens');
//'I am cooking pies with guacamole'
//'I am cooking pies with collard greens'
When are scopes actually created?
var nameMaker = function(name) {
return {name: name};
};
var albreyObject = nameMaker('Albrey'); // {name: 'Albrey'}
var shannaObject = nameMaker('Shanna'); // {name: 'Shanna'}
// each time we invoke nameMaker, a new scope is created
Arguments are values that are passed into the local scope of the corresponding function
var nameMaker = function(name) {
return {name: name};
};
var albreyObject = nameMaker('Albrey'); // {name: 'Albrey'}
var shannaObject = nameMaker('Shanna'); // {name: 'Shanna'}
// 'Albrey' and 'Shanna' become local variables to nameMaker
// when passed into the function
The only way to access a local variable from the global scope is by returning it from the function
var nameMaker = function(name) {
var obj = {name: name};
};
var nameMaker2 = function(name) {
var obj = {name: name};
return obj;
};
var albreyObject = nameMaker('Albrey'); // undefined
// We can't access obj in nameMaker because we didn't return it
var shannaObject = nameMaker2('Shanna'); // {name: 'Shanna'}
// We can access obj in nameMaker2 because we returned it
Lexical Scoping, nested functions, and precedence
Local vs Global