In the previous article, we studied about what variables and constants are in JavaScript, and how we declare them. In this article, let's try to go deep into data types and understand each one with examples.
Now, the basic question is, What are data types?
The data type is a classification of data according to the type of value that we want to operate on.
Now, it's important to understand that JavaScript is a dynamically typed language, which means the data type is defined by the engine itself during execution, the programmer need not explicitly declare the data type during defining. JavaScript engine is powerful enough to determine the type of data that we declare.
Following are the data types of JavaScript:
- null
- undefined
- boolean
- number
- string
- symbol
- object
Let's test drive...
typeof undefined==="undefined";
typeof true==="boolean";
typeof 90==="number";
typeof "90"==="string";
typeof {lucky_number:3}==="object";
typeof null
typeof a ==="object";
typeof symbol()==="symbol";
In JavaScript, data types are categorised into two according to their behaviour:
- Primitive data type
- Reference data type
Primitive
Primitives define immutable values and were introduced lately by the ECMAScript standard. They are fundamental data types and they are built in JavaScript. Its memory is allocated in the stack, such data is very quick to access and it stores limited data.
Some widely used primitive data types are:
- null
- undefined
- boolean
- number
- string
- symbol
#1. Strings
A string is a primitive data type used to represent and manipulate the sequence of characters, usually text data. JavaScript strings are immutable, which means they cannot be altered.
Anything enclosed between " " (double quotes) can be termed as a string. Although you can also enclose strings between ' ' (single quotes), both are practically the same and you can use either of them.
There are many methods to manipulate strings, but let's study a few of them:
1.1 indexOf
The indexOf() method returns the position of the first occurrence of a value in a string. It will return -1 if the character is not found.
Syntax:
string.indexOf(searchvalue, startfromindex)
Example:
var a= awesome;
a.indexOf("w");
a.indexOf("e");
a.indexOf("e",4);
1.2 replace()
replace() is another widely used method in JavaScript. This method returns a new string with replaced values in it.
Syntax:
string.replace(current character, new character)
Example:
let quote = "Coding Minutes is great";
let newQuote = quote.replace("great", "awesome");
1.3 concat()
The concat() method joins two or more strings and returns a new string.
Syntax:
string.concat(string1, string2, ..., stringn)
Example:
let quote1= "I have not failed.";
let quote2= "I’ve just found 100";
let quote3= "ways that won’t work.";
let outcome= text1.concat(quote1," ", quote2, " ", quote3);
1.4 toUpperCase() and toLowerCase()
toLowerCase() method converts upper case characters to lower case letters.
toUpperCase() method converts lower case characters to upper case letters.
Syntax:
string.toLowerCase()
string.toUpperCase()
Example:
let name = "Coding Minutes";
let output= name.toLowerCase();
let name = "Coding Minutes";
let output= name.toUpperCase();
These are a few methods of strings. For all the methods, visit this link.
#2. Number
With the help of number datatype, we can store numeric values. They can be integer values or fractional decimal values. JavaScript numbers are formatted in the "IEEE 754" standard, and in common terms, it is also known as "Floating point" number representation.
It's very interesting to understand how Decimal and Binary numbers are encoded by the machine. For more information about IEEE 754 refer here.
Syntax:
let container = value;
Example:
let a = 100;
let b = 100.11;
We can represent larger numbers with the help of 'e'. For example:
let x = 312e5;
let y = 312e-5;
JavaScript Number too has properties and methods to manipulate numbers:
2.1 MAX_VALUE
Number.MAX_VALUE returns the largest number attainable in JavaScript.
let x = Number.MAX_VALUE;
console.log(x);
It is a fixed value, which is also termed a "Static Value".
Number = 1;
console.log(Number.MAX_VALUE);
It'll return a special keyword called "undefined", this undefined is a very pivotal role to play in JavaScript, which we'll discuss in the later part of the series. This Number.MAX_VALUE does the job of providing the maximum possible extent to which JavaScript can represent numbers.
2.2 MIN_VALUE
Number.MIN_VALUE returns the smallest number attainable in JavaScript.
Example:
let y = Number.MIN_VALUE;
console.log(y);
The same is the case with MIN_VALUE. It's a static value, it does the job of announcing the minimum possible value in JavaScript.
2.3 POSITIVE_INFINITY
This property returns 'Infinity" at the time of positive overflow.
Example:
let a = -1 / 0;
console.log(a);
2.4 NEGATIVE_INFINITY
This property returns '-Infinity" at the time of negative overflow.
Example:
let a = -1 / 0;
console.log(a);
2.5 NaN
NaN will amaze you. Its abbreviation states 'Not a Number'. It conveys that the syntax that we are trying to use does not make any sense. Here are some cases where we might end up getting NaN:
Case #1: When JavaScript is unable to convert the result into a number
let myName = 'Lily';
let divideMyName= myName/100;
console.log(divideMyName);
Case #2: We are trying to figure out the result where the operation does not return a real number.
Example:
Math.sqrt(-1);
Case #3: Indeterminate forms in mathematics result in NaN.
Example:
let a = 0 * Infinity;
let b = 1 ** Infinity;
let c = Infinity / Infinity;
let d = Infinity - Infinity;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
Here is the way to check if your operation is NaN, by using the isNaN property:
let num= Infinity/Infinity;
Number.isNaN(num);
Here are a few methods to manipulate the number data type in JavaScript:
2.6 toString()
The toString() method returns a number as a string.
Example:
let x = 123;
x.toString();
2.7 toFixed()
toFixed() returns a string, with a number with a specified number of decimals.
Example:
let pi = 3.141592653589793238462643;
pi.toFixed(0);
pi.toFixed(2);
pi.toFixed(4);
2.8 toPrecision()
toPrecision() returns a string, with a number with a specified length.
Example:
let sigma = 6.6524587321;
sigma.toPrecision(2);
sigma.toPrecision(6);
#3. Boolean
We use boolean values to find whether the value returns true or false. It is also used in the conversion of very specific values to true or false values.
Here is the list of values which upon conversion will result in true or false values.
Example:
let a = 0;
Boolean(a);
let b= 45;
Boolean(b);
let c;
Boolean(c);
let d= 'lily'/100;
Boolean(d);
20 > 30
30 > 20
30 = 30
30 == 30
30 === 30
Here comes one of the specialities of JavaScript
7==='7'
7=='7'
How is it possible? Let's understand this in detail in the next article 'operators', but for now just understand that == is 'loose equals', and === is 'strict equals'.
#4. Null
One of the most interesting data types in JavaScipt, it represents the "absence" of a certain value. Null is one of the false values in JavaScript. This is interesting because JavaScript implementors made a slight mistake while defining typeof null. Null is not an object. However, this bug cannot be fixed and we will have to live with it.
Let us see some examples to understand null:
typeof null
let a = null
console.log(a)
let a = null
console.log(a === null)
let a = null
console.log(a == null)
Remember, null is a special keyword, not an identifier. It cannot be assigned to a variable.
#5. Undefined
Undefined is an identifier. A variable that has not been assigned any values of type undefined.
Example:
let a
console.log(a);
if (a === undefined){
console.log(" a is undefined")
}
else{
console.log(" a is not undefined ")
}
Let's study more about undefined and its use cases when we discuss execution context. It's weird why we just declare a variable but did not initialise, it has a jaw-dropping use case in JavaScript execution Context.
Undefined vs Null
It's very important to observe and understand the differences between undefined and null.
Let's write direct code to observe their use cases which will give a good amount of idea about their difference.
let a
console.log(a);
let b = null
console.log(b);
typeof null
typeof undefined
console.log( undefined == null);
console.log( undefined === null);
console.log(1 + null);
console.log(1 + undefined);
Null is an empty value, null must be assigned. Undefined means a variable has been declared but it yet to be initialised by any value.
#6. Symbol
This is a new data type, added in ES6. Symbols are unique values which are used as properties. The symbol data type is used to define your own symbol.
Example:
let symb= symbol()
typeof symb
Every symbol call returns a unique symbol, observe below...
let symb1 = symbol(" Coding Minutes is the best ")
let symb2 = symbol(" Coding Minutes is the best ")
console.log(symb1 == symb2);
JavaScript considers each symbol as a unique value. It always returns false upon equality operation. The motivation behind adding symbol in ES6 is to support unique object keys, it was difficult to create unique object keys before the symbol.
So, that was about primitive data types. Let us now try to understand non-primitive data types i.e object.
Object
The object is the most important data type in JavaScript, Modern JavaScript deals a lot with objects. It's important to understand that functions and arrays are subtypes of object.
We have different ways of creating and representing an object
#1. Object literal
Syntax:
object={property1:value1, property2:value2 .....propertyN:valueN}
Example:
phone = {color: "blue" ,internal_storage :"16GB",display: "5.5inch"}
console.log(phone.color+" "+phone.internal_storage+" "+phone.display);
#2. Instance of an object
Syntax:
let objectname=new Object();
Example:
var phone = new Object();
phone.color = "blue";
internal_storage = "16GB"
display = "5.5inch"
console.log(phone.color+" "+phone.internal_storage+" "+phone.display);
#3. Object Constructor
Here this acts as an object constructor of an object. This keyword has a lot to talk about, one needs to understand execution context, window object etc. Let's deal with this, in basic terms in this article.
Example:
function phone(color,internal_storage,display){
this.color=color;
this.internal_storage=internal_storage;
this.display=display;
}
phn=new phone("blue","16GB", "5.5inch");
console.log(phn.color+" "+phn.internal_storage+" "+phn.display);
Here are a few object methods to discuss:
#1. object.values()
This method returns an array of values in the object.
Example:
const lily = {
name: 'lily',
class: 10,
height: "5.3feet"
};
console.log(Object.values(lily));
#2. Object.entries()
This method returns key-value pairs in terms of an array.
Example:
const fruit = { 1: 'apple', 2: 'cherry', 3: 'berry' };
console.log(Object.entries(fruit)[2]);
#3. Object.keys()
This method returns an array of values in the object.
Example:
let veggies = {a: 'brinjal',b: 'Cabbage',c: 'beetroot'};
console.log(Object.keys(veggies));
Conclusion
In this article, we discussed data types in and required methods and properties. It's very important to understand data types in any language as they will form the building block to learning the language. Unlike any other programming language, JavaScript has slightly different data types which require a good amount of attention to understand. It is advisable to understand each data type thoroughly and practice each one of them to gain confidence as a programmer. In the next article, we will learn about operators in JavaScript in-depth.
