Understanding Variables and Data Types in JavaScript

Variables are like a container in the kitchen. When you first take a jar, it’s empty, and later you can store different things in it, such as snacks, spices, lentils, pickles, rice, flour, and so on. The labels on the container help you easily find what’s inside.

Variables work the same way: they store data — numbers, strings, objects, arrays, and just like a jar can hold sugar today and cookies tomorrow, a variable can also store different types of values.

What is Scope

Scope is the area of the program where a variable can be accessed.

Let’s understand this with an analogy :

Suppose you’re in the living room, which has some furniture like a sofa, table, and chairs, along with some other decorative items. All these items are accessible when you’re inside that room, but if you leave the room, you can’t access those items anymore; this is what we call scope in programming.

Types of Scope

1. Global Scope: A scope that is accessible from anywhere in that program.
2. Function Scope: A scope that is created by a function, and we can access that code within the function
3. Block Scope: A scope created by a pair of curly braces “{ }”. Variables declared with let and const inside a block can only be accessed within that block

Declaring variables in JS

Declaring means taking some memory, giving it a name for reference, and then storing some data in it. JavaScript gives us three different ways to declare a variable: var, let, and const.

var

A variable declared using var has a global-scoped variable that means we can access/modify this variable anywhere in that file.

var name = "Yuki"
{
//name is declared in outer-scope, and inner block can read outer variable

console.log(name)                        //output: Yuki
name = "Kaori"
var age = 5
}
console.log("name: ",name,", age: ",age)   //output: name: Kaori, age: 5

let

Variable declared using let is block-scoped, which means we can only access it within that scope or in its nested scope, but we can not access it outside its scope.

let name = "Yuki"
{
//name is declared in outer-scope, and inner block can read outer variable
console.log(name)                        //output: Yuki                
let age = 5
}
//variable age is not accessible here 
console.log("name: ",name,", age: ",age)   
//ReferenceError: age is not defined

const

const is also block-scoped, but if we declare a variable using const and assign some value to it. We can still access that variable, but we can’t change its value.

const name = "Yuki"
{
// variables from outer scope are accessible
console.log(name)                      //output: Yuki
name = "Kaori"                        
//TypeError: Assignment to constant variable 
}

Datatypes in JS

DataTypes represent the type of data we are storing in a variable; it could be string, number, boolean, null, undefined, Symbol, BigInt, or objects.

JavaScript has two types of datatypes: Primitive and Non-Primitive.

Primitive Datatypes

let name = "Yuki"       //value is string
let age = 5             //value is number
let isSheOld = false    //value is boolean
let myIncome = 200n     //value is BigInt (n represent BigInt)
let loveLife = undefined   //value is undefined
let lover = null          // value is null

null and undefined might feel almost similar to beginners, but remember, null is an intentional value, whereas undefined is a missing value.

Non-Primitive Datatypes

In JS, we have only one non-primitive datatype, which isobject, you might think, what about arrays and functions? Actually, both of them are objects in JavaScript.

let obj = {
name : "Yuki",
age : 5
}

console.log(typeof obj)                    //output: object

How to check the type of any variable

We can easily find out the type of value a variable is storing by using typeof

console.log(typeof isSheOld)                 //output: boolean
console.log(typeof age)                      //output: number
console.log(typeof name)                     //output: string

Important: When you do typeof null It will return objectYes, it is unexpected, but it is what it is.