there are no variables in JS
Apr 1, 2015
5 minutes read

Hello friends!

So This byte sized post (i hope..) is about a fascinating part of JavaScripts plumbing. This was brought on by my discovery of the following article: Understanding delete which I highly recommend reading.

So anyways, about the title, I’m not kidding. Ok kinda, Javascript variables are not exactly what you think. Maybe I’m the last guy out there to learn this but if not,

your welcome.


Everything is an object


You might have heard that everything in javascript is an object. You also might have heard that and not grasped the significance of that as I did. Everything is an object!!

ok, ok, some things are not. the following are not:

  • Strings
  • Numbers
  • Booleans
  • null
  • undefined

Numbers, Strings, and Booleans do have object wrappers which is why they have methods you can call. Everything else is an object

… and on top of that everything happens in the context of an object. See: this (no pun intended).

You might have declared a variable by writing the following:

var x = 'hello world'

What does this code do?

The easy answer is that it declares a variable. Bear with me because today, we are going to learn what happens under the hood.


Execution context


Now, what kangax (the author) iluminated for me was the following:

When ECMAScript(JavaScript) code executes, it always happens within certain execution context.

(The) Execution context is a somewhat abstract entity, which helps understand how scope and variable instantiation works

Code gets executed in a context. He explains there are 3 exection contexts in JS: Global, function and eval. We won’t worry about eval here.

Any code run outside of a function in Javascript is in the global context while any code run in a function is in that functions context (each function call creates a new context).

// example: global context
console.log('I am in the global context');
// example: function context
function log() {
   console.log('I am in this functions context!');
}
log() // The function context is not instantiated until it is called 

This is related to the concept of scope in JavaScript.


Scope

Scope refers to the visibility of variables, or where your variables are accessible.

If you are in a browser and declare a variable outside of a function then we would say the variable is in the Global scope. The global scope in the case of the browser is the window object. In Node the global scope is the global object. Any variables declared without the var keyword in node are in the global scope.

You should know that any variables declared in a function are only accesible from within the function. With node it is the same, but also any variables declared in a file with var are only visible in that file unless they are exported.

Again, when we say scope we mean a place where a variable(s) is accesible.

    // browser code //
    var foo = 'bar'; // accessible anywhere (global scope)
    foo = 'bar';  // also on global scope (window.foo)
    function doSomething() {
       var thing = 'bar' // only be accessible in the function
    }

So under the hood we can think of the current scope in javascript as an object. After all, things in the global scope can be accessed as properties of an object (window/global). But wait…. When I make a variable in a function its not like that… or is it?

Up to this point, I might not have told you anything new, The real eye opener is next…


Variable object??


Every execution context has a … Variable Object associated with it. Similar to execution context, (the) Variable object is an abstract entity, a mechanism to describe variable instantiation. Now, the interesing part is that variables and functions declared in a source text are actually added as properties of this Variable object.


When control enters execution context for Global code, a Global object is used as a Variable object. This is precisely why variables or functions declared globally become properties of a Global object:

Ill let you think about that for a moment…

mind blown here

So this is why in the browser if you do:

var x = "hello world";

// this can be accessed on window!!
console.log(window.x)
// will output: hello world

What the var keyword does is assign the ‘variable’ as an attribute on this variable object. Thus my title ‘There are no variables in JavaScript’ because everything is apparently a property of an object.

So when we execute code in a function, each time the function is called a new variable object is made. The arguments passed in to the function are added to this object. The difference is unlike global context (window or global) we can’t access the variable object directly.

function foo(arg1, arg2) {
    return arg1 + arg2;
}
// new variable object created. With 1, 2 plus the special arguments array.
foo(1,2)

In conclusion

Knowing how Javascript works under the hood can potentially help you avoid pitfalls and solve weird bugs. Easiest example is the article I cited during this post; Understanding delete His reason for writing about execution context and the variable object was because on stack overflow there were people saying all sorts of incorrect things about the delete operator. Their misunderstanding came from not knowing the internals of JS.

the delete Operator in Javascript deletes properties from objects. We have just learned that all variables are properties. So why can’t you use it on anything? I will refer you to his article for the explanation.

resources:

(I highly recommend reading the first two)



Back to posts