We need to talk about closures (variables and lexical scope)

closure-examples.js

var text = 'Some text';

function showText () {
 alert(text);
}

showText(); // Alert “Some text”

example2.js

var text = 'Some text';

function showText () {
  alert(text);
}

function dontChangeText () {
  var text = 'The text has not been changed';
  alert(text);
  showText();
}

function changeText () {
  text = 'The text has been changed';
  alert(text);
  showText();
}

showText();
// Alert "Some text"
dontChangeText();
// Alert "The text has not been changed" then "Some text"
changeText();
// Alert "The text has been changed" twice

example3.js

function outerFunction () {
  var a = 'First value';

  function innerFunction () {
    var b = ‘second value’;
    alert(a + ‘ and ‘ + b);
    innerFunction2();
    
    function innerFunction2 () {
      var c = ‘third value’;
      alert(a + ’, ‘ + b + ‘ and ‘ + c);
    }
  }

  innerFunction();
}

example4.js

function outerFunction () {
  var a = 'Hello! ';
  var b = 'What is your name?';

  function innerFunction () {
    a = 'Hi! '; 
    b = 'My name is Lucas!';
    alert(a + b);
  }

  alert(a + b);
  innerFunction();
}

outerFunction();
// Alerts "Hello! What is your name?" and
// "Hi! My name is Lucas!" respectively

example5.js

function showText () {
 var text = 'Some text';
 

function displayText () {
 alert(text);
 }

return displayText;
}

var myFunction = showText();
myFunction(); // Return “Some text”

example6.js

function counter () {
  counter = 0;

  function add () {
    counter += 1;
  }

  add();
  return counter;
}

example7.js

function counter () {
  var counter = 0;
  function add() {
    return counter += 1;
  }
  return add;
}

var myCounter = counter();

myCounter(); // Return 1
myCounter(); // Return 2
myCounter(); // Return 3

example8.js

function counter () {
  var counter = 0;
  
  function changeValue(value) {
    counter += value;
  }

  function increment () {
    changeValue(1);
  }

  function decrement () {
    changeValue(-1);
  }

  function value () {
    return counter;
  }

  function reset () {
    counter = 0;
  }

  return {
    increment: increment,
    decrement: decrement,
    reset: reset,
    value: value
  };
}

var myCounter = counter();

myCounter.value(); // Return 0
myCounter.increment(); // Increase the counter
myCounter.increment(); // Increase the counter again
myCounter.value(); // Return 2
myCounter.decrement(); // Decrease the counter
myCounter.value(); // Return 1
myCounter.reset(); // Reset the counter
myCounter.value(); // Return 0