Understanding Variables and Data Types in JavaScript

Topics to Cover

1. What variables are and why they are needed

2. How to declare variables using var, let, and const

3. Primitive data types (string, number, boolean, null, undefined)

4. Basic difference between var, let, and const

5. What is scope (very beginner-friendly explanation)

What variables are and why they are needed

Variables are like boxes that store data inside them. They are the basic elements of any code, they are used all the time, for the simple reason that they store data.

Now, why are they needed? Well, any program revolves around data, data manipulation, data storage, transformation, etc. So, variables are the building blocks of any program.

Now, how do we use these variables, or how do we start.
The 1st step is declaration. It means, to pick up a name for the variable.
2nd step is initialisation. It means assigning it to a value. For example :

a = 5;

= is the assignment operator. It is used to assign values.

Now there are certain keywords used to declare variables, and the same can be used to initialise them too. These are let, var, const.

Now why 3 ways. Well, each one of them have different purposes

var was used in old JavaScript programs, value once initialised can be changed later in the program. The reason it's no longer used is because it is leaky in nature. Think of it as a box with holes, so the values can get outside the scope. We will look into scope in just a minute.

let is used in modern syntax, and values once initialised can be changed later in the program.

const : values are fixed and can't be changed after initialisation. a const variable cannot be declared without an initial value in JavaScript, as it can't be changed later.

How to declare variables using var, let, and const

Declaration

var a;
let b;

Initialisation

a = 5;
b = 6;

for const

const a = true;
a = false; // this is invalid

Now did you see, we can initialise variables to any value: number, string, booleans, etc

Also, there are certain rules about variable declaration:

1. Variable declaration cannot start with a number

const 1variablename = 2;

This is invalid.

2. Missing quotes in string

const name = kushagra;  //this is invalid
const name = "kushagra"   // this is valid

this is because, JS intreprets kushagra as variable, so quotes are used.

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

Data types are the types of data stored in variable. That is, the type of object you store inside a box.

There are two kinds of data types:

Primitive data types:

String: Text inside "", or '', or ``

let name = "kushagra";

Number: Any numerical value

let num = 2;

boolean: true or false value

let flag = true;

null: empty value

undefined: value not defined yet

let a; // this is undefined, value is not assigned yet
a = null;  // now, this is null, it is used for empty value

Non-Primitive (Reference) Types: "Box within a Box"

Objects: key value pairs inside a block

let obj = {
    name: "kushagra",
    age: 21,
}

Arrays: values stored in a sequence

let arr = [1,2,3];

Functions: Specialised objects, that allows us to reuse the repetitive code, it is callable.

function double(x){
    return x*2;
}

Primitive data types store values directly onto addresses

While non primitive data types store reference of values, i.e., address points to another address which points to value.

Now when value is copied from primitives, and changed, then no change is reflected in the original data type.

let name = "kushagra";
let fullname = name;
fullname = "changed" // will not change the value of name 

In non-primitves: the reference is copied, so change in value is reflected in the original data

let obj1 = { name: "Alice" };
let obj2 = obj1; // Only the reference is copied
obj2.name = "Bob";
console.log(obj1.name); // Output: "Bob" — change is reflected   

What is scope

Scope can be thought of as box's boundary. A variable inside a box cannot be accessed outside the box. This is called scope.

Scope can be Global or local.

Global Scope is the outermost scope, it has access to all variables.

Local Scope is the box defined within a box or global scope.

let example1 = 42;  // this is global scope
{
    let example2 = 20; // this is local scope
}

Now let's talk about var's leaky property.

A variable declared using var, inside a local block, can be accessed outside this block, that is globally. This can cause name and scope conflicts with other variables, that's why it isn't used anymore.