JavaScript Data Types

Data types define the type of data that you can store and use in a program. Let’s understand this with an example:

To work on variables, you should know their types.

let a = 4 + “Welcome”;

Can you add “Welcome” to 4? Will you get the output or some unexpected error?

JavaScript will treat this as:

let a = “4” + “Welcome”;

Here, JavaScript treats the number as string and gives output 4Welcome.

The JavaScript expressions are evaluated from left to right. When you specify similar data in a varied sequence, it gives varied outputs.

Example 1

let a = 20+5+ “Welcome”;

Output:

25Welcome

Example 2

let a = “Welcome” + 20+5;

Output:

Welcome205

Here, in Example 1, JavaScript considers 20 and 5 as numbers, before reaching “Welcome”.

In Example 2, JavaScript considers all operands as strings as the first operand is a string.

The data types are dynamic. You can use the same variable to hold varying data types.

Example

let x; // Now x is undefined

x = 10; // Now x is a Number

x = "Welcome"; // Now x is a String

JavaScript offers six basic data types which are further classified into 3 groups as follows:

• Primitive or Primary Data Types (String, Number, and Boolean)
• Composite or Reference Data Types (Object, Array, and Function)
• Special Data Types (Undefined and Null data types)

You can store only one value at a time in the primitive data type. The composite data types can store a group of values.

String Data Type

The string data type helps you store textual values (a group of characters). You can create strings using single or double quotes around one or more characters.

Example

var x = ‘Welcome’;

var y=”Welcome”;

Number Data Type

The number data type allows you to store positive negative numbers (including or excluding decimal), or numbers having exponential notation.

Example

var x = 15; // integer

var y = 110.5; // floating-point number

var z = 67.15e+8; // exponential notation

You can also store special values such as Infinity, - Infinity, and NaN in the number data type.

When you divide a nonzero number by 0, you get infinity (∞) as the output.\

Example

alert(23 / 0); // Output: Infinity

alert(-23 / 0); // Output: -Infinity

alert(23 / -0); // Output: -Infinity

NaN refers to a Not-a-Number value. When you perform an undefined mathematical operation, you get NaN as the output. For instance: Dividing 0 by 0 or finding square root of -1.

Example

alert("Welcome" / 5); // Output: NaN

alert("Welcome" / 5 + 11); // Output: NaN

alert(Math.sqrt(-1)); // Output: NaN

Boolean Data Type

You can store two values – true or false in the Boolean data type. It is used to store values such as ON/OFF, YES/NO.

Example

var x = true;

var y= false;

Undefined Data Type

The undefined data types can be used to store only one value i.e. undefined. When you declare a variable, but don’t assign it a value, it gets the undefined value.

Example

var x;

var y = "Welcome!"

alert(x) // Output: undefined

alert(y) // Output: Welcome!

Null Data Type

The null data type is used to store only one value i.e. null value. A null doesn’t contain any value.

Example:

var x = null;

alert(x); // Output: null

var y = "Welcome!"

alert(y); // Output: Welcome!

y = null;

alert(y) // Output: null

Object Data Type

The object data type helps you store groups of data. Every object has some properties which are defined as a key-value pair. The property key is always a string, while it can have different values such as Booleans, numbers, strings, arrays and functions.

Example:

var emptyObject = {};

var student = {"name": "George", "gender": "Male", "age": "15"}

Array Data Type

The array data type allows you to store multiple values in one variable. Every value is known as an element. It has a numeric position which is called index. The array index always begins with 0, which means the first element is referred to as arr[0]. You can store all sorts of data (belonging to different data types) in an array. For example: Booleans, numbers, strings, functions, and objects. To create an array, mention all the elements in a list separated by commas and enclosed in square brackets**.**

Example:

var subjects = ["English", "Maths", "EVS", "Computer"];

var teachers = ["Clara", "Patrick", "Mark", "Lisa"];

alert(subjects[0]); // Output: English

alert(teachers[2]); // Output: Mark

Function Data Type

The function data type includes a callable object that runs a code block.

Example:

var x = function(){
return "Welcome!";
}

// Check the type of greeting variable

alert(typeof x) // Output: function

alert(x()); // Output: Welcome!

typeof Operator:

The typeof operator helps you find the type of data contained in a variable or an operand. You can use it with or without parentheses typeof(x) or typeof x.

Example:

typeof 25; // Returns: "number"
typeof 33.6; // Returns: "number"
typeof "welcome"; // Returns: "string"
typeof "34"; // Returns: "string". Number within quotes is typeof string

// Booleans
typeof true; // Returns: "boolean"

typeof false; // Returns: "boolean"
// Undefined
typeof undefined; // Returns: "undefined"

typeof undeclaredVariable; // Returns: "undefined"
// Null
typeof Null; // Returns: "object"
// Objects
typeof {name: "Smith", gender: "male"}; // Returns: "object"
// Arrays
typeof [5, 8, 11]; // Returns: "object"
// Functions
typeof function(){}; // Returns: "function"

In the above example, testing null value using the typeof operator returns “object” in place of “null”. This is a long-term error for which no solution has been found yet.

JavaScript Operators: The JavaScript operators are symbols that allow you to perform calculations. For example: +, -, *, / , >, <, and ==. To add two JavaScript variables, use the addition (+) symbol.

The different types of operators available in JavaScript are:

JavaScript Arithmetic Operators: You can use the following arithmetic operators to perform calculations:

-------TABLE BELOW-------

Operator Description

• Addition Sum of x and y

• Subtraction Difference of x and y

• Multiplication Product of x and y

/ Division Quotient of x and y

% Modulus Remainder of x divided by y

-------TABLE BELOW-------

Example:

var x = 15;

var y = 5;

alert(x + y); // 0utputs: 20

alert(x - y); // 0utputs: 10

alert(x * y); // 0utputs: 75

alert(x / y); // 0utputs: 3

alert(x % y); // 0utputs: 0

JavaScript Assignment Operators:

You can use the following assignment operators to assign values to variables.

-------TABLE BELOW-------

Operator Description

= Assign

+= Add and assign

-= Subtract and assign

*= Multiply and assign

/= Divide and assign quotient

%= Divide and assign modulus

-------TABLE BELOW-------

Example:

var x; // Declaring Variable

x = 5;

alert(x); // Outputs: 5

x = 5;

x += 30;

alert(x); // Outputs: 35

x = 5;

x -= 2;

alert(x); // Outputs: 3

x = 5;

x *= 2;

alert(x); // Outputs: 10

x = 5;

x /= 1;

alert(x); // Outputs: 5

x = 10;

x %= 5;

alert(x); // Outputs: 0

JavaScript String Operators: You can use the following string operators for strings.

-------TABLE BELOW-------

Operator Description

• Concatenation Concatenation of string1 and string 2

+= Concatenation assignment Appends the string2 to the string1

-------TABLE BELOW-------

Example:

var string1 = "Introduction to ";

var string2 = " JavaScript!";

alert(string1 + string2); // Outputs: Introduction to JavaScript

string1 += string2;

alert(string1); // Outputs: Introduction to JavaScript

JavaScript Incrementing and Decrementing Operators: You can use the following increment/decrement operators to increase or decrease values of variables.

-------TABLE BELOW-------

Operator **** Description

++x Pre-increment Increments x by one, then returns x

x++ Post-increment Returns x, then increments x by one

--x Pre-decrement Decrements x by one, then returns x

x-- Post-decrement Returns x, then decrements x by one

-------TABLE BELOW-------

Example:

var x; // Declaring Variable

x = 5;

alert(++x); // Outputs: 6

alert(x); // Outputs: 6

x = 5;

alert(x++); // Outputs: 5

alert(x); // Outputs: 6

x = 5;

alert(--x); // Outputs: 4

alert(x); // Outputs: 4

x = 5;

alert(x--); // Outputs: 5

alert(x); // Outputs: 4

JavaScript Logical Operators: You can use the following logical operators for conditional statements.

-------TABLE BELOW-------

Operator Description

&& And True if both x and y are true

|| Or True if either x or y is true

! Not True if x is not true

-------TABLE BELOW-------

Example:

var year = 2007;

// Leap years are divisible by 400 or by 4 but not 100

if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){

	alert(year + " is a leap year.");

} else{

	alert(year + " is not a leap year.");

}

JavaScript Comparison Operators: You can use the following comparison operators to compare values in a Boolean manner.

### **Operator**          	****                                          	**Description**

==       	Equal  	           	           		True if x is equal to y

===     	Identical            	           	True if x is equal to y, and they are of the same type

!=        	Not equal          	           	True if x is not equal to y

!==      	Not identical     	           	True if x is not equal to y, or they are not of the same type

<         	Less than          	           	True if x is less than y

>         	Greater than     	           	True if x is greater than y

>=       	Greater than or equal to	True if x is greater than or equal to y

<=       	Less than or equal to     	True if x is less than or equal to y

Example:

var x = 5;

var y = 15;

var z = "5";

alert(x == z);  // Outputs: true

alert(x === z); // Outputs: false

alert(x != y);  // Outputs: true

alert(x !== z); // Outputs: true

alert(x < y);   // Outputs: true

alert(x > y);   // Outputs: false

alert(x <= y);  // Outputs: true

alert(x >= y);  // Outputs: false

JavaScript Type Operators: You can use the following Type operators:

Operator Description

typeof Returns the type of a variable

instanceof Returns true if an object is an instance of an object type