Variables II (Constants and Scopes) - Beginner's JS

Subscribe to my newsletter and never miss my upcoming articles

You've learned the importance of variables and how to create them. But there's just one more type of container/variable that we need to know about. This is called the constant.

Constants are a type of variable whose initial value is absolute and cannot be reassigned further in your program. They're containers, just like variables, but the value within a var/let variable can be changed at any point in time, while constants, well...once it's created with a value, you cannot change it without invoking an error.

Let's look at the differences using code:

//Variable
var a = 23;
console.log(a);
//Displays: 23

a = 42;
console.log(a);
//Displays: 42

//Constant
const b = 23;
console.log(b);
//Displays: 23

b = 42;
//Uncaught TypeError: Assignment to constant variable.

Do you see the difference?

Constants are extremely useful whenever you want to assign a value that you wish not to be changed by any other operation in the program. Let's face it, as you continue to write more code, you will be confused with all of the variables you created. It's easy to be confused with them, so constants help you to avoid making huge mistakes you might regret.

Scopes

You may recall in the first article of this series our mention of the keywords 'let' and 'var'. We know they're used to create variables, but what exactly is the difference?

'var' variables can be used at any point of the program. Consider it a 'global' variable. However, 'let' variables are restricted to its 'scope'.

Now...wait...calm down. If you didn't quite get that paragraph, let me help you by going in depth.

Think of scopes like access levels. Let's say you're a junior 🧑🏽‍💼 in a company and you have access to information that is available to your level only, while, maybe your boss 👨🏼‍💼 or your boss's boss 👩🏻‍💼 may have access to information you see...and more.

Like the above, scopes are access levels. Whether or not you can access a variable and it's value depends on which scope you assigned the variable in.

Let me help you visualize how scopes work by using code. :)

var num = 22;

Notice that the above variable, num, was assigned the value of 22 and is not inside any function? This is known as a Global Variable and the place it was defined in is the Global ScopeğŸŒŽ. Global Scopes are accessible anywhere in the program. If we were to use our first example here, I'd say the Global Scope is information that you, your boss and other people can access.

There's also the 'Local Scope'.

function localScope(){
      num1 = 3;
}

Yes, you guessed it (or not). Functions create a new scope. Variables defined in this scope can only be accessible within this scope. The value of the variable, however, can be accessed when we use the 'return' keyword followed by the variable that holds the value.

Note: Conditionals such as if/else, switch and loops (for, while) do not create new scopes. So variables defined in an if statement, for example, can be accessed outside of the statement since it's considered a 'Global Scope'. (Once you use var, that is. We'll explain more later)

Let's look at another example of how scopes work.


var num1 = 22; //global variable

function showNum(){
      var num2 = num1; //num2 is a local variable
      console.log(num2);
}

showNum();
//Result: 22

The variable num1 is a 'global variable'. Notice that we referenced that variable into the new scope we created in the function showNum. What this does is assign the value of the num1 variable to the num2 variable. The JS engine first searches for the variable (num1) inside of the local scope, then once not found, it searches the 'Global Scope' or the scope immediately outside of its local scope. (starts from the inside, ends on the outside...there, that might help you visualize it)

But, it can't work the other way around.

var num1 = 22;

function showNum(){
      var num2 = 44;
}

num1 = num2;

console.log(num1);
//Result: Uncaught ReferenceError: num2 is not defined

Here you see the variable num2 being referenced outside of the scope it was defined in. The JS engine searches for the variable in the global scope, and since 'global' is the last level, there's no other scopes to check, so you're thrown a 'ReferenceError'.

let vs var

Now that you have an idea of what scopes are, let's explore the difference between let and var.

Well, you've seen how we used var above. But, here's where 'let' differs,

//Example with var

var bool = true;

if (bool){
   var answer = "This is true";
}
else{
   var answer = "This is false";
}

console.log(answer);
//Result: This is true


//Example with let

let bool = true;

if (bool){
   let answer = "This is true";
}
else{
   let answer = "This is false";
}

console.log(answer);
//Result: 'answer' not defined

How does this work?

let is blocked based. It can only be accessed in the block it was declared in. Essentially, it acts like that block is it's 'scope'. While var, on the other hand, is not restricted by block (unless it's a function which creates a new scope, of course).

let is to blocks as var is to scopes :)

You know the difference. You've seen the code. Now go on ahead and code away my little dev.

No Comments Yet