Seeking some closure

Introduction

As part of my effort to better understand how functions work in Javascript, I had reviewed the concept of closure and how powerful it can be when it comes to organizing code. I won't go over closure here, but you can read more from Mozilla here. The specific issue I dealt with involved accessing the closure variables in an inner function.

Can't see bloody A,B,C or D

A situation I had never encountered before involving the Scope debugging panel in Chrome. I was attempting to determine the value assigned to a variable by a function call while inside a nested function. A simplified version of the scenario is below:

function testing() { var a = "modern"; var b = "major"; var c = "general"; function innerFunction() { console.log(`Not using parent function var`); } innerFunction(); }; 

If you were to run the function testing(), you would see that there is no sign of the variables a,b or c if a breakpoint is placed inside the innerFunction().

I can't see you

What I discovered was that the values of references in the outer function are not visible in the inner function unless they are actually used. Making a one line change to the above example results in this:

function testingClosure() { var a = "modern"; var b = "major"; var c = "general"; function innerFunction() { console.log(`Using parent function var, value: ${a}`) } innerFunction(); }; 

The outer testingClosure() function variables are now available inside the innerFunction() for debugging.

I had originally wanted to examine the value of a inside the inner function without writing any code, but due to the way browser debugging works, there was no way around it.

Codepen

You can experiment with closures here:

Try placing a debugger statement in the inner function and see the scope difference.