Variable Scopes and Why They Matter

The basics of var, let, and const

.Photo by Nubelson Fernandes on Unsplash

Let me start this off with saying that I started my programming journey with learning Python. Eventually I discovered my passion for web development and began learning JavaScript, picking it up quite quickly with my preliminary understanding of logical programming.

One aspect of JavaScript that took me a moment to comprehend were the var, let, and const keywords and the difference between them. Python variable scopes are pretty simple and boil down to the variable either being inside or outside of a function. In fact, Python doesn’t require a keyword for a variable to be created.

var x = 0;

This line of JavaScript sets a variable called x equal to 0.

x = 0

This line of Python accomplishes the same thing.

Arguably, Python can be a lot simpler to write and read with not having as much required syntax as JavaScript. However, the different variable keywords and their applications do have a purpose and can be extremely beneficial in larger applications handling large amounts of data.

Get Saxton Grey Vasquez’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

JavaScripts’ different keywords allow for the variable to be a part of a certain scope. Lets take the example of a restaurant checking out a customer. The code would look something like this ;

var total = 0;
const tax = 0.08;
const itemsPurchased = [5, 3, 4];

function checkOut(array) {
  let subTotal = 0;
  for (let price in array) {
    subTotal += array[price];
  }
  total = (subTotal * tax) + subTotal;
  return total;
}

console.log(checkOut(itemsPurchased));

This code creates a global variable (accessible to not only the entire webpage but also the window) called total that is keeping track of the customers total as each item and tax is added. Notice that the tax and itemsPurchased variables are both using ‘const’ keywords.

The const keyword is meant for variables that will be remaining consistent, i.e. tax being 8% no matter what. For this example, I decided to make the itemsPurchased variable a const because it wont change in this scenario but practical use of this code would require a function to build that array as the customer scans each item.

In the checkOut function, the array being the itemsPurchased is passed as an argument. The function then creates a changeable variable called subTotal using the ‘let’ keyword that is only accessible within the checkOut function. Simply trying to pass console.log(subTotal) outside of the function would return undefined as the variable does not exist in a global scope. A ‘var’ keyword could also be used and the variables scope wouldn’t change but the ‘let’ keyword is a better indicator that the variables’ value is going to change.

As the function moves along, each price (element) in the array is added together and tracked within the subTotal variable. Once each price is added to the subTotal, the total variable is updated taking account of tax and returned as a value of the function.

Since the total variable is global, it can be updated within the function and will still hold the updated value if you console.log it outside of the function. Here’s what I mean;

var total = 0;
const tax = 0.08;
const itemsPurchased = [5, 3, 4];

function checkOut(array) {
  let subTotal = 0;
  for (let price in array) {
    subTotal += array[price];
  }
  total = (subTotal * tax) + subTotal;
}

checkOut(itemsPurchased);
console.log(total)

This code will return the same result to the console as the code above. The only difference I made is instead of returning the value of total as the value for the function, I call on the function to run, updating the global total variable, and log the total to the console.

Closing note; the var keyword could be switched out for let in this instance but not for const. Const does not allow the variable to be changed and should only be used for variables that are universally the same. Again, using var instead of const helps other developers understand that I intend for that variable to be globally accessed.

I hope this quick read cleared up some confusion for you!