Understand Var, Let, and Const

When you take the leap to learn more about Javascript, there is foundational knowledge every developer MUST know and understand. That first lesson is usually about declaring variables. So, what are variables?

Variables are containers for storing reusable values such as numbers, strings, arrays. etc. For example, let's say your username is "developerbaehacktivist123". Instead of the developer typing "developerbaehacktivist123", they can just reference the variable name: userName. Variables are a way to recall information in a simple and concise way.

Every variable gets a name and you'll be able to call that variable's name to use it later in your JavaScript code. These names are called identifiers.

‍All identifiers must be unique and they must adhere to the following rules:

• Names must begin with a letter, $, or _.
• Names are case sensitive (c and C are different variables).
• Names may contain letters, numbers, dollar signs, underscores, and unicode character sets.
• Reserved JavaScript keywords cannot be used as names (var, function, class, boolean, etc. - View More)
• Best Practice: Names should be descriptive (age, total, fullName, gender, carType).

‍

There are three types of JavaScript variables:

Var

When JavaScript was released December 4, 1995, the keyword var was JavaScripts' only way of declaring variables.

How are var variables scoped?  Var declarations are globally scoped or function/locally scoped. It is globally scoped when var is declared outside a function; however, if var is declared within a function it is function scoped.

To understand this further, look at the example below.

Here, beyonce is globally scoped and it is currently sitting outside the function. JayZ is function scoped and the variable sits inside the function. So, if we do something like this:

We will get an error because JayZ is not available outside the function and also JayZ has no business being out of breath off stage. Keep up Jay Z, geesh! JayZ would be available only when the onStage() function is called.

As you can see within the above variable, Var can be re-declared and updated.

That means we can do something like this:

or:

For JavaScript, this throws no error. However, for the programmer this can be problematic. We expect beyonce to equal Hi, I'm Beyonce Knowles. but later in our JavaScript code, we redefined it and JavaScript said nothing! This can cause unintended side-effects and we should be very careful when using var to declare variables.

Recently, I've read to stop using var all together! It is no longer a fool-proof way of declaring variables.

This is why the let and const variable is an important addition to our JavaScript arsenal!

Let

In 2015, ECMAScript 6 introduced the let and const variable. Let is a JavaScript variable that is very similar to var; however, it gives you the luxury of declaring variables in a limited scope. Like var, a variable declared with let can be updated within the same scope; however, unlike var, let cannot be redeclared within the same scope.

Can Be Updated

Within this scope, ciara was already defined but updated.

Can't Be Re-declared‍

With this particular scope, ciara was defined! We can’t redefine ciara within that same scope…. she is a changed woman!

However, you can declare the same variable in different scopes and there will be no error.

The let variable is blocked scoped. A block is code bounded by curly braces {}. If the let variable is declared within those curly braces, it is only available within that block (unlike var).  Let me explain using Ciara’s hit song Level Up.

Inside the code block, we are able to console.log(lyrics) , but outside of the code block, we are told lyrics isn’t defined. This illustrates the point that let allows you to declare variables in a limited scope (block scope) instead of globally or function scoped like var.

This allows let to be updated but never re-declared.

In 2013-2015, Ciara was ALL about Future but in currentYear 2019, her husband is Russell Wilson. Ciara is only in love with future within the scope of 2013-2015.

Const

Const is a blocked scope variable which maintains constant values. Const cannot be updated or re-declared; however, every const declaration must be initialized at the time of declaration.

Can't Be Updated

‍Can't Be Re-declared

‍Must Be Initialized

While const can’t be updated or re-declared, the properties of this object can be updated or mutated. For example:

Properties Can Be Updated‍

In this example, Megan Thee Stallion’s Profile shares some industry knowledge about her life. As a person, Megan Thee Stallion always expresses her relationship status as single; however, she has situations. In her NPR debut, her newly released song discussed the following: “Everyone wants to know who Megan’s dating, but that depends on whatever the day is.” She has situations in different time zones, area codes, and weekdays so it really depends. What remains constant is Megan will have situations and interested men have to be okay with that. So back to JavaScript, as a const variable, Megan will remain the fluid individual she is. That stance on her profile will never change. However, her properties can definitely change (MoneyBagYo, Trey Songz, European Papi out in Italy, Man in Texas, West Coast Thang, and etc.)

In Summary

1. Var declarations are globally scoped or function scoped while let and const are block scoped.
2. Var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
3. Var variables are initialized with undefined, let variables are not initialized.
4. While var and let can be declared without being initialized, const must be initialized during declaration.