Variables and Data Types in JavaScript

Introduction

Computers mostly do two things, one they perform some computation like adding two numbers, running video games, running AI models and two they store some data like storing messages, picture, videos etc.

In this article you will explore how computers or to be exact JavaScript stores data, what are they called, how they are stored, how do you as a developer can store data in JavaScript and what type of data can you store.

What is variable?

According to Wikipedia, a variable is an abstract storage or indirection location paired with an associated symbolic name, which contains some known or unknown quantity of data or object referred to as a value. Simply meaning, think of them like a box of arbitrary size which holds data for a computer. Whenever the computer or you as a developer need that data, the box opens and gives back the stored data inside it. This box can be termed as the variable.

As the name suggest variable, you can also change the (variable) data inside the box, and then store the new store the new data. You as a developer when creating an application or software will store some data, like a classic to-do app, you will need to store all the to-dos somewhere. You create variables (boxes) to store and modify the to-dos.

Variable Declaration

In the previous scenario, you saw that variables are used to store data, you can also modify the data stored within them. In JavaScript, there are three way to declare / create a variable to store data within them :-

1. var

2. let

3. const

In later section, you will see how to declare variables using these keywords. There is an important concept of types in JavaScript, when declaring variables you don't have to specify the type of data you will be storing in the variable. Some languages like java, c++, c forces you to also specify the type of data you will be storing the variable. These languages are called strongly typed languages, unlike JavaScript which is weakly typed language.

Variable declaration with var keyword

This was the standard way of declaring variables before 2015 (ES6), they are not block scoped. You will see more about scopes in later section. Variable can be declared using var keyword in the following way :-

var name = "JavaScript Man";
name = "JavaScript Woman";

In the above example, it shows that you are creating a variable called name using the var keyword and assigned a value of JavaScript Man. You can also notice that you can reassign or change the value of name to be JavaScript Woman. Note that there are some special keywords like const that you use to create variable but can't reassign them later.

Variable declaration with let keyword

This is another way of declaring variables in JavaScript, it was introduced in 2015 (ES6), they are block scoped unlike variables declared with var keyword. Variable can be declared using let keyword in the following way :-

let age = 12;

// 10 years later
age = 22;

In the above example, it shows that you are creating a variable called age using the let keyword and assigned a value of 12. Later, you reassigned the variable to store value 22. The behavior of let and var are similar in sense they allow the variable to get reassigned to another value.

Variable declaration with const keyword

This is the standard way to declare variables after 2015 (ES6), they are also block scoped like variables declared with let keyword. Variable can be declared using const keyword in the following way :-

const isBatman = true;

isBatman = false; // TypeError: invalid assignment to const `isBatman'

In the above example, it shows that you are creating a variable called isBatman using the const keyword and assigned a value of true. Later, you tried reassigned the variable to store value false. But, JavaScript threw an error saying you can't reassign the const variable. This is a unique behavior of const keyword, the variables declared with const keyword can't be reassigned.

Data types in JavaScript

Data types means the types of data you can store into a variable, like a number in let keyword example, a string in var keyword example, a boolean in const keyword example. In JavaScript, there are 8 datatypes :-

1. Number - For example :- 10, 10.001, 10000

2. String - For example :- "Hello world !", "a"

3. Boolean - For example :- true, false

4. Null - For example :- null

5. Undefined - For example :- undefined

6. BigInt - For example :- 10n

7. Symbol - For example :- new Symbol("Joker")

8. Object - For example :- {name: "Batman", job: "Fighting crime" }

However, in this article we will only move around 5 datatypes :- Number, string, Boolean, Null Undefined

Numbers

In JavaScript, you don't have to two different type for integer values and fraction values. All of the numbers have the type of Number. Here is an example, where you are declaring a variable and storing numbers:-

// Declaring a variable and storing number

let age = 21;
age = 21;

let priceOfPizza = 5.99;

String

In JavaScript, you don't have to two different type for string values and character values. All of the string and characters have the type of String. Here is an example, where you are declaring a variable and storing strings:-

// Declaring a variable and storing string

let name = "Batman";
let initials = "B";

Boolean

In JavaScript, you can store value like true can false into Boolean type . Here is an example, where you are declaring a variable and storing boolean:-

// Declaring a variable and storing boolean

let isBatmanDefeatable = false;
let isBatmanStrong = true;

Undefined

In JavaScript, all the unassigned variable have the undefined value in them. Normally, you don't assigned a value of undefined to a variable explicitly. Here is an example, where you are declaring a variable and storing undefined:-

// Declaring a variable

let someVariable; // stores value of undefined
let someAnotherVariable = undefined; // You can explicitly assigned undefined to a variable, but it is not recommended

Null

In JavaScript, to store a value of nothing, you can use null to express it. Here is an example, where you are declaring a variable and storing null:-

// Declaring a variable

let storeNothing = null; // stores value of nothing

What is Scope?

Scope of a variable, simply means the fields or environment in which a variable can be accessed. Let's take a real life example, suppose you live in gated society apartment, in this context, the gated society amenities are only accessible to the residents of the society, in other words the scope of the society amenities is within the residents of the society.

Difference between var and let, const

In the earlier section, it was mentioned that var is not block scoped where as let and const are block scoped. Meaning if a variable declared using var keyword within a block it will still be accessible outside of the block. Here is an example :-

if(true) {
    var userPassword = "12345678"
    let userName = "johndoe" 
}

console.log(userPassword) // 12345678
console.log(userName) // Uncaught ReferenceError: userName is not defined

In the above example you can see that, the variable defined with let keyword is not accessible outside the block, where as the variable defined with var is accessible outside the block. There is a important thing about variables declared with var keywords are that are function scope not block scoped.