{"id":4714,"date":"2018-04-24T10:33:36","date_gmt":"2018-04-24T10:33:36","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=692"},"modified":"2018-04-24T10:33:36","modified_gmt":"2018-04-24T10:33:36","slug":"thoughts-2-understanding-js-variables","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/thoughts-2-understanding-js-variables\/","title":{"rendered":"Thoughts #2 – Understanding JS Variables"},"content":{"rendered":"

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

This time around I spend couple of weeks (late March to mid-April) learning JS functions<\/a>, scope & hoisting<\/a> 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<\/code>‘ makes everything muddy and making variable declaration more confusing. Vojtech Ruzicka<\/em> post<\/a> greatly helped me to untangle some of the mysteries of variable declaration.<\/p>\n

Variable Declaration<\/h5>\n

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

A Good Understanding of Scope & Hoisting<\/h5>\n

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<\/a>, scope & hoisting<\/a> and function declaration vs function expression<\/a> and only then returned to re-learn variable declaration<\/a> I had a much better understanding variable declaration.<\/p>\n

Difference Between Declared vs Undeclared<\/h5>\n

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

Hoisting Rules with\u00a0 var<\/code> & let<\/code><\/h5>\n

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><\/code>, <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let" target="_blank" rel="noopener">let<\/a><\/code> and <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const" target="_blank" rel="noopener">const<\/a><\/code> 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<\/code> & let<\/code> I got much clearer picture of variable declaration.<\/p>\n

var<\/code> vs let<\/code> vs const<\/code><\/h6>\n

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

Temporal Dead Zone<\/h5>\n

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

A Note on Googling<\/h5>\n

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.<\/p>\n

My recent experience in googling JS variables, scope, hoisting etc is that (a) most Medium<\/a> 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<\/a>, Wes Bos<\/a>,\u00a0 Zell Liew<\/a>, Lena Fure<\/a> and others). Such developers blog posts are very detailed, suitable even for beginners.<\/p>\n

\u201cAh ha\u201d Moment in JS Declarations<\/h5>\n

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

Inspiring Resources<\/h6>\n