Photo by Caspar Camille Rubin on Unsplash

Variable means anything that can vary. JavaScript includes variables which hold the data value and it can be changed anytime tho some are immutable. A JavaScript variable is simply the name of a storage location. See it as a container that houses items. There are two types of variables in JavaScript: local variable and global variable.

Local Variable:

In JavaScript, local variables are variables that are defined within functions. They have local scope, meaning they can only be used within the functions that define them. A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

Global Variable:

In contrast, global variables are defined outside of functions. These variables have global scope, so they can be used by any function without passing them to the function as parameters. A global variable has a global scope which means it can be defined anywhere in your JavaScript code.

Some common JavaScript Variable Terms

Variable Declaration: Here the variable is registered in its corresponding scope, the scope of a variable is “where the variable can be used.”.

Variable Initialization: This usually occurs when a variable is declared. Here the variable is assigned a memory or space by the JavaScript engine. Because of this, once a variable is declared, it takes a value of undefined even before the assignment.

Variable Assignment: Variable assignment is usually the most important step when using a variable. Here the variable is assigned data which is a value using the assignment operator =Values in JavaScript take one of the standard JavaScript datatypes.

Using JavaScript Variables

declaration-keyword <variable-name\>;

declaration-keyword <variable-name\> = <value\>;

There are some rules while declaring a JavaScript variable

• Names should begin with a lowercase string.

• Names cannot contain symbols or begin with symbols.

• Names cannot begin with a number.

• Names can contain a mix of uppercase strings, lowercase strings, and numbers.

Declaration keywords: There are some unique keywords in JavaScript for declaring or initializing a variable. These words let the JavaScript engine know that this line of code is a variable, I want this to be a container to hold data.

var //universal scoped let //Block Scoped const //immutable

Var: variables in JavaScript are declared using the var keyword. It is the old way of declaring variables before the ES6 version of JavaScript.

var name;  
var myName; //This is the best way to name variables with several words  
var my_Name  
var name8

// INVALID  
var 3name;  
var -name

Let: From ES6, you can use the let keyword to declare one or more variables. The let keyword is similar to the var keyword. However, a variable declared using the let keyword is block-scoped, not function or global-scoped like the var keyword let shares a lot of similarities with var. let is constrained to whichever scope it is declared in. Its declaration and assignment are similar to var. let was introduced to mitigate issues posed by the variable scope that developers face during development. let is the descendant of var in modern JavaScript. Its scope is not only limited to the enclosing function, but also to its enclosing block statement. A block statement is everything inside { and }, (e.g. an if condition or loop). The benefit of let is it reduces the possibility of errors, as variables are only available within a smaller scope. Using Let:

let age;  
let name = "myName";

Multiple Declaration with let

let name, age, hobbies;
let class = "grade6", school = "Cal High"; teacher = "Mr John"

variables cannot be re-declared using let, unlike var you can declare a variable with the keyword var and re-declare that same variable with another value.

var name = "John";var name = "Mike";console.log(name) // Expected result is "Mike"

let name = "John";
let name = "Mike";
console.log(name) // SyntaxError: identifier "name" has already been declared.

The syntax error comes up because let cannot be used to resign values to variables with the same name. Okay, we said variables are containers that hold data right? what if we want to change the content of these containers, we don’t need this data it's holding anymore.

let name = "john";
name = "mark";console.log(name); // Expected result is "mark";

Okay what just happened?? let me explain, we declared a variable and gave it a VariableName “name”, so what we are asking JavaScript to do is: Hey create a container and give it a name so i won't forget and can easily identify or mark reference to it later, so we called it “name” and inserted a value “john” to it;
We then changed our mind, and we thought no, the name is actually “Mark”
all we need to do is to just pick the container name from where we have kept it and remove what was inside i.e “john” and put “mark” into the box. This is possible and different from the first snippet we have above that returned an error. The code was doing something different, it was creating another container with a name that already exists.

function displayAge () {
 let age = 20
}
console.log(age); // ReferenceError: age is not defined

I mentioned earlier that variables declared with let keyword are block-scoped, this explains why the above code won’t run. The variable age was declared inside a block {} and is only available inside the enclosing block.

const: The const (constant) keyword works like the let keyword, it was also introduced in the ES6 version of JavaScript but the variable that you declare must be initialized immediately with a value, and that value can’t be changed afterwards. const is assigned to data whose value cannot and will not be changed throughout the script. Now, this is more strict. It also blocks scope like the let keyword and the fact that it is constant as its name implies is the difference between them.

syntax

const name = "Daniel";
const x = 39;

Note: When using const you must initialize a value to it

const name;
// SyntaxError: missing initializer

since it's immutable, it has to be assigned a value.

const name = "Mike";
name = "John"; // Uncaught TypeError: Assignment to constant variable.

The above code will also throw an error because you are not allowed to change the value of a variable declared with const

Knowing Which to Choose

When declaring variables, it is good practice to avoid using **var**. Always lean towards let or const based on the following rules. If you really need to use var then be sure to move declarations to the top of the scope, as this avoids unwanted behaviour related to hoisting.

• when you are sure that variable won't change use const

• when you will be changing the value of the variable use let

Using both let and const will keep our variables in the right scope and make our code easier to manage. upstanding these two rules will help you a lot in preventing errors that take time to fix.

Conclusion

Now, I hope have an idea of how JavaScript variables work, how variables are declared in JavaScript and the differences between the variable types — var, let and const. These variable types are unique in their own way and serve to make code development efficient. I just felt like sharing the little I know about Variables in JavaScript. Please kindly drop a review. Thanks