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
we mentioned that the variables we declare are only available to us in certain regions of our code, these regions are called scopes.
every function creates its own local scope, variables declared inside a local scope are only available within that scope
var greeting = 'Hello';
var greetSomeone = function (){
var firstName = 'Kevin';
return greeting + ' ' + firstName;
};
greetSomeone() // ??
firstName; // ??
this is the local scope for our greetSomeone function
var greeting = 'Hello';
var greetSomeone = function (){
var firstName = 'Kevin';
return greeting + ' ' + firstName;
};
greetSomeone() // ??
firstName; // ??
Variables declared outside a function body are in the global scope they can be referred to anywhere in our program
function body
var greeting = 'Hello';
var greetSomeone = function (){
var firstName = 'Kevin';
return greeting + ' ' + firstName;
};
greetSomeone() // ??
firstName; // ??
var greeting = 'Hello';
var greetSomeone = function (){
var firstName = 'Kevin';
return greeting + ' ' + firstName;
};
greetSomeone() // 'Hello Kevin'
firstName; // ??
the variable greeting is in the global scope and is available inside our greetSomeone function
var greeting = 'Hello';
var greetSomeone = function (){
var firstName = 'Kevin';
return greeting + ' ' + firstName;
};
greetSomeone() // 'Hello Kevin'
firstName; // ??
We get an error
this happens because we declare our firstName variable inside the scope of our greetSomeone function, we can only access it within that function's scope
var greeting = 'Hello';
var greetSomeone = function (){
var firstName = 'Kevin';
return greeting + ' ' + firstName;
};
greetSomeone() // 'Hello Kevin'
firstName; // ReferenceError
var greeting = 'Hello';
var greetSomeone = function (){
var firstName = 'Kevin';
greeting = 'Bonjour'
return greeting + ' ' + firstName;
};
greetSomeone() // ??
firstName; // ReferenceError
greeting; //
we can reassign variables defined in an outer scope from within an inner scope
var greeting = 'Hello';
var greetSomeone = function (){
var firstName = 'Kevin';
greeting = 'Bonjour'
return greeting + ' ' + firstName;
};
greetSomeone() // 'Bonjour Kevin'
firstName; // ReferenceError
greeting; //
var greeting = 'Hello';
var greetSomeone = function (){
var firstName = 'Kevin';
greeting = 'Bonjour'
return greeting + ' ' + firstName;
};
greetSomeone() // 'Bonjour Kevin'
firstName; // ReferenceError
greeting; // 'Bonjour'
When writing functions, we prefer that functions only make use of:
their parameter, or
Variables defined inside of the function (the function's scope)
only reference global variables inside of functions when nothing else will do.
It's all about variable access...
Scope determines what variables are available for you to use at any given point in your program.
REVIEW
var func = function(){
var local = true;
};
func();
console.log(local);
// ReferenceError: local is not defined
Note: keyword var is important here!
var mamaFunc = function(){
var bigVar = 200;
var lilFunc = function(){
var lilVar = 2;
console.log(lilVar); // ???
console.log(bigVar); // ???
}
console.log(lilVar); // ???
console.log(bigVar); // ???
}
var mamaFunc = function(){
var bigVar = 200;
var lilFunc = function(){
var lilVar = 2;
console.log(lilVar); // 2
console.log(bigVar); // 200
}
console.log(lilVar); // ReferenceError
console.log(bigVar); // 200
}
VARIABLE ACCESS
• Child functions have access to its parent functions' variables
• Parent functions do not have access to its child function's variables
var mamaFunc = function(){
var bigVar = 200;
var lilFunc = function(){
var lilVar = 2;
}
}
var mult = function (num1, num2){
return num1 * num2;
}
var squareArea = function(side){
return side * side;
}
var rectangleArea = function(length, width){
return length * width;
}
var mult = function (num1, num2){
return num1 * num2;
}
var squareArea = function(side){
return mult(side, side);
}
var rectangleArea = function(length, width){
return mult(length, width);
}
Here we use the function "mult" to calculate for us, instead of using the multiplication operator.
Using functions inside of other functions is a commonly used skill with programmers.
var func = function (){
console.log("hello");
console.log("goodbye");
console.log(1001010);
}
var log = function (something){
console.log(something);
}
var func = function (){
log("hello");
log("goodbye");
log(1001010);
}
Here we use the function "log" to shorten the command "console.log"
We can even make it shorter.
var cl = function (something){
console.log(something);
}
var func = function (){
cl("hello");
cl("goodbye");
cl(1001010);
}
Local vs Global
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
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!
y without the var keyword becomes a global variable
//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 printed to the console?
console.log(y) //???
console.log(y) //ReferenceError
Let's walk through the code as the JS interpreter...
var x = 'global!';
//inside a function
function addToGlobalScope(){
y = 'global here, too!';
}
REMEMBER: y is not declared until addToGlobalScope is called!
addToGlobalScope();
console.log(y); //???
console.log(y);//'global here, too'