In the previous article, we learned about Variables and Constants in JavaScript. Now, let's dive deeper into the fundamental concept of data types. We will explore the various types of data and their respective conversions**.**

Data types are used to identify the data stored inside the memory using variables that allow us to perform logical and mathematical operations.

In JavaScript data types are divided into two groups,

• Primitive data types

• Non-Primitive data types

Primitive data types

• Undefined

• Null

• Boolean

• String

• Number

• BigInt

• Symbol

Non-Primitive data types

• Object

• Note that arrays and functions are objects.

• Functions are special objects with a function value.

console.log(typeof [1,2,3,4,5]);//object
console.log(typeof function name(){});//function

typeof operator

To know the data type of any value, you can use typeof operator. The typeof operator returns a string that indicates the data type.

typeof("Hello") // string
typeof(12) // integer
typeof(true) // boolean
typeof(undefined) // undefined
typeof(null) // object
typeof({}) // object
typeof(Symbol()) // symbol
typeof(1n) // bigint
typeof(function(){}) // function

⭐Primitive data types

In JavaScript primitive values are immutable. This means once a primitive value is created, it can't be changed. But the variable that holds the value may be reassigned to another value.

Let us understand this by an example.

let primitive = 'immutable';
console.log( primitive );//immutable
primitive[0] ='m';
console.log( primitive );//immutable
primitive = 'Primitive'
console.log( primitive );//PrimitiveNumber

Undefined

A variable is declared and not initialized then it is said to be undefined. Undefined means the absence of value or value is not assigned.

let age;
console.log(age);//undefined
console.log(typeof counter); // undefined

Null

Null has only one value that is null. It represents “nothing”, “empty” or “value unknown”

let phoneNumber = null;
console.log(phoneNumber);//null

The typeof null returns object is a known bug in JavaScript. A proposal to fix this was proposed but rejected. The reason was the that fix would break a lot of existing sites.

Boolean

Boolean has only two values: either true or false

let isLoggedIn = true;
let inProgress = false;
console.log(isLoggedIn);//true
console.log(typeof inProgress);//boolean

Boolean value occurs as the outcome of the comparison.

let isSmaller = 2 < 5;
console.log(isSmaller);//tue
console.log(typeof isSmaller);//boolean

Boolean values are mostly used in conditional operations.

Number

The number data type represents both integer and floating-point numbers.

//number
let price = 25;
console.log(price);//25
console.log(typeof price);//number
let discount = 2.6;
console.log(discount);//2.6
console.log(typeof discount);//number

/*If a floating-point number looks to be a whole number, 
JavaScript immediately turns it into an integer number*/
let percentage = 87.00;
console.log(percentage);//87
console.log(typeof percentage);//number

We can separate a number using an underscore ( _ ) because it makes numbers more readable.

let billion = 1000000000;

//billion can be written as
let billion = 1_000_000_000;

We can represent larger numbers with the help of 'e',

let million = 1000000;
//million can be written as
let million = 1e6;

To put it another way, e multiplies the given number by 1 with the given zeroes count,

1e3 = 1 * 1000; // e3 means 1000
1.23e6 = 1.23 * 1000000 // e6 means 1000000

Let's see a case where we want to write milli or microseconds,

let milli = 0.001;
//can be written as 
let milli = 1e-3;

To put it another way, a negative number after "e" means a division by 1 with the given number of zeroes,

// -3 divides by 1 with 3 zeroes
1e-3 === 1 / 1000; // 0.001

// -6 divides by 1 with 6 zeroes
1.23e-6 === 1.23 / 1000000; // 0.00000123

// an example with a bigger number
1234e-2 === 1234 / 100; // 12.34, decimal point moves 2 times

NaN

NaN stands for Not a Number. It is encountered when the result of an arithmetic operation cannot be expressed as Numbers. NaN is the only value that is not equal to itself.

console.log('a'/2);// NaN
console.log(NaN + 1);// NaN
console.log(3*NaN);// NaN
console.log(NaN/2);// NaN
console.log(NaN == NaN);// false

According to MDN

The number is capable of storing positive floating-point numbers between 2^-1074 (Number.MIN_VALUE) and 2¹⁰²⁴ (Number.MAX_VALUE) as well as negative floating-point numbers between -2^-1074 and -2¹⁰²⁴.

The numbers can safely store integers in the range -(2⁵³ − 1) (Number.MIN_SAFE_INTEGER) to 2⁵³ − 1 (Number.MAX_SAFE_INTEGER). Outside this range, JavaScript can no longer safely represent integers; they will instead be represented by a double-precision floating-point approximation.

You can check if a number is within the range of safe integers using Number.isSafeInteger().

Values outside the range ±(2^-1074 to 2¹⁰²⁴) are automatically converted:

• Positive values greater than Number.MAX_VALUE are converted to +Infinity.

• Positive values smaller than Number.MIN_VALUE are converted to +0.

• Negative values smaller than -Number.MAX_VALUE are converted to -Infinity.

• Negative values greater than -Number.MIN_VALUE are converted to -0.

String

A string is a sequence of characters surrounded by quotes. A string begins and ends with either a single quote (') or a double quote (").

A string that starts with double quotes will end with double quotes. Likewise, a string that starts with a single quote will end with a single quote.

let greet = "Hello";
let message = 'Bye';

In JavaScript, Backticks provides extra functionality to your normal strings. Backticks allow us to embed variables and expressions.

let language = 'JavaScript';
console.log(`Learning ${language}`);

If you want to have single or double quotes in your string you can have it in two ways

1. Use double quotes outside when you need single quotes inside the string. Use single quotes outside when you need double quotes outside.

let string = "I'm also a valid String";
console.log(string);//I'm also a valid String
let impMessage = 'Learning "JavaScript" basics important before ReactJS';
console.log(impMessage);//Learning "JavaScript" basics important before ReactJS

1. Use backlash to escape it

let string1 = 'I\'m also a valid String';
console.log(string);//I'm also a valid String
let impMessage1 = "Learning \"JavaScript\" basics important before ReactJS";
console.log(impMessage);//Learning "JavaScript" basics important before ReactJS

BigInt

BigInt is a built-in object that allows you to represent whole numbers larger than 2<sup>53</sup> - 1. BigInt is created by appending n to the end of an integer or you can call the BigInt() function as well.

let bigInt = 9007199254740991n;
console.log(typeof bigInt);//bigint
let bigInt1 = BigInt(9007199254740991);
console.log(bigInt1);//9007199254740991n
console.log(typeof bigInt1);//bigint

Symbols

A symbol represents unique tokens. It can be used as an object property key. To create a symbol use the symbol() function.

let id = symbol();

The Symbol() function creates a new unique value each time you call it.

console.log(Symbol() === Symbol()); // false

As an optional argument, we can provide a description to the symbol.

let firstName = Symbol('first name');
let lastName = Symbol('last name');
console.log(firstName); // Symbol(first name)
console.log(lastName); // Symbol(last name)

console.log(typeof firstName); // symbol

⭐Non-Primitive data types

Object

An Object is a collection of properties, where each property is defined as a key-value pair. Everything in JavaScript is an object. So it is important to know the object in depth. It is important to know that arrays and functions are subtypes of objects. Objects can be created in multiple ways.

1. Object literal

    phone = {
        color: "blue" ,
        internal_storage :"16GB",
        display: "5.5inch"
    }  
    console.log(phone.color+" "+phone.internal_storage+" "+phone.display); 
    // blue 16GB 5.5inch
   

Instance of an object

var phone = new Object();  
phone.color = "blue";  
phone.internal_storage = "16GB" 
phone.display = "5.5inch"
console.log(phone.color+" "+phone.internal_storage+" "+phone.display); 
// blue 16GB 5.5inch

Conclusion

Understanding data types are essential for learning any language because they act as the foundation for language learning. JavaScript has somewhat different data types than any other programming language, which requires close attention for understanding.

In this article, we have covered

• Primitive and Non-Primitive Data Types.

• Undefined, Null, Boolean, Number, String, BigInt, and Symbol are examples of primitive data types.

• Objects, arrays, and Functions are examples of non-primitive data types in javascript.

We have not discussed various methods of Numbers, Strings, etc will be covered in future articles. In the next article, we will learn about operators in JavaScript in-depth.

Thank you for taking the time to read this article 😊. I hope the article provided you with valuable insights. I would highly appreciate it if you take a moment to like 👍, share your thoughts or feedback comment ✍️, and share 🔁 it.

Happy Learning...! ✌️✌️✌️

If you liked my content, Connect with me on,

• LinkedIn

• GitHub

• Twitter

• Instagram