JavaScript Datatypes Complete Tutorial

In this section, we will learn what data types are and how to use them in JavaScript.

What is Data Type in JavaScript?

In JavaScript, a data type is the attribute of a value that the compiler uses to define how the target value should be interpreted and stored in the memory.

Why there are Data Types in JavaScript?

The values we put and use in programming languages like JavaScript have different memory footprints.

For example, if you have a numeric value like 12, it takes a different amount of memory space than a value like 23.33, which is a floating one.

So for JavaScript to be able to manage each value accurately and spare the right amount of memory for each one, it needs to differentiate and define a type for each value.

This is where data types come in!

List of Data Types in JavaScript

In short, there are 8 data types in JavaScript.

So, let’s dig in and see the list of supported data types in JavaScript.

JavaScript Number: (JavaScript Integer and Float values)

Integer and floating values in JavaScript are considered of type `Number`.

JavaScript Number Data Type Example:

var num = 10;

var num2 = 2.33;

var num3 = 3234234.342;

The type of all the values mentioned above is `Number`.

JavaScript BigInt:

Values of type `Number` cannot be greater than ` (253-1) (that’s 9007199254740991)` and less than `-( 253-1)`. For the majority of times, this is more than enough in JavaScript programs. But in some programs, we even need numbers greater or lesser than the range that the `Number` type represents. For this reason, in recent years, the JavaScript committee added another data type called `BigInt` that can have an arbitrary length. This data-type basically allows developers to pass the minimum and the maximum range of values that the `Number` data type allows.

A `BigInt` value is created by adding the letter `n` at the end of an integer number.

JavaScript BigInt Data Type Example:

var num = 1234567890123456789012345678901234567890n;

Note: the letter `n` essentially signals the execution engine that the value is of type BigInt.

JavaScript Boolean:

In programming, there are times in which we have a block of code that its execution depends on a condition. For example, if a user inserted a correct input data (like a password) then part of the program should be executed and proceed to the next level (whatever that might be). One of the ways in which we can decide whether the instructions of a part of a program can run is via values of `Boolean` data type.

There are two values that are of type `Boolean`.

true

false

JavaScript Boolean Data Type Example:

let condition = true;

let condition2 = false;

Note: in the condition section, you’ll see the use of Boolean values in practice.

JavaScript String:

A series of characters that are wrapped in double quotations `” “` or single quotation `’ ‘` or backticks ` ` are considered of type `String`.

JavaScript String Data Type Example:

let st1 = "John";

let st2 = 'Doe';

let st3 = `2021`;

Note: the backtick is covered in greater detail in the template section.

JavaScript Symbol:

This data type is used to create a unique identifier for objects. This data type is fully covered in the Symbol section.

JavaScript Object:

Values of type `Object` in JavaScript are used to group together multiple values that are related.

JavaScript Object Data Type Example:

const person = {
    name: "John",
    lastName: "Doe",
    email:`[email protected]`
}

The variable `person` here in this example contains a value of type `Object`.

Note: there are more into the `Object` data type, but because it’s a lengthy topic, it is fully covered in the Object section.

JavaScript Null:

When we have a variable and want to set its value to `empty` or `unknown`, we would use the keyword `null` which represents the Null data type.

Basically, there’s only one value of type Null and that is `null`.

JavaScript Null Data Type Example:

const person = {
    name: "John",
    lastName: "Doe",
    email:`[email protected]`
}
person = null;

Here, the first value of the `person` variable was an object, but in the next statement, we’ve replaced the value with the `null` which means the current value of the `person` variable is now empty.

JavaScript Undefined:

There’s only one value of type `Undefined` and that is `undefined`. By default, when we declare a variable and don’t initialize it with a value, it will have the `undefined` as its value. This means the variable is declared, but we didn’t store a value into that variable yet.

Note: we could also explicitly store the value `undefined` to a variable that was initialized before.

JavaScript Undefined Data Type Example:

var num;

num = 20;

num = undefined;

In this example, when we declared the variable `num` in the first statement, its initial value was `undefined`. After that, in the second statement, we’ve stored a value of type `Number` into that variable and so the value of the `num` is not of type `Undefined` anymore. In the last statement, again, we changed the value of this variable into `undefined` by explicitly storing this value into that variable.

Null vs Undefined

When we create a variable for the first time and didn’t initialize it with any value, it will have the default value of undefined. Basically, this value is used to mention that the variable is declared but was not initialized yet!

On the other hand, the value null is of type object and it is assignable! It’s a way of representing a variable as an object though an empty one! Also, when we assign this value to a variable, we’re basically initialize the target variable with a value (Although an empty object) and so it is not considered as an undefined variable anymore.

Example: creating null and undefined variables in JavaScript

const nValue = null;

let undef;

console.log(typeof nValue);

console.log(typeof undef);

Output:

object

undefined

When developing a program in JavaScript, sometimes we want to know the type of the value that is stored in a variable. This is where the `typeof` operator can be helpful.

The `typeof` operator is covered in the next section.

A variable in JavaScript is capable of holding either of these data types mentioned above. Other than identifiers of type `const` (which can only be assigned once), the other variables can hold values of one type and reassign with values of different types.

For example:

var age = 28; 
age = "John";
age = {
    age:30
}

As you can see, the variable `age` at first hold the value 28, which is of type `Number` and in the next statement, we’ve changed the value from Number type to the String type. Also, in the last statement, again, we’ve changed the value of the variable to be of type `Object`.

Besides the 8 data types that mentioned above, there are other sub-types like `function`, `Array`, `Map`, `Set` and a few others that are covered in later sections.

Leave a Reply