The Death Of Vars - JS

Steve balmer meme

Scope refers to the visibility of entities of your program to different parts of your program. To put it in simplest terms, scope defines which parts of a program can see your variables.

Take this example in Java.

1
2
3
4
5
6
if(true)
{
  int x = 10; //variable declared inside the scope of if block
}

System.out.println(x);

The above code is going to give a compiler error saying something like variable x is not defined.

The reason its giving an undefined error is because the variable x is declared within the curly brackets of the if statement. Therefore its scope is within the curly bracket, i.e, can be seen or accessed within the curly brackets. When we are trying to access the variable outside the curly brackets the compiler just blows up and says that NO! You can’t access this variable here.

Elementary right? It does seem intuitive, I really wouldn’t want one part of my code to mess with some other part of the code that I had written 100 lines ago.

Well let me introduce you to the world of Javascript. The glittering unicorn of the web that will shit the biggest dump on you if you are not careful.

In light of the previous example, here is the Javascript translation of the code written in Java.

1
2
3
4
5
6
if(true)
{
  var x = 10; //variable declared inside the scope of if block
}

console.log(x);

Guess what happens? It prints the damn value! Lets see another example.

1
2
3
4
5
6
for(var c = 0; c < 10; c++)
{
   //variable c declared inside the scope of for block
}

console.log(c);

Guess what happens here? It also prints the damned value. Variable is getting scoped neither within the if block nor in the for block. WTF!!

The reason its not getting scoped is because Javascript has this thing called function scoping. Variables declared only within function declarations get scoped. For example:

1
2
3
4
5
6
7
8
function goFunc()
{
  var x = 10;
}

goFunc();

console.log(x);

Now the logged output is giving the desired “undefined” error. The variable x is getting scoped within the function declaration.

Now this is just crap. Don’t know about you but I have a life. When my code breaks because I didn’t notice that variables are getting unexpected values because I wasn’t careful with the scopes while writing hundreds of lines code with sleepy eyes late at night, its really gonna piss me off.

Now many people have found smart ways to get around this problem but this thing with Javascript scoping can be really hard to get it inside your brain if you come from a Java or C++ background.

philosophoraptor meme

There is now. With ES6 implementation of Javascript released in 2015 it came in with a bunch of new features, including a cleaner way to scope the variables.

We need to introduce ourselves with the keyword let. How do we use it? Just use it instead of var. Example:

1
2
3
4
5
6
if(true)
{
	let x = 2;
}

console.log(x);

There! Now the variable x is scoped inside the if block and will give an undefined error once we go outside this scope. Another way is to define the values with a const keyword but that’s for declaring constants.

Now the big question, should we use var anymore? The answer is no, we should not use the keyword var anymore. There is absolutely no need for it. There is a leaner and sexier way to do this and we should all follow it.

But will we stop using var? The answer again is no, we won’t stop using var. Let’s face it. You are lazy. Writing code in ES6 standard would require you to use a Transpiler to ensure that the code runs on every version of browsers, since all the browser haven’t fully conformed to the ES6 standard. Would you really go through the trouble? Also, if you have been writing Javascript for years and years then its really hard to break the habit of declaring variables with var. We are all but slaves to our habits and these small habits that have grown upon us will keep the legacy of var alive, weak in presence but alive.