JavaScript Variables and Data Types Made Simple

Suppose you are becomes a head chef of a kitchen. So, you don’t want to make all elements piled on the floor or unorganized. To manages all the ingredients, you take containers or boxes, label that containers and put ingredients into it. Here each boxes has

• A Label so that you can understand what inside the box.

• Actual content that actual item that stores inside the box.

In the kitchen if any box labelled as “Salt” you except salt inside the container. Also if it labelled as “Red chili powder” you except it to have red chili powder not “Turmeric powder”.

Similarly in programming or especially in JavaScript we have variables which performs the same task as the containers in kitchen.

Variables

Variables in JavaScript are used to store data. We use variables because the programs need to:

• Store the data or the input.

• Remember information, also labelled them.

• Update data when we need to change something in the program.

Without the variables the program forgets everything, every data instantly. In technical terms without variables we lost the references of the data.

Declaration of Variable in JavaScript

There are total Four (4) ways to declare a variable in JavaScript. But in modern JavaScript there are only Two (2) recommended ways to declare a variable.

The old and not recommended way

• Using var : We use var to declare a variable in JavaScript.

var name = "JavaScript";

• Automatically : JavaScript automatically declare a variable, we don’t need any specific keyword for it.

name = "JavaScript";

Both of the above methods are valid but it is not recommended to use both of the methods. But why these methods are not recommended? We will see the reason in the scoping part of the article.

Recommended way

• Use let keyword: We use the keyword let to declare a variable in the JavaScript. In this method we don’t face any scoping issue like the previous methods. Also we can change the values of the variable or the actual content of the variable after we declare and initialized the value of the variable.

let name = "JavaScript";

• Using const keyword: We can declare variable using the const keyword. In this method we don’t face any scoping issue and we cannot change the value or the actual content of the variable after we initialized it.

const name = "JavaScript";

Here in the code part of all examples , the let , const and var are the keywords, the “name” is the variable name or the label of the container. The “JavaScript” is the value of the variable labeled as “name” or the actual value or content of the variable named as “name”.

So, we can say that Variables are labels for data or values.

Rule for Variable Name

We can declare variable names in some specified methods only. Those methods are:

• Always use unique names for variables. If you repeat names it gives errors.

• Variable names contains only letters, digits, underscores and dollar sign.

• Variable names only starts with letters, underscore (_) and dollar ($) sign.

• Variable names are case sensitive, means A is different from a.

• Reserve words or JavaScript keywords cannot be used as variable name like let, const, var etc.

Remember it

• Always use let when you want to change the value of the variable in the future.

• Always use const when you don’t want to change the value in the future.

Data Types in JavaScript

There are eight (8) type of data types in JavaScript, they are categories into two (2) types,

• Primitive

• Non - Primitive

There are total 7 data types categorised as Primitive data types those are,

1. String

2. Number

3. BigInt

4. Boolean

5. null

6. undefined

7. Symbol

And only 1 data type considered as Non - Primitive that is Object.

Now let’s deep dive into data types.

Primitive Data Type

Let’s go deep dive into data types one by one.

String

String is a data type used to store name, word or messages. It is text of characters enclosed in quotes. Anything inside quotes is a string.

let myName = "Arkaprava";

Number

It is the number type which represent numeric values. User for specially age, scores etc. It can handles both decimal and whole numbers both.

let age = 24;
let scores = 56.9;

Big Int

It is used to store large integers. We can make any number as big integer by adding n at the end of the number.

let bigIntegers = 456788458n;

Boolean

It is a data type to store two values, true and false. Think of it like a light switch that is either on or off.

let booleanValue = true;
let anotherValue = false;

Null

This means nothing. When we want to leave some variable intentionally empty we use it. It's like having an empty box, but you explicitly wrote "EMPTY" on it so everyone knows it was left blank on purpose.

let value = null;

Undefined

It means a variable is declared but not given a value. This means you made a box (declared a variable) but haven't put anything inside it yet.

let boxContain;

Symbol

It is a unique primitive identifier. It is used when we want a unique value every time.

let container = Symbol("Container");

Non - Primitive Data Type

There are only one type that is Object. Let’s discuss it.

Object

It is a collection of key-value pairs of data.

const fullName = {
	firstName: "Arkaprava",
	lastName: "Chakraborty",
};

What Is Scope?

Think of scope like access to a room or a locker.

Think it like, you get a special box from a special one. But, if you leave the box in the middle of the living room, everyone in the house can open and sees it. But you want to store it so what should you do? You probably store the box into your personal locker inside your room, where only you have the keys to access the box.

This is the same concepts as the scope.

Similarly in JavaScript:

• Some variables are accessible everywhere in the program.

• Some variables are only accessible inside a block { } .

In JavaScript where we declare variables determines who gets to "see" and “use” them.

{
    let place = "Kolkata";
    console.log(place); // it works here
}
console.log(place); // it does not works here because it outside of {}

That area where a variable can be used is called its scope.

Let understand some other examples.

let myName = "Arka";
function sayName() {
    console.log(myName);
}
sayName();

Here the myName is in global scope. So we can access the myName inside the function sayName(). So, it will print the myName. No, error is occurred.

Arka

let firstName = "Arkaprava";
function sayName() {
    let lastName = "Chakraborty";
    console.log("First Name from sayName: ", firstName);
    console.log("Last Name from sayName: ", lastName);
}
sayName();
console.log("It is global declears: ", firstName);
console.log("It declears inside the function: ", lastName);

For this code, the after the function execution when we try to print the firstName and lastName. the firstName easily print because it is in the global scope, but the lastName declared inside the function sayName. So, after the function ends we cannot access the lastName and it gives an error.

The error is as following.

First Name from sayName:  Arkaprava
Last Name from sayName:  Chakraborty
It is global declears:  Arkaprava
D:\\Codes\\js-variables.js:16
console.log("It declears inside the function: ", lastName);
                                                 ^

ReferenceError: lastName is not defined

Now lets learn why to use let and const instead of var.

Why to use let and const

Always use let and const because it respect scoping, it follows scoping, but the var does not. let understand it.

{
    var place = "Kolkata";
    console.log(place); // it works here
}
console.log(place); // it does works here

Kolkata
Kolkata

It works because var ignores block scope.

Another example can be,

if (true) {
    var age = 24;
}

console.log(age); // it works (because var ignores block scope)

24

The same problem happens when we just declare variable name without any keyword.

firstName = "Arkaprava";
function sayName() {
    lastName = "Chakraborty";
    console.log("First Name from sayName: ", firstName);
    console.log("Last Name from sayName: ", lastName);
}
sayName();
console.log("It is global declears: ", firstName);
console.log("It declears inside the function: ", lastName);

First Name from sayName:  Arkaprava
Last Name from sayName:  Chakraborty
It is global declears:  Arkaprava
It declears inside the function:  Chakraborty

Now think of like you declare something inside a function, and you want that no one could see or use it outside the function. Also this is the basic programming principle that out of the scope we should not access it. So, for this reason we use let and const instead of var and only variable name.

That's it now you understand variable and data types in JavaScript. I’d love to hear your thoughts and feedback on the comment section.

Thank You for your patients. ❤️