Scope

Introduction

• The scope is based on where it is defined
   
• Defines the accessibility of the values and functions of your code
   
• "The lifespan of a variable"

Scope > Introduction

Global scope

• Variables outside a function
   
• Can be accessed and changed in any other scope
   
• Exists as long as your application runs

Scope > Global scope

// Variable in global scope
let globalVariable = 'Hello';

console.log(globalVariable);


function functionName() {
    // The variable is accessible since the variable is in the global scope
    console.log(globalVariable);
}

functionName();

// Output: Hello

Scope > Global scope > code example

Local scope

• Variables inside a function
   
• Variables with the same name can be used in different functions
   
• Exists as long as your functions are being called and executed

Scope > Local scope

// Global scope
let firstName = 'John';

function firstFunction() {
    // Local scope
    let lastName = 'Doe';
    console.log(firstName + '' + lastName);
}

function secondFunction() {
    let greeting = 'Hi there!';
    return greeting;
    console.log(greeting);
}

firstFunction();
secondFunction();

Scope > Local scope > code example

Lexical scope

• Also called "Static scope"
   
• Child functions have access to resources of their parent scope

Scope > Lexical scope

function outerFunction(){
 
    if(true) {
        // x is accessible everywhere inside outerFunction() but not outside
        let x = 'Hi';
        console.log(y); // y is not accessible, returns a ReferenceError
    }

    function nestedFunction(){
    
        if(true) {
            // y is accessible everywhere inside nestedFunction but not outside
            let y = 'Hello';
            console.log(x); // x is accessible, output: Hi
        }

        if(true) {
            console.log(y); // y is accessible, output: Hello
        }

        return nestedFunction;
    }

}
 
outerFunction();

Scope > Lexical scope > code example

Closures

• Can access the variables in and arguments of the outer function
   
• When a function can remember and access its lexical scope even when that function is executing outside its lexical scope
   
• Has 3 scope chains:
  • access to its own scope
  • access to the outer function's variables
  • access to global variables

Scope > Closures

function person(firstName, lastName){


    ​let age = 19;

    // Inner function has access to the outer function
    function completePerson() {

        return firstName + ' ' + lastName + ' is ' + age;
    }

    ​return completePerson();
}

​
person('John', 'Doe');

// Output: John Doe is 19

Scope > Closures > code example

function outerFunction(){
    let greeting = 'Hi';
    let counter = 1;

    function innerFunction(){
        
        if(counter === 1) {
            console.log(greeting);
        } else {
            console.log('Not equal to 1 anymore');
        }

        counter++;
    }
    return innerFunction;
}

let example = outerFunction();

example();
example();

Scope > Closures > code example 2

function counter() {
    
    let a = 2;
    
    let b = function() { 
        a++;
        return a; 
    };
    
    return b;
}

let c = counter();

console.log(c() + ' , ' + c());

Scope > Closures > code example 3

Block scope

• Cuts down potential sources of bugs
• Useful when you define temporary variables (e.g. in loops)
• Var in a block scope is accessible outside the block scope
• Let inside a block scope is only accessible inside that scope

Scope > Block scope

// Block scope inside if statement
if (10 == '10') {
    // statement here
}


// Block scope for the for loop
for (let i = 0; i < 20; i++) {
    // code block here
}


// An empty object literal
var a = {}


// Undefined object
{ var a }

Scope > Block scope > code example

// A new block scope is created between the curly braces
if (true) {
  var foo = 'Foo';
  let bar = 'Bar';
}

console.log(foo); // Output: Foo

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

Scope > Block scope > code example 2