JavaScript: Deep Dive Into Variables

In this article, I will explain from basics of variables to an advanced level.

Whether in the home, office, shops and in our computer, storage is important to organize items systematically. If we need an item, we can easily search for the item without any panic, and it requires less time.

All computers need to store the user data, such as photos, videos, files, etc. On the Hard Disk. In RAM (Random Access Memory) where the program is stored and is used to complete the task using the CPU.

In programming languages, we also need to store some data and this data is stored in a variable. Variables are the reference where the values are stored.

The variables are like boxes where the memory locations are stored. Memory locations hold the values that are required during the execution of the program.

Types of Programming Languages:

1. Statically Typed Language

In this type, the variables are stored of a certain type, other values cannot be stored.

The programming languages such as C, C++, Java, etc. are statically typed programming languages.

Example in Java :

string dogName = “Rocky”;

int num = 15;

In this example, the name of a dog is declared in a string variable dogName. We cannot add the number to a string variable.

Note — String is a data type where the text(“Rocky”) is stored in the double(“ ”) quotes. The other data type is int(integer) where the number(25) is stored.

2. Dynamically Typed Language

In these types of languages, they can hold different types of information without naming with the data type.

JavaScript, Python, PHP, Ruby, etc. are dynamically typed programming languages.

Example in JavaScript :

var name = “Alice”;

var num = 25;

In the above examples, we don’t specify the data type before naming variables as we did in statically typed languages.

Variables In JavaScript :

Before we dive into the variables first we need to understand some definitions.

1. Declaration: It means informing the compiler to give the memory for variable type, variable name, and the value associated with that variable.
2. Initialization: It means assigning an initial value(text or number) in the variable before it is used in the code.

In most programming languages there is one type to declare a variable. In JavaScript, there are majorly three types to declare variables.

1. var: Variable

Var can be declared either as Global-Scoped or Local-Scoped or Function-Scoped variable. It allows storing values as well as functions and objects.

The var keyword is used to declare variables before ES6(2015 version) or in older versions of JavaScript. Var is no longer used in the newer versions of JavaScript.

Syntax :

var Variable-Name = “some-value”;

For Example :

The variable name is declared and assigned a string value, this variable can be accessed anywhere in the program.

In function displayAge(), the variable age is declared and assigned a number value. The age variable accessed only in the function and not outside the function.

2. let: To Allow

Let can be Block-Scoped or Local-Scoped.

It can only be accessed in that block where it is declared. It means the variable only visible in between the curly braces({}).

Let allows us to assign and reassign the values in the variables.

The let keyword was first introduced in ES6(2015 version).

Syntax :

let Variable-Name = “Some-Value”;

For Example:

In the first example, we stored a string value to the name variable. And we can change or reassign the value of a variable in a second example with a different type or the same type.

3. const: Constant

Const variable can be accessed Globally, and this variable can not be changed once declared.

This keyword also introduced in the ES6(2015 version).

Syntax:

const Variable-Name = “Some-Value”;

For Example :

In this example, first, we assigned a number(10) value in the age variable. If we try to change the value inside the variable the program throws an error “TypeError: Assignment to the constant variable”.

Note: Constant is like pi value in mathematics which has the default value i.e. pi = 3.14.

Rules For Naming Variables :

1. You cannot use a reserved keyword for naming the variables.

The keywords such as if, var, else, let, const, enum, native, etc. are the system reserved keywords, and they are not used for variable names.

For Example :

The interpreter throws an error, SyntaxError: Unexpected token ‘for’.

Note: Reserved keywords are also not used for the function names.

2. Don’t use the spaces, instead use camel Case.

It is the best practice to use camelCase for the names. Users can easily read the name to understand why the variable is used for.

For Example :

It shows an error as SyntaxError: Unexpected identifier.

3. Don’t start with numbers, special characters before the variable names.

If you start with the numbers before the names, JavaScript thinks of it as a number, and the rest of the words ignored.

For Example:

You can use the number after the variable name.

4. JavaScript is case-sensitive.

The first variable name num is not similar to the second Num.

For Example:

If both values are the same, but the names are different, JavaScript thinks of them as different names.

Hoisting And Temporal Dead Zone In JavaScript

1. Hoisting :

Hoisting is the JavaScript engine behavior in which declarations of variables, functions move to the top of the code scope.

Hoisting is only for declarations not for the assignment because the JavaScript engine first allocates the memory for variables and then assigns a value.

Example: Hoisting with var

In the first line of the code, we first log the variable age into the console, and then in the second line, we are declared age, and assigned a value of 15.

The compiler shows the value is undefined Because the JavaScript engine seeing like this “var age;” at the first line. The behavior of the engine is first declaring the variable with var, second allocating some memory, and in the last, it moves to the assignment operation. In this case, we assigned a value in the last line, so the compiler is not going to see.

Note: Undefined is a primitive value that the variable is not assigned a value or the variable is just reserved i.e. not declared.

Example: Hoisting with let and const

Hoisting in let and const is different from var. It throws an error rather than showing an undefined value.

• let:

The code shows the following error “ReferenceError: Cannot access ‘age’ before initialization”.

• const:

Declaring with const, the code prompts the same error “ReferenceError: Cannot access ‘age’ before initialization”.

So, we can say that the const behaves similarly to let.

2. Temporal Dead Zone :

The temporal zone is the zone in which the time between the variable (let or cost) entering the block scope and being declared where they are unable to access.

For Example :

The code throws “ReferenceError” because the variable is accessed before initialization.

The benefit of the Temporal Zone is software bugs can be found easily.

Conclusion :

After reading this article you will get an idea what is the variables. Don’t get confused between Hoisting and Temporal Dead Zone. If you don't understand you can read this article one more time.

Apply what you learned from this article. For more detail, you can go to the official documentation of JavaScript or go to MDN web docs.

— I hope you enjoyed this detailed article, feel free to comment if anything is incorrect, and ask the questions.

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer