JavaScript Scope Examples

javascript_let_const_scope.js

/*
 * How Javascript scope works using let and const
 * It is more restrictive as to where values can be accessed within functions and blocks
 */

// This variable can be accessed from anywhere.
const globalScopeVar = 'Can be accessed from anywhere (global scope)';

function parentScope() {
  // This variable can only be accessed within this function and its child function and code blocks.
  let parentScopeVar =
    'This variable can only be accessed within this function and its children';

  // Global scope variables are available in this function scope.
  console.group('parentScope');
  console.log('parentScope can access globalScopeVar: ', globalScopeVar);
  console.log('parentScope can access parentScopeVar: ', parentScopeVar);
  console.log('parentScope can access secondParentScope (function): ', secondParentScope);
  console.groupEnd('parentScope');

  /* parentScope CANNOT access:
    childScopeVar // undefined in this scope
    secondParentScopeVar // undefined in this scope
  */

  // This function is only available to the parentScope. 
  function childScope() {
    // This variable can only be accessed within this function and its child function and code blocks.
    // Cannot be accessed by parentScope or the globalScope.
    const childScopeVar = 'Only available withing this function scope and its children';
    
    console.group('childScope');
    // Global scope variables are available in this function scope.
    console.log('childScope can access globalScopeVar: ', globalScopeVar);
    
    // Can access the variable defined by its parent.
    parentScopeVar = 'parentScopeVar was modified within childScope()';
    console.log('childScope can access parentScopeVar: ', parentScopeVar);
    console.log('childScope can access childScopeVar: ', childScopeVar);
    console.groupEnd('childScope');

    /* childScope CANNOT access:
      secondParentScopeVar // undefined in this scope
    */
  }

  // childScope() is only available to the parentScope
  childScope();
}

function secondParentScope() {
  const secondParentScopeVar =
    'This variable can only be accessed within this function and its children';
  
  console.group('secondParentScope');
  console.log('secondParentScope can access globalScopeVar: ', globalScopeVar);
  console.log('secondParentScope can access secondParentScopeVar: ', secondParentScopeVar);
  console.groupEnd('secondParentScope');

  /* The global scope CANNOT access within this block:
    parentScopeVar; // undefined in this scope
    childScopeVar // undefined in this scope
    childScope() // undefined in this scope
    secondGlobalScopeVar // undefined in this scope
  */
}

// Code blocks won't affect the scope of a variable.
if (true) {
  let secondGlobalScopeVar = 'Can be accessed from this block only';

  console.log('Global scope can access globalScopeVar (in if code block):', globalScopeVar);
  console.log('Only this block can access secondGlobalScopeVar:', secondGlobalScopeVar);
  
  /* The global scope CANNOT access:
    parentScopeVar; // undefined in this scope
    childScopeVar // undefined in this scope
    childScope() // undefined in this scope
    secondParentScopeVar // undefined in this scope
  */
}

// Variables in a loop will still belong to the scope after the loop is done.
for (let index = 0; index < [1,2,3,4,5].length; index++) {
  console.count('Index may be accessed from this loop only');
}

// globalScopeVar can be accessed in the global scope with no issues.
console.log('Global scope can access globalScopeVar:', globalScopeVar);

// Running parentScope.
parentScope();
// Running secondParentScope.
secondParentScope();

/* The global scope CANNOT access:
  parentScopeVar; // undefined in this scope
  childScopeVar // undefined in this scope
  childScope() // undefined in this scope
  secondParentScopeVar // undefined in this scope
  secondGlobalScopeVar // undefined in this scope
  index // undefined in this scope
*/

javascript_var_scope.js

/*
 * How Javascript scope works using var
 */

// This variable can be accessed from anywhere.
var globalScopeVar = 'Can be accessed from anywhere';

function parentScope() {
  // This variable can only be accessed within this function and its child function and code blocks.
  var parentScopeVar =
    'This variable can only be accessed within this function and its children';

  // Global scope variables are available in this function scope.
  console.group('parentScope');
  console.log('parentScope can access globalScopeVar: ', globalScopeVar);
  console.log('parentScope can access parentScopeVar: ', parentScopeVar);
  console.log('parentScope can access secondParentScope (function): ', secondParentScope);
  console.groupEnd('parentScope');

  /* parentScope CANNOT access:
    childScopeVar // undefined in this scope
    secondParentScopeVar // undefined in this scope
  */

  // This function is only available to the parentScope. 
  function childScope() {
    // This variable can only be accessed within this function and its child function and code blocks.
    // Cannot be accessed by parentScope or the globalScope.
    var childScopeVar = 'Only available withing this function scope and its children';
    
    console.group('childScope');
    // Global scope variables are available in this function scope.
    console.log('childScope can access globalScopeVar: ', globalScopeVar);
    // Can access the variable defined by its parent.
    console.log('childScope can access parentScopeVar: ', parentScopeVar);
    console.log('childScope can access childScopeVar: ', childScopeVar);
    console.groupEnd('childScope');

    /* childScope CANNOT access:
      secondParentScopeVar // undefined in this scope
    */
  }

  // childScope() is only available to the parentScope
  childScope();
}

function secondParentScope() {
  var secondParentScopeVar =
    'This variable can only be accessed within this function and its children';
  
  console.group('secondParentScope');
  console.log('secondParentScope can access globalScopeVar: ', globalScopeVar);
  console.log('secondParentScope can access secondParentScopeVar: ', secondParentScopeVar);
  console.groupEnd('secondParentScope');

  /* The global scope CANNOT access within this block:
    parentScopeVar; // undefined in this scope
    childScopeVar // undefined in this scope
    childScope() // undefined in this scope
  */
}

// Code blocks won't affect the scope of a variable.
if (true) {
  var secondGlobalScopeVar = 'Can be accessed from anywhere';

  console.log('Global scope can access globalScopeVar (in if code block):', globalScopeVar);
  
  /* The global scope CANNOT access:
    parentScopeVar; // undefined in this scope
    childScopeVar // undefined in this scope
    childScope() // undefined in this scope
    secondParentScopeVar // undefined in this scope
  */
}

// Variables in a loop will still belong to the scope after the loop is done.
for (var index = 0; index < [1,2,3,4,5].length; index++) {
  console.count('Global scoped loop');
}

// globalScopeVar can be accessed in the global scope with no issues.
console.log('Global scope can access globalScopeVar:', globalScopeVar);
// secondGlobalScopeVar can be accessed in the global scope even though it was defined within a code block.
// If the statement didn't evaluate to true then this variable would be undefined.
console.log('Global scope can access secondGlobalScopeVar:', secondGlobalScopeVar);
// index can be accessed in the global scope even though 
// the loop is done andit was defined within a code block.
console.log('Global scope can access index:', index);

// Running parentScope.
parentScope();
// Running secondParentScope.
secondParentScope();

/* The global scope CANNOT access:
  parentScopeVar; // undefined in this scope
  childScopeVar // undefined in this scope
  childScope() // undefined in this scope
  secondParentScopeVar // undefined in this scope
*/