Scopes!

intro to Scope

creating scopes

When are scopes actually created?

Each invocation of a function runs completely separately from all other invocations of that function.

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; // ??

What value do you expect to see when we invoke greetSomeone?

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

What do you think will happen when we make reference to firstName?

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

What do you think the result of greetSomeone will be now?

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; //

What about greeting?

var greeting = 'Hello';

var greetSomeone = function (){
  var firstName = 'Kevin';
  greeting = 'Bonjour'
  return greeting + ' ' + firstName; 
};

greetSomeone() // 'Bonjour Kevin'
firstName; // ReferenceError
greeting; // 'Bonjour'

best Practice

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.

advanced Scope

It's all about variable access...

Scope determines what variables are available for you to use at any given point in your program.

What is scope and why does it matter?

There's only one way to create local scope: inside a function body.
Each function body has it's own local scope.
- Nothing else creates local scope. Only function bodies.

How do we create local scope

REVIEW

Review : Local SCope

var func = function(){
  var local = true;
};
func();

console.log(local);
// ReferenceError: local is not defined

What does local scope mean?
It simply means that variables declared in a function cannot be accessed outside of the function body.

Note: keyword var is important here!

REVIEW : Global scope

Global scope is for variables you want to be broadly accessible.
Avoid putting things here unless you have to.

REVIEW : Keyword Var

Always use the var keyword to create new variables. Funky, unexpected things happen when you don't.
Plus, it just makes your code easier to read.
This is one of those areas of engineering where just following a simple rule (always use the var keyword when declaring a new variable) will save you a lot of effort and future pain.
You can spend time learning more if you want, or you can just always use the keyword var.

NESTED SCOPES

AND

PRECEDENCE

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;


  }



}

functional programming

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.

functional programming





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);
}

Review : how do we create scope

For those of you coming from other languages, note that block scope does not exist in JS.

For those of you who only know JS- know that people coming from other languages will be slightly confused by not having block scope.
- Don't worry about this; just keep doing what you already are.

Key takeaways

Local vs Global

Local scope variables - declared within a function body and only accessible within that function
Global scope variables - any that are not declared within a function body
- if you don't use the "var" keyword in a function, the variable gets put on the global scope
The only way to access a local variable from the global scope is by returning it from the function

Questions?

Exercise Time!

returning variables from functions

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';
}

REVIEW : Global vs. Local Scope

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!';
}

REVIEW : Global Scope

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!';
}

REVIEW : Global Scope

REMEMBER: y is not declared until addToGlobalScope is called!

addToGlobalScope();

console.log(y); //???

console.log(y);//'global here, too'

Scopes!

intro to Scope

creating scopes

What value do you expect to see when we invoke greetSomeone?

What do you think will happen when we make reference to firstName?

What do you think the result of greetSomeone will be now?

What about greeting?

best Practice

advanced Scope

What is scope and why does it matter?

How do we create local scope

Review : Local SCope

REVIEW : Global scope

REVIEW : Keyword Var

NESTED SCOPES

AND

PRECEDENCE

functional programming

functional programming

Review : how do we create scope

Key takeaways

Questions?

Exercise Time!

returning variables from functions

REVIEW : Global vs. Local Scope

REVIEW : Global Scope

REVIEW : Global Scope

PCA Scopes

PCA Scopes

telegraphprep

Scopes!

intro to Scope

creating scopes

What value do you expect to see when we invoke greetSomeone?

What do you think will happen when we make reference to firstName?

What do you think the result of greetSomeone will be now?

What about greeting?

best Practice

advanced Scope

What is scope and why does it matter?

How do we create local scope

Review : Local SCope

REVIEW : Global scope

REVIEW : Keyword Var

NESTED SCOPES

AND

PRECEDENCE

functional programming

functional programming

Review : how do we create scope

Key takeaways

Questions?

Exercise Time!

returning variables from functions

REVIEW : Global vs. Local Scope

REVIEW : Global Scope

REVIEW : Global Scope

PCA Scopes

More from telegraphprep