Short & Sweet- Javascript Variables 🤩

Photo by Brooke Lark on Unsplash

What are Variables?

Variables are descriptively named containers in which we store information so we can use it again in our code! A variable can hold any type of data -number, string, boolean, object or undefined. Below are some examples:

How should we name our Variables?

There are some rules and conventions to naming variables.

1. The first letter can’t start with a number ❌
2. The convention is to start variable names with a lowercase letter ✅
3. Don’t use spaces. If a variable consists of multiple words use camelCase 🐫
4. The convention is to use camelCase, not snake_case 🐍
5. Don’t use JavaScript reserved words ❌

Variable Declaration

When we’re creating new variables they go through a lifecycle:

1. Declaration: A variable is registered using its given name within the corresponding scope
2. Initialization: When you declare a variable its automatically initialized which means the JavaScript engine allocates memory for the variable
3. Assignment: A value is assigned to the variable

In JavaScript, a variable can be declared using any one of the following

1. var
2. let
3. const

let and const were introduced in ES6 and var has been around since the beginning. There are issues with using var so it’s best to use let and const. You can still use var but it is discouraged.

Var

Var is hoisted. Hoisting is a JavaScript mechanism where variable declarations are moved to the top of their scope before code execution. Even though hoisting moves the declaration, the assignments stay in place. So, the variable can be accessed before it has its value.

var is globally or functionally scoped, which means a variable declared with var is known to the entire function or globally! That is a lot of freedom that could lead to errors.

var can be re-assigned and re-declared.

So, since var has such a wide scope and can be re-declared it can be error prone. We could be expecting numberOfCupcakes to = 12, but if it was ever re-declared somewhere in our code we may be seeing numberOfCupcakes = 120 😱. That would be quite the surprise if we were expecting 12 cupcakes.

Let

Let has more rules than var! let isn’t hoisted. So unlike var, ES6 doesn’t want us to use undeclared variables, the interpreter gives us a Reference error. This ensures that we always declare our variables first.

let is block scoped. A block is code thats in between curly braces {}. So a let variable thats declared within a block is only available for use in that block. This reduces the possibility of errors, because, variables are only available within a smaller scope. In the example below, we don’t have access to cupcakeStatus because it’s only available within the block.

With let we can re-assign our variable but we can’t re-declare it within its scope. Using let instead of var will help avoid errors, like declaring the same variable at different places in within your code.

Const

Const is a lot like let (they both aren’t hoisted and they’re both block scoped) but with more rules!

• const must be initialized with a value
• const cant be re-assigned or re-declared within its scope

But when should we use each one 🤔?

• Don’t use var
• Use const and if you later realize that the value needs to change, change it to let