Global, local and block scopes and what this means for variable declaration in JavaScript

Before we dive into JavaScript variable declaration, I want to go over a cool web tool that I use occasionally. All work that we do for clients needs to solve an issue and enhance their day to day process at work. Sometimes this request falls within getting a certain piece of functionality to work in a user’s preferred web browser. Cough…IE. Excuse me, getting over a cold. Anyway, as a Salesforce Developer or even a JavaScript developer, you might find yourself encountering bugs based on certain functions you are trying to use. Can I Use is a wonderful website that provides up to date browser support tables for support of front-end web technologies on desktop and mobile web browsers. Of course, there are other means to achieve this with Polyfills if needed, but this might help clear the air.

While going through material on Lightning web components, I found this great trailhead called Modern JavaScript Development that goes over some really useful material and wanted to share a few pieces of what it covers. Since Lightning web components now meet modern web standards, this is a great guide to get started with some JavaScript principles that will help along the way.

Okay so we know that var keyword is used to declare a variable. Oh theres another one? Okay, so let is also used. Ugh, another one called const?? This is getting a little out of hand but you’ll be happy to know that they all have their place and we are going to cover their purpose.

What is Scope? Scope determines the accessibility or visibility of variables. In JavaScript, there are two types: Global and Local. Let’s (ha!) cover what this means for var.

Variables with the var keyword are globally or function (locally) scoped. Globally when declared outside of a function and locally when, you guessed it, its declared within a function.

Variables declared with a global scope can be accessed within any scope.

Variables declared within a function are in the local scope and cannot be accessed outside of their scope.

Just so you know, even though the local scope is contained to the function above and yields a reference error when accessed outside the scope, I still think that you are the best blog reader! Okay, let’s go over block scoping. A variable declared with var in a block scope is available outside of that block scope.

In the example above, the bestBlogReader variable will continue to exist beyond the scope of this block and sometimes we might not want that, even if it is you. I want to take a second to look a little deeper into var and discuss JavaScript Hoisting.

When JavaScript compiles your code, all variable declarations using the var keyword are hoisted to the top of their function or global scope.

If you guessed undefined, then you are correct! This is because var variables get moved to the top of their scope when JS compiles at runtime. So the code block above is actually interpreted as this.

To recap, the two main takeaways are that a variable declared with var in a function scope cannot be accessed outside of that scope. A variable declared with var in a block scope is available outside of that block scope.

Enter the declaration type let. Variables declared with the let keyword inside of a block scope are only accessible inside of that block scope. A block is any code that exists within brackets {}. Lets look at this simple example of the difference generating a block scope variable with var and let:

So which one do I use? It’s a pretty popular opinion that let is the preferred variable declaration now. Let’s (ha!) examine the “Why?”. Same as the var keyword, a let variable declaration can be updated within its scope. However, the difference lies with re-declaring a variable within its scope.

But what if we declare two identical let variables in separate scopes?

This makes the usage of let better because you don’t have to worry about using the same name for a variable since it exists only within its scope. Last but not least, the const variable declaration!

Declaring variables using const has the same behavior as let regarding scope, however it creates a constant reference to that variable.

It’s important to note that if the constant is an object, you can still reassign the properties of that object, just not the actual object itself.

In the first object example, we are simply reassigning a property of the object, which will not throw an error. In the second, we are actually trying to reassign the object and therefore, you will get an error.

At a high level, a lot of this falls within adding enhanced security to your code and only giving access where necessary. This is known as the Principle of Least Privilege, an important concept in computer security that is also applied in programming design patterns. Thank you so much for reading and as always, if you have any questions, please don’t hesitate to reach out!