Skip to main content

Scope

Lesson objectives#

After this lesson students will be able to:

  1. Define Scope restriction
  2. Differentiate between global and local scope
  3. Describe how functions can call other functions
  4. Use const and let for block-scoping
  5. Use block-scoping with loops
  6. Use block-scoping with conditionals
  7. Use blocks within blocks
  8. Define recursion
  9. Define pollution

Define Scope restriction#

Scope is the restriction of where in your code your variables can be accessed. If you try to access a variable outside of its scope, it will not be defined.

In general, you want scope to be restricted. You only want your variables accessible to specific safe zones.

Example of scope restriction#

A variable num is defined inside a function.

const exampleFunction = () => {  const num = 100;  console.log(num * num);}
console.log(num);   // num is not available outside the function

ReferenceError: num is not defined

exampleFunction();  // even if you run the function first . . .
console.log(num)    // the scope of num is restricted to the function

Differentiate between Local vs Global Scope#

When variables are declared inside a function, they are scoped locally to that particular function.

note

Variables declared within a function are available within that function and to any sub-functions. The variables are not accessible outside of the function.

When variables are declared outside of any and all functions, the value of the variable is accessible to all other functions (and all functions within those functions), and are scoped globally.

  • Global scope is the the part of your code outside of any enclosing functions
  • Local scope is the parts of your code that are inside functions.
const item = "spicy meatball";
const exampleFunction = () => {  console.log(item + " within function");};
exampleFunction();

=> spicy meatball

Everything is defined within a scope. The variable item is defined in the global scope and is available to all functions and sub-functions.

As a natural consequence of local scope, functions cannot access variables stored in sibling functions.

If we make another function:

ReferenceError: item is not defined

The item variable is not visible inside getItem, because it is scoped only to setItem.

Describe how functions can call other functions#

Functions can call other functions that reside in an accessible scope. For example:

const returnName = () => {  return "Matt"}
const returnGreeting = () => {  return "oh hai, " + returnName()}console.log(returnGreeting());

Since it is good practice for a function to do only one thing, we can have many functions perform different little tasks and call on each other. This is a good strategy for compartmentalizing functionality.

tip

A function can take the return value of another function and put it to good use.

Question if everything has a scope, our functions are declared in a scope. In which scope have we been declaring our functions? (answer: global scope).

Let's build two interacting functions from the ground up, both will be defined in the global scope:

extra problem#

  • Write a function checkSquare that will return true if a number is a perfect square (Check if the square root is a whole number). Hint: use Math.sqrt() and (num % 1 == 0)
  • Write function checkToLimit that will loop up to an arbitrary limit brought in as a param (say, 100), and console log whether each number is a perfect square. Call upon the previously defined checkSquare function.

Use const and let for block-scoping#

let and const will scope your variables to the block in which they are declared.

Example -- make a block and declare a variable within:

{  const item = "spicy meatball";}

item is available inside the block, but not available outside.

This works:

{  const item = "spicy meatball";  console.log(item);}

=> "spicy meatball"

This doesn't:

{  const item = "spicy meatball";}
console.log(item);

ReferenceError: item is not defined

var by contrast will leak out of a block.

{  var item = "spicy meatball";}console.log(item);

=> "spicy meatball"

This is not so great. In general, we want to control our scope as tightly as possible. If we don't, we can end up with variable collisions and accidental overwrites. This is why we stick with let and const.

Use block-scoping with loops#

Using let within a for loop control panel scopes the variable to the block.

for (let i = 0; i < 100; i++) {  console.log("Inside the block: ", i);}
console.log("Outside the block: ", i);

Inside the block: 1

Inside the block: 2

etc.

Outside the block: Reference error: i is not defined

Activity (6 mins)#

Write a for loop but use var instead of let.

Verify: is the variable accessible outside the loop after it has run?

Verify: is the variable accessible outside of the loop with let?

Verify: What about a let variable defined within the block of the loop?

Use block-scoping with conditionals#

Using let or const within conditional blocks will scope to the block (no surprises there).

if (true) {  const num = 100;  console.log(num);}

=> 100

if (true) { const num = 100;}
console.log(num);

=> Reference error: num is not defined

Knowing what we know about block scope, can we write code like this?

const age = 21;let message = "";
if (age < 21) {  message = "You cannot buy the beer";} else {  message = "You can buy the beer";}
console.log(message);

=> You can buy the beer

Use blocks within blocks#

Following the same logic, can we access variables in a block that have been declared in an outside block?

const words = "that's a...";{  const item = "spicy meatball";  const start = "mama mia!";  {    console.log(start);    console.log(words);    console.log(item);  }}

=> mama mia!

=> that's a ...

=> spicy meatball

Block scope flow: outside in#

We know if we declare a variable inside a block that it is not accessible at the global level.

If we declare a variable at the global level, is it accessible inside a block?

const words = "that's a...";{  const item = "spicy meatball";  console.log(words);  console.log(item);}

=> that's a...

=> spicy meatball

Define recursion#

A function has access to itself because it is always declared in a scope accessible to itself.

When a function invokes itself, this is called recursion.

const func = () => {  return func();};
warning

This will create a loop. This particular loop is infinite because it has no exit condition.

This function has an exit condition and can safely call itself:

/** @type {(num: number) => void} */const countdown = (num) => {  if (num !== 0) {    console.log(num);    countdown(num - 1);  } else {    return;  }};

See if you can figure out how it works.

Define pollution#

You do not want your global scope to be polluted. There are reason for not polluting your global scope.

  • Global variables can be overwritten or misconstrued elsewhere
  • Potentially causing unwanted, hard to track bugs
  • Namespace
  • Memory / garbage collection

http://stackoverflow.com/questions/8862665/what-does-it-mean-global-namespace-would-be-polluted