My silliest mistake in Javascript

When I begin learning something new, my self-esteem goes through a roller-coaster (Psst I haven’t been on an actual roller-coaster). However, more often than not, the most irritating problems / bugs are caused by the silliest of mistakes. With experience I have become better at debugging my own code, which might very well be because, now I do not dismiss any mistake as being too stupid for me to have committed.

My variable is right there why won’t javascript see it?

After writing code in Python for years, I just assumed that whatever is defined in the global scope will be available for me in the local one. But JS is way to particular about keeping the scopes separate.

So this is what happens, quite often in my code:

Example 1

const module = {
  awesome_variable: 93,
  stupid_function: function() {
    console.log("here is what awesome_variable holds:", this.awesome_variable);
  }
}

module.stupid_function();

This works as expected.

here is what awesome_variable holds: 93

Example 2

const module = {
  awesome_variable: 93,
  stupid_function: function() {
    console.log("value of awesome_variable from stupid_func:", this.awesome_variable);
    var inner_function = function(){
       console.log("here is what awesome_variable from inner_function", this.awesome_variable);
    }
    inner_function();
  }
}

module.stupid_function();

This is where things start going wrong. Now we have an inner_function which is defined inside stupid_function, and unlike python, javascript wouldn’t let us access awesome_variable from within inner_function.

value of awesome_variable from stupid_func: 93
here is what awesome_variable from inner_function undefined

Example 3: python

This is an attempt to do something similar with python.

a = 2
def stupid_function():
   print("from stupid_function", a)

   def inner_function():
      print("from inner_function", a)

   inner_function()

stupid_function()

Global scope is always accessible from local one.

from stupid_function 2
from inner_function 2

Example 4: `bind(this)` to the rescue

const module = {
  awesome_variable: 93,
  stupid_function: function() {
    console.log("value of awesome_variable from stupid_func:", this.awesome_variable);
    var inner_function = function(){
       console.log("here is what awesome_variable from inner_function:", this.awesome_variable);
    }.bind(this); // <<<---- this line here 
    inner_function();
  }
}

module.stupid_function();

value of awesome_variable from stupid_func: 93
here is what awesome_variable from inner_function: 93

Inspiration for this post

I often stumbled after making the same mistake. Yesterday I saw someone pull their hair out and curse their computer. After witnessing their agony and recalling my plight I decided to jot my thoughts down here.

This post is dumb, I need in depth knowledge about scopes and closures

Yes I know, the post does not explain the concepts in detail. Please quench your thirst for knowledege at:

https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md