Understanding Scope In Javascript

In javascript we assign value to variable and retrieve information a variable is holding.

Scope deals with accessibility of variable to value.It is a area in program where your variable has access to value.

Place where you declare your variable

                              ↓

determines variable scope 

                                ↓ and that

determines where we can access that variable in the whole program.

var globalScope = “Global”

function inner(){
  var innerScope = "Inner"; //scoped to function
  console.log(innerScope);
  console.log(globalScope);
}

console.log(globalScope);    //Global

It is declared (and value assigned) on global environment so it has global scope. It is available everywhere.

console.log(innerScope)

//ReferenceError: innerScope is not defined

Since it is defined inside the function, we don’t have access to variable innerScope outside that function.

inner();

//Inner

//Global

When we call inner(), we have access to variable innerScope. We also have access to variable globalScope because it is a global variable.

Global Scope: Window is a global scope in the browser. It does not have outer scope. It is the outermost scope. Any variable declared in global scope i.e outside the function can be accessed in any scope.

Local Scope: It a scope within a function. Any variable declared within a particular function can be accessed within that scope and any inner function. It can not be accessed in outer or parent scope or in global scope.

Function Scope

Consider this example:

var name = 'Batman';

function realName(){
  var name='Bruce Wayne';
  console.log(name);
}

realName(); // Bruce Wayne
console.log(name); // Batman

Here we have variable name declared in two different scope. Variable name outside the function is in global scope and is accessible anywhere in the code. But variable declared inside the function is only accessible inside that function because it is defined in the local scope of the function also called function scope.

function funcScope(){
  var funcVar = "inside function";      /*scope to funcScope
}

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

Block Scope

Consider this example:

if(true){
  let name='batman';
}

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

/* we get same result with const

We get error because let name variable/identifier is scoped to curly braces {..}.

It can not be accessed outside the curly braces.

if(true){
  let name="batman";
  console.log(name);
}

// batman
// ReferenceError: name is not defined

/* we get same result with const

let/const both are block scoped while var is function scoped. Var can be accessed outside the curly braces {..}

if(true){
  var name='batman';
}

console.log(name); // batman

Consider this:

var person = {
  name: 'luffy',
  age: 19
}

Here, we are creating object person with object literal.Curly braces are not scope here. They are only block to enclose key value pair of object.

Lexical Scope

Consider this example:

function outer(){
  //outer function scope
  var outerScope = 'outer space';
  function inner(){
    //inner function scope
     console.log('from ' + outerScope);
   }
  inner();
}

outer();    // from outer space

• variable outer is declared inside outer function(in the scope of outer function)
• inner function is nested inside outer function.
• we are console logging variable outer inside inner function.
• we are invoking inner function inside outer function.

Here, when we invoke outer function, it will console log from outer space.

Why?

Answer is Lexical Scope. When function is nested inside another function, inner(nested)  function has access to it’s parent/outer scope.  It can access any variable declared in outer function scope.

But parents scope can not access the variable declared in its nested function

function outer(){
  //outer function scope
  var outerScope = 'outer space';
  function inner(){
    //inner function scope
    var innerScope = 'inner space';
    console.log(‘from ‘ + outerScope);
   }
  console.log(‘from ‘ + inner)
}

outer();    

//ReferenceError: innerScope is not defined

Here, variable innerScope is declared in inner function  scope so it not accessible in outer function scope.