Understanding Variables and Data Types in JavaScript

We are now driving into the world of JavaScript and following are the topics mentioned below which are being covered in this particular blog.

• What variables are and why they are needed?

• How to declare variables using var, let, and const ?

• Primitive data types (string, number, boolean, null, undefined)

• Basic difference between var, let, and const

• What is scope (very beginner-friendly explanation)?

---

What variables are and why they are needed?

Variables are like a box or you can say an area to store values which can be replaced or override with new values depending on use case or future dependancy. For example: Take the example of your home ( Reference Indian Mom managing the box to store various daily use products ) , Someone bring a product in your home ie Bourn-vita, when you or your younger siblings consume all the Bourn-vita after some days then your mom use that box of Bourn-vita to store spices , sugar, salts etc🥲.

So, what is a Variable here? Yes, you guessed right Bourn-vita Box is the variable here, but what do we mean by overwrite or replaced value? Yes , you again guessed the right the product or material which is inside the Bourn-vita Box over the time passed.

Now, you can think of why variables are needed? It's because sometimes you need to modify or change something depending on the requirements at that moment.So, we need to have something which can modify themselves depending on situations to execute or fulfil the needs.

---

Let's see how we declare the variable?

• var ---> This is used for defining a Variable.

• var Bourn_vita = "protein";    // A variable name Bourn_vita having protein as value.
  

• let ---> This is also used for defining a Variable.

• let name = "InsideTech"; 
  let age = 21;
  

• const ---> This is used for defining a Constant (the value which can't be modified in any case scenario after assigning once)

• const hrsInDay = 24;
  

---

What are primitive data-types? and what is data-types?

Data-types are basically the different ways of representing a data such as boolean (true and false) , number(Integers), string (group of characters) etc.

Now what do we mean by primitive data-types? It is basically pre-defined data-types provided by a programming language to represent a simple single values like integers, boolean, strings etc.

Important thing to focus on some data-types like NaN and undefined. Let's understand these two in more detail.

• NaN : It is something which is not a Number. This will be your output in various different cases like converting a string into number which is not a valid or meaningful.

• let myName = "InsideTech";
  console.log(Number(myName)); // Output: NaN
  

• undefined : It is completely understandable if you know the meaning of undefined which means "not defined".

• null : This is little bit confusing to them who have't ever heard of this earlier. Because it means empty in Javascript. Keep in mind that empty doesn't mean '0'. Because 0 is itself a value. Empty isn't mean value is just mean empty!!!!!! nothing there !!!!

---

Basic difference between 'var' , 'let' and 'const'

• var (Hoisting)

• ## CASE 1
  
  var age = 21;
  console.log(age);  // Output : 21
  
  age = 42;
  console.log(age);  // Output : 42
  
  
  ## CASE 2 (Hoisting)
  
  console.log(nickname); // Output: undefined
  var nickname = "Flash";
  console.log(nickname); // Output: "Flash"
  

• let (Hoisting + Explanation )

• ## CASE 1
  
  let name = "Javascript";
  console.log(name);  // Output: Javascript
  
  name = "Blog";
  console.log(name);  // Output: Blog
  
  
  ## CASE 2 (Hoisting + Explanation)
  
  // --- Start of Temporal Dead Zone (TDZ) for 'price' ---
  console.log(price); // ❌ ReferenceError: Cannot access 'price' before initialization
  
  let price = 100;    // --- End of TDZ ---
  console.log(price); // ✅ Output: 100
  

• const

• ## CASE 1
  
  const monthInYear = 12;
  console.log(monthInYear);  // Output : 12
  
  
  ## CASE 2
  
  // --- Start of TDZ for 'API_KEY' ---
  console.log(API_KEY); // ❌ ReferenceError: Cannot access 'API_KEY' before initialization
  
  const API_KEY = "SECRET_123"; // --- End of TDZ ---
  console.log(API_KEY);         // ✅ Output: "SECRET_123"
  

---

Understand the TDZ with the help of Diagram

TDZ stands for Temporal Dead Zone, which is basically an area of no interest or no access of any variables before initialisation of it. It is most commonly occurs in let and const .

---

What is scope (very beginner-friendly explanation)?

Scope is more understandable if you think about your house building and your society's other buildings. Let's suppose you talked about something in your house, Will the people of other building be able to hear it? answer is NO! this is the simplest meaning of SCOPE.

Scope is a defined area within which a variable can be declared and used without disturbing any outer or global variables. Often enclosed in " { } " called as braces.

let request = 24;                  // Global variable
function myFunction(){
    let response = "Hello From InsideTech";    // Local variable

    console.log(response);     // Output : Hello From InsideTech
    console.log(request);      // Output : 24
}

console.log(response)     // Error: Initialise the "response" variable

In the above code you can see that there are two types of variables mentioned Global and Local

• Local : It can't be used or accessed from the outside of defined scope area. As you can see console.log(response) is throwing the error.

• Global : It can be used or accessed inside the local scope and also outside because it's globally declared. As you can see we are able to access the request variable inside the scope of response variable and console.log(request) is outputting the value as 24.

---

Conclusion

We now know about the variable and constant and how the hosting affects in different variables. Also got to know about the data-types (NaN , undefined and NULL) then we understand the meaning of scope (Global and Local).