Thoughts #2 – Understanding JS Variables

Written by Tinjure WP Posted on

I have been revisiting JS variables (or declaration) for about two-weeks with an aim to understand deeply. I had only a general overview of JS variables previously but had avoided learning associated topics like scope & hoisting. Nevertheless, I had felt that I understood those topics but clearly I was wrong.

This time around I spend couple of weeks (late March to mid-April) learning JS functions, scope & hoisting more deeply but realized that JS variable is too confusing because its context base process. Value of JS variable depends upon context it is being used and untangling all the use context is very confusing. The ‘old var‘ makes everything muddy and making variable declaration more confusing. Vojtech Ruzicka post greatly helped me to untangle some of the mysteries of variable declaration.

Variable Declaration

Looking at the tutorials, blog posts and most JS resources, it becomes clear that variables are declared using var keyword. Confusion related with var declaration due to scope & hoisting process are described ubiquitously. Recent documents & resources suggest avoiding the use of var and instead declare variable using let & const keywords.

A Good Understanding of Scope & Hoisting

I encountered many blog posts and tutorials where even experienced developers expressed scope & hoisting as confusing. This probably justifies a newbie like me, struggling to get a clear understanding of variable declaration, scope, hoisting & function. This time around, I first learned functions, scope & hoisting and function declaration vs function expression and only then returned to re-learn variable declaration I had a much better understanding variable declaration.

Difference Between Declared vs Undeclared

In MDN var Description, difference between declared vs undeclared has been described with examples. Understanding these differences with examples helped me to better understand variable declaration with var, let and const keywords. The MDN recommends to always declare variables, regardless of whether they are in a function or global scope. It looks like a a good practice that I must get use to it.

Hoisting Rules with  var & let

This time around I used MDN documentation on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var" target="_blank" rel="noopener">var</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" target="_blank" rel="noopener">let</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const" target="_blank" rel="noopener">const</a> as my primary learning resource. Because these documents don’t always explain for beginners, I had to resort to developers blog posts for additional explanation. After learning hoisting rules for var & let I got much clearer picture of variable declaration.

var vs let vs const

It is recommended to use let and const to declare variables. Most experience developers suggest using const than let except when required (eg. conditional statements). This is a topic that I plan to return after some code writing experience only.

Temporal Dead Zone

While I was learning variable declaration, a new terminology ‘Temporal Dead zone’ pops up here and there. Dmitri Pavlutin has explained temporal dead zone process in his variable hoisting & variable life cycles posts in very detail. It is essential to understand the process in relation to variable declaration with let keyword. I prepared a brief learning-note of this process is posted separately.

A Note on Googling

Now-a-days, it is almost ubiquitous that whenever we need any information on any topic we just google it. This is true for either looking for a grocery or electronic items in the Amazon or looking for technical topics like JS functions, variable hoisting etc. I do spend significant time googling terms like JS variables, CSS grid or many other similar topics.

My recent experience in googling JS variables, scope, hoisting etc is that (a) most Medium articles/posts are brief, done either as advertisement or anchorage for authors’ website link, (b) I benefited most from blog posts of recognized developers (eg. Dimitri Pavlutin, Wes Bos,  Zell Liew, Lena Fure and others). Such developers blog posts are very detailed, suitable even for beginners.

“Ah ha” Moment in JS Declarations

Like many others, I was having problems understanding scope, hoisting, temporal dead zone for some time. My ‘Ah ha’ moments in understanding these concepts came from the blog posts of Dmitri Pavlutin, Vojtech Ruzicka, Zell Liew, Lena Faure and others.

Inspiring Resources