Data Types In JavaScript...!
Understand the Data Types in detail in a simple and practical way.
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 21024 (Number.MAX_VALUE) as well as negative floating-point numbers between -2-1074 and -21024.
The numbers can safely store integers in the range -(253 − 1) (Number.MIN_SAFE_INTEGER) to 253 − 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 21024) are automatically converted:
Positive values greater than
Number.MAX_VALUEare converted to+Infinity.Positive values smaller than
Number.MIN_VALUEare converted to+0.Negative values smaller than -
Number.MAX_VALUEare converted to-Infinity.Negative values greater than -
Number.MIN_VALUEare 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
- 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
- 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.
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...! ✌️✌️✌️