Table of contents
1.
Introduction 
2.
What is Variables in Javascript?
2.1.
1. var keyword
2.2.
2. let keyword
2.3.
3. const keyword
2.4.
4. Variable naming conventions
3.
What is Data types?
3.1.
Primitive Data Types
3.1.1.
1. Number
3.1.2.
2. BigInt
3.1.3.
3. String
3.1.4.
4. Boolean
3.1.5.
5. null
3.1.6.
6. undefined
3.1.7.
7. Objects
3.1.8.
8. Symbol
4.
Frequently Asked Questions
4.1.
Compare var, let, and const?
4.2.
What is variable hoisting in JavaScript?
4.3.
What is the difference between undeclared and undefined variables in JavaScript?
4.4.
How many variables are there in JavaScript?
5.
Conclusion
Last Updated: Jan 8, 2025
Easy

Variables and Data types in Javascript

Author Hari Sapna Nair
3 upvotes
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction 

JavaScript is one of the most widely used programming languages today. It is used in client-side web applications, server-side web applications, mobile applications, desktop applications, game development, etc.  JavaScript developers are currently in high demand, so it's the perfect time to learn JavaScript. One can get started with JavaScript by learning variables, data types, operators, loops, etc.

Variables and Data types in Javascript

In this blog, we will cover the concepts related to variables and data types in Javascript. Understanding variables and data types in Javascript will help you play around with data and write error-free code. If you are new to JavaScript, this is the perfect blog, to begin with.

Read More About, Basics of Javascript

What is Variables in Javascript?

variable is an entity used to store data of type string, integer, boolean, etc. Javascript is a dynamically or loosely typed language, i.e.while declaring a variable, the type of data need not be explicitly mentioned. It is smart enough to figure out the data type and adapt according to when changes are made. 
 

At the beginning of Javascript, the variables were declared using the var keyword. Then let, and const are introduced in ES6. Now, most browsers are compatible with the let and const, and most developers use let and const.

1. var keyword

The var keyword declares a variable in a function scope. Function scope means if a variable is declared inside the function, it can be accessed only inside the function. When var is declared globally, global access is possible. Let's see a program to understand this better.

 

Example

var a = 10;

function func() {
   var b = 10;
   // global scope
   console.log("a: "+a);

   // function scope
   console.log("b: "+b);
}

func();

// global scope
console.log("a: "+a);

// function scope
console.log("b: "+b);
You can also try this code with Online Javascript Compiler
Run Code

 

Error

 

As expected, an error occurs, as variable b is function scoped and cannot be accessed outside of the function.
 

Inside the scope, the variables can be re-declared and updated without any error.
 

Example

var a = 10;

console.log("a before re-declaration: "+a)

function func() {
   // re-declared
   var a = 20;

   console.log("a after re-declaration: "+a);
}

func();

// updated
a = 30;

console.log("a after updation: "+a);
You can also try this code with Online Javascript Compiler
Run Code

 

Output

a before re-declaration: 10
a after re-declaration: 20
a after updation: 30

 

Updation and re-declaration can cause a severe issue when we unknowingly declare another variable using the same name inside the same scope. This will cause bugs in the code as the new variable will replace the old one. This problem is solved by introducing let, which we will explore in the latter section.

 

Another issue with var is that these variables are not block-scoped. So in condition statements, variables are not scoped to that statement but the entire function or the global scope.

 

Example

for(var i = 0 ; i < 5 ; i++) {
   console.log(i);
}

// i is printed when outside the block
console.log(i); 
You can also try this code with Online Javascript Compiler
Run Code

 

Output

0
1
2
3
4
5

 

2. let keyword

The let keyword is the improved version of var. Variables declaration using let eliminates the issues that we discussed above. let creates block-scoped variables, i.e., the variable is only accessible inside the block in which they are declared. When let is declared globally, global access is possible
 

Example

let a = 20;

function func() {
   let a = 30;
   console.log("a: "+ a);
}

func()
console.log("a: "+ a);
You can also try this code with Online Javascript Compiler
Run Code

 

Output

a: 30
a: 20
 

Error is not generated because both a's are treated as different variables since they have different scopes. 
 

Inside the scope, the variables can be updated but not re-declared.

 

Example

let a = 20;

console.log("a: "+a);

// updated
a = 30;
console.log("a after updation: "+a);

// re-declared
let a = 40;
console.log("a after re-declaration: "+a);
You can also try this code with Online Javascript Compiler
Run Code

 

Error

 

In this case, an error occurs when we try to re-declare the variable.
 

Now let's see the behavior of let in block scope.

 

for (let i = 0; i < 5; i++) {
 console.log(i);
}

console.log(i);

 

Error

 

An error occurs here as "i" cannot be accessed outside the block.

3. const keyword

The const keyword is used to declare the variable as constants. Like, let, const is also block scopedWhen const is declared globally, global access is possible
 

const variables cannot be re-declared or updated. In const declaration, the variable must be initialized at the time of declaration, else error occurs. 

 

Let's go through the examples.

Example

const a = 3;
// error caused as a cannot be re-assigned
const a = 5;
console.log("a: "+ a);

 

Error
 

Example

const a = 3;

// error caused as a cannot be update
a = 6;
console.log("a: "+ a);

 

Error

Example

function func() {
 const b = 4;
}

// error caused as b cannot be accessed due to block scope
console.log("b: " + b);

 

Error
 

An error occurs in these cases due to the reasons mentioned above for each case.
 

If const is used to create an object, the object properties can still be changed inside that object. However, it is not possible to update the object as a whole.

Example

const student = {
   name: "Raj Malhotra",
   age: 18,
}

console.log(student.name + "'s age before updation " + student.age);
student.age = 19;
console.log(student.name + "'s age after updation " + student.age);

 

Output

Raj Malhotra's age before updation 18

Raj Malhotra's age after updation 19
 

Must Read Fibonacci Series in JavaScript

4. Variable naming conventions

The rules to be followed while naming the variables are called the variable naming conventions. The variable naming conventions in JavaScript is are as follows:-
 

  1. Reserved keywords like if, delete, new, etc., should not be used as variable names.
  2. Variable names must start with either a letter, an underscore _, or the dollar sign $. 
  3. Variable names beginning with a numeral are invalid.
  4. Variable names are case-sensitive, and special care must be taken.

What is Data types?

data type is an attribute associated with a piece of data that determines how the data has to be interpreted. In JavaScript, there are eight basic data types: Number, BigInt, String, Boolean, null, undefined, Symbol, and Objects. All the data types except objects are primitive data types, i.e., the data type is already built-in, and the programmer does not have to create them. Let's see each of them in detail.

Primitive Data Types

1. Number

The number data type represents both integer and floating-point numbers. Operations like addition, subtraction, multiplication, etc., can be performed on them. It also consists of "special numeric values" like Infinity-Infinity, and NaN.
 

NaN represents a computational error that occurs due to an incorrect or an undefined mathematical operation.
 

Example

// integer
let a = 10;

// floating-point numbers
let b = 5.7;

// infinity
let c = 5 / 0;

// NaN
let d = "coding ninjas"/ 5;

console.log(a);
console.log(b);
console.log(c);
console.log(d);
You can also try this code with Online Javascript Compiler
Run Code

 

Output

10
5.7
Infinity
NaN

 

2. BigInt

The number data type cannot represent integer values larger than (253 - 1) or less than -(253 - 1).  For most purposes, it is enough, but in cases like cryptography, microsecond-precision timestamps, etc., huge numbers are needed.
 

For this purpose, the data type BigInt was recently introduced to represent integers of arbitrary length. It is created by appending n to the end of an integer.
 

Example

// n indicates it's a BigInt
const a = 1234567890123456789012345678901234567890n;

console.log(a)
You can also try this code with Online Javascript Compiler
Run Code

 

Output

1234567890123456789012345678901234567890n


Currently, BigInt is supported in most browsers like Chrome, Firefox, Safari, etc., but not in Internet Explorer. 

3. String

The string data type is textual content surrounded by quotes. The quotes can be single quotes, double quotes, and backticks,
 

Double and single quotes are simple quotes with the same functionality. 

Backticks are extended functionality quotes that embed variables and expressions into a string by wrapping them in ${…}. Let's look at an example.

 

Example

// double quotes
const role = "Student"

// single quotes
const institution = 'Coding Ninjas';

// backticks
const result = `${role} at ${institution}`;

console.log(result)

 
You can also try this code with Online Javascript Compiler
Run Code

 

Output

Student at Coding Ninjas

 

In JavaScript, there is no character data type. A string may be of zero characters, one character, or many of them.

4. Boolean

The boolean data type is a logical value with two values: true and false. Boolean values can also be a result of comparisons.
 

Example 

let age = 19;
let votingStatus = (age >= 18);

console.log(votingStatus) 
You can also try this code with Online Javascript Compiler
Run Code

 

Output

true


In the above case, the comparison result is true, and the value of votingStatus is set to true.

5. null

The null data type has exactly one value: null. It is a special value that represents the intentional absence of any value
 

Example 
let name = null;

console.log(name);
You can also try this code with Online Javascript Compiler
Run Code

 

Output

null

 

In the above program, the value of the name is unknown.

6. undefined

undefined is a special value like null. If a variable is declared but not assigned, then its value is undefined. 

It is possible to assign undefined to a variable explicitly. However, in a usual scenario, null is assigned to an unknown variable. And undefined is reserved as an initial default value for unassigned variables.
 

Example 

let name;
console.log(name);

// explicit declaration not recommended
name = undefined
console.log(name)
You can also try this code with Online Javascript Compiler
Run Code

 

Output

undefined
undefined

7. Objects

An object is a value in the memory which is possibly referenced by an identifier. It is an entity having a state and behavior. As mentioned above, an object is a non-primitive data type and must be created by the programmer.
 

Example 

student = {
 name: "Raj Malhotra",
 age: 19,
};

console.log("Name: " + student.name);
console.log("Age: " + student.age);
You can also try this code with Online Javascript Compiler
Run Code

 

Output

Name: Raj Malhotra
Age: 19


Name and age are the properties in the above object, and "Raj Malhotra" and 1 are the corresponding values.

8. Symbol

The symbol is a unique and immutable data type introduced in ES6. They are created using the factory function Symbol(). Every time the factory function is called, it is guaranteed that a new and unique symbol is created. It can be used to create unique identifiers for objects. Let's understand this with an example.
 

Example 

student1 = {
 id: Symbol(),
 name: "Raj Malhotra",
 age: 18,
};

student2 = {
 id: Symbol(),
 name: "Rahul Malhotra",
 age: 20,
};

// check if id of both the students are equal
console.log(student1.id === student2.id)
 
You can also try this code with Online Javascript Compiler
Run Code

 

Output

false


In the above case, false is returned as both the students have unique symbol values.
 
This was all about variables and data types in Javascript and practice it on an online javascript editor. Now let's see some frequently asked questions related to variables and data types in Javascript.

Must Read Difference Between "var", "let" and "const" in JS

Frequently Asked Questions

Compare var, let, and const?

`var`, `let`, and `const` are used for variable declarations in JavaScript. `var` is function-scoped and allows re-declaration, often causing scope issues. `let` is block-scoped and doesn't allow re-declaration. `const` is also block-scoped and used for constants that can’t be reassigned.

What is variable hoisting in JavaScript?

Variable hoisting is a JavaScript phenomenon where variable declarations are moved to the top of their scope before code execution without any error.

What is the difference between undeclared and undefined variables in JavaScript?

Variables not declared in the program are called undeclared variables.
Declared variables which do not have any value assigned to them are called undefined variables.

How many variables are there in JavaScript?

JavaScript has three types of variable declarations: var, let, and const. Each serves different purposes: var is function-scoped, let and const are block-scoped. let allows reassignment, while const is for values that can’t be reassigned.

Conclusion

In this article, we learned about variables and data types in JavaScript, including how var, let, and const differ and when to use each. We also discussed JavaScript’s primary data types, such as strings, numbers, and objects, which are essential for efficient data manipulation.

Live masterclass