JavaScript Data Types

by anupmaurya
0 comment

In this tutorial, you’ll learn about JavaScript primitive and non-primitive data types including String, Number, Boolean, Null, Undefined, Symbol, Object, Array, Function, RegEx, Date.

Understand data types of JavaScript in depth in a simple way. A value in JavaScript is always of a certain type. For example, a string or a number.

JavaScript provides different data types to hold different types of values. There are two types of data types in JavaScript.

  1. Primitive data type
  2. Non-primitive (reference) data type

JavaScript has the primitive data types

  • JavaScript is a dynamically typed language. It means that a variable doesn’t associate with a type. In other words, a variable can hold a value of different types.
let data = 120; // data is a number data = false; // data is now a boolean data = "foo"; // data is now a string
Code language: JavaScript (javascript)

To know the type of the value that the variable stores, you use the typeof operator

let data = 120; console.log(typeof(data)); // "number" data = false; console.log(typeof(data)); // "boolean" data = "Hi"; console.log(typeof(data)); // "string"
Code language: JavaScript (javascript)

In JavaScript, there are six type of primitive data types. They are as follow

DatatypesDescription
Stringrepresents sequence of characters e.g. “hello”
Numberrepresents numeric values e.g. 100
Booleanrepresents boolean value either false or true
Undefinedrepresents undefined value
Nullrepresents null i.e. no value at all
SymbolSymbol is unique and immutable.

Let’s see each data type one by one.

  • The String Type

In JavaScript, a string is a sequence of one or more characters. It must be enclosed in single or double quotation marks.

Consider the following examples

let greeting = 'Hi'; let foo = "It's a valid string"; let bar = 'I'm also a string';
Code language: JavaScript (javascript)

JavaScript strings are immutable. It means that you cannot modify a string once it is created. However, you can create a new string based on an operation on the original string, like this

let myStr = 'js'; myStr = myStr + ' world';
Code language: JavaScript (javascript)

In this example ,first declared the myStr variable and initialize it to a string of ‘js’. Second, use the + operator to combine ‘js’ with ‘ world’ to make its value as ‘js world’. Behind the scene, JavaScript engine creates a new string that holds the new string ‘js world’ and destroys two other original strings ‘js’ and ‘ world’.

  • The Number Type

There is only one number type. There is no specific type for integers. Number can written with or without a decimal point. It is able to represent floating-point numbers, the number type has three symbolic values: +Infinity, -Infinity, and NaN (not-a-number).

Many operations can be done with numbers e.g. multiplication *, division /, addition +, subtraction -, and so on.

var num1 = 10; var num2 = 15.5; var num3 = 20 / +0; console.log(num3); // show result Infinity var num4 = 20 / -0; console.log(num4); // show result -Infinity
Code language: JavaScript (javascript)
  • The Boolean Type

The boolean datatype variable holds only one value, which can be true or false, in lowercase.

Both the cases are shown below, one with true and one with false boolean value.

let a = true; let b = false; console.log(typeof b); // boolean
Code language: JavaScript (javascript)
  • The Undefined Type

The undefined data type in JavaScript occurs when a variable is defined but a value is not specified.

var cityName; //variable declared but not defined. console.log(cityName);
Code language: JavaScript (javascript)

Note: Meaning of undefined is “value is not assigned”.

  • The Null Type

The null data type variable contains only null value. Javascript defines that null is an empty object pointer.

var name = null; console.log(typeof name); // object
Code language: JavaScript (javascript)

In the above example, name variable is defined as null , when you try to find the type of this variable its object which is an empty object pointer.

  • The Symbol Type

New in ECMAScript6. A Symbol is unique and immutable(cannot be changed) datatype.

// two symbols with the same description const value1 = Symbol('hello'); const value2 = Symbol('hello'); console.log(value1 === value2); // false
Code language: JavaScript (javascript)

In the above case, Although value1 and value2 both contain the same description, they are different.

JavaScript non-primitive data types

In javascript, non-primitive data types can hold collections of values and more complex entities. Let’s discuss each one of them in detail.

The non-primitive data types are as follows

DatatypesDescription
Objectrepresents instance through which we can access members
Arrayrepresents group of similar values
Functionrepresents boolean value either false or true
RegExrepresents regular expression
Daterepresents undefined value
  • The Object Type

In JavaScript, objects can be seen as a collection of properties. JavaScript objects are written with curly braces {}. The properties are stored in key value pairs. Property values can be values of any type, including other objects.

var product = { name: "Watch", price: 50.20, quantiy: 20, description: "It is product description" };
Code language: JavaScript (javascript)
  • The Array Type

An array is a non-primitive data type in js, which is used to store multiple values in a single variable. Each elements an array has a numeric position, known as its index. Using the index, can access values from an array.

The following example defines an array with values

let colors = ["Red", "Yellow", "Green", "Pink"];
Code language: JavaScript (javascript)

To access values from an array variablename[index]

console.log(color[0]) // Red
Code language: JavaScript (javascript)
  • The Function Type

In JavaScript, a function allows to define a block of code, give it a name and then execute it as many times. So it is possible to assign them to variables.

The following example defines a function named say that has a return value “Hello World”.

var say = function(){ return "Hello World!"; } // Check the type of greeting variable console.log(typeof say) // Output: function console.log(say()); // Output: Hello World!
Code language: JavaScript (javascript)
  • The RegEx Type

Regular expressions (called Regex or RegExp) are patterns that we can use to match character combinations in strings. These are used in many languages for text processing and manipulations.

In JavaScript, regular expressions also function as objects and are represented by the native RegExp object. By forming a search pattern with Regex, we can easily search for data and make our work more productive.

  • The Date Object

The Date object is a datatype built into the JavaScript language. Date objects are created with the new Date( ) as shown below.

You can use any of the following syntaxes to create a Date object using Date() constructor.

new Date( ) new Date(milliseconds) new Date(datestring) new Date(year,month,date[,hour,minute,second,millisecond ])
Code language: JavaScript (javascript)

Having fun learning JavaScript!

You may also like