Scope in JavaScript

let name = "Jack"

10 line codebase: I can see all the variables that exist

100 line codebase: it's hard to see all the variables that exist

1,000 line codebase: it's near impossible to see all the variables that exist

100,000 line codebase: it's impossible to see all the variables that exist

Luckily, not all variables exist in all places at the same time, because of scope

A variable's scope is the places it can be used within a codebase. 

let x = 1;

function foo() {
  let y = 2;
}
console.log(x);

console.log(y);

✅

❌

Global scope

Variables defined in the top level (e.g. not inside any function/conditional/block). These are available anywhere in the file.

Block scope

Variables defined in a block, such as a function. These are available only within the block they were defined in.

* only applies to let and const. var follows different rules which we'll talk about in a bit

Scoped variables can only be referenced from the same scope that they were defined in.

Block scope

{

}

In JavaScript, a block is all code within a set of curly braces.

{

}

{

}

function foo()

{

}

if (x > 2)

{

}

while (x > 2)

let x = 1;

if (something) {
  let y = 2;
}
console.log(x);

console.log(y);

✅

❌

let someGreeting = "Hello"

function greetUser(name) {
  let greeting = "Hi ";
  console.log(greeting + name);
}

greetUser("Naima");
console.log(greeting); // It doesn't exist here

console.log(someGreeting); // This does exist here.

❌

✅

https://repl.it/@jackfranklin2/scope-intro

Nesting

function grandfather() {
  let name = "Hammad";
  // likes is not accessible here
  function parent() {
    // name is accessible here
    // likes is not accessible here
    function child() {
      // Innermost level of the scope chain
      // name is also accessible here
      let likes = "Coding";
    }

    child();
  }

  parent();
}

grandfather();
function grandfather() {
  let name = "Hammad";
  // likes is not accessible here
  function parent() {
    // name is accessible here
    // likes is not accessible here
    function child() {
      // Innermost level of the scope chain
      // name is also accessible here
      let likes = "Coding";
    }

    child();
  }

  parent();
}

grandfather();
function grandfather() {
  let name = "Hammad";
  // likes is not accessible here
  function parent() {
    // name is accessible here
    // likes is not accessible here
    function child() {
      // Innermost level of the scope chain
      // name is also accessible here
      let likes = "Coding";
    }

    child();
  }

  parent();
}

grandfather();
function grandfather() {
  let name = "Hammad";
  // likes is not accessible here
  function parent() {
    // name is accessible here
    // likes is not accessible here
    function child() {
      // Innermost level of the scope chain
      // name is also accessible here
      let likes = "Coding";
    }

    child();
  }

  parent();
}

grandfather();

Global scope

Variables defined in the top level (e.g. not inside any function/conditional/block). These are available anywhere in the file.

Block scope

Variables defined in a block, such as a function. These are available only within the block they were defined in.

* only applies to let and const. var follows different rules which we'll talk about in a bit

* only applies to let and const. var follows different rules which we'll talk about in a bit

var

var

var is different and follows function scoping

Global scope

Variables defined in the top level (e.g. not inside any function). These are available anywhere in the file.

Function scope

Variables defined in a function. These are only available within the function they were defined in.

* remember, this is only for var. 

function getBook() {
  if (true) {
    var bookOne = "JavaScript: The Good Parts";
    let bookTwo = "Eloquent JavaScript";
    const bookThree = "The JS Way";
  }

  console.log(bookOne);
  console.log(bookTwo);
  console.log(bookThree);
}

Jack's JavaScript variable rules

1. Do not use var, ever

2. If you might change the variable, use let

3. If you won't change the variable, use const

1. Do not use var, ever

This means you never have to worry about function scope, and can stick to global scope and block scope.

2. If you might change the variable, use let

3. If you won't change the variable, use const

This helps communicate intent in your code.

if (something) {
  let favouriteColour = "red";
  const name = "Jack";
}

Exercise!

In small groups, try to answer the following questions about what the value of the variable will be.

 

Take some time to think this through and try to answer without running the code.

 

Hint: some of them might have errors...

 

I'll paste the examples into Slack.

1

function one() {
  var a = 10;
}
one();
console.log(a);

https://repl.it/@jackfranklin2/scope-1

2

function two() {
  let b = 10;
  let b = 20;
}
two();
console.log(b);

https://repl.it/@jackfranklin2/scope-2

3

let c;
function three() {
  c = 25;
}
three();
console.log(c);

https://repl.it/@jackfranklin2/scope-3

4

function four() {
  d = 25;
}
four();
console.log(d);

https://repl.it/@jackfranklin2/scope-4

5

let e;
function five() {
  const greeting = "Hello";

  function greet() {
    let name = "Eddie";
    e = `${greeting} ${name}`;
  }
  greet();
}
five();
console.log(e);

https://repl.it/@jackfranklin2/scope-5

6

function six() {
  if (true) {
    let f = 50;
  }
  console.log(f);
}

six();

https://repl.it/@jackfranklin2/scope-6

Done! ✅

Made with Slides.com