    # Primitive Data Type in JavaScript – Explained with Examples

A JavaScript primitive data type is any plain value that you can use to program a webpage and its content.

Note that a primitive value is neither a property nor a method. Instead, it is a plain value that you can use in a property, method, variable, or function.

## Types of Primitive Data in JavaScript​

JavaScript has seven (7) primitive values:

• Number
• String
• Boolean
• Undefined
• Null
• Symbol
• BigInt

Let's discuss each value.

## Number Primitive Data Type​

A primitive number value refers to the double-precision 64-bit floating-point arithmetic data.

In other words, you can write JavaScript numbers in the following ways:

• Integers
• Decimals
• Scientific (exponent) notations

Below are some examples.

### Example 1: Positive integer number in JavaScript​

``const balance = 300;``

We initialized the `balance` variable with a positive integer number.

### Example 2: Negative integer number in JavaScript​

``const balance = -300;``

We initialized the `balance` variable with a negative integer number.

### Example 3: Positive decimal number in JavaScript​

``const balance = 300.75;``

We initialized the `balance` variable with a positive decimal number.

### Example 4: Negative decimal number in JavaScript​

``const balance = -300.75;``

We initialized the `balance` variable with a negative decimal number.

### Example 5: Positive scientific notation number in JavaScript​

``const balance = 3e2;``

We initialized the `balance` variable with a positive scientific notation number.

### Example 6: Negative scientific notation number in JavaScript​

``const balance = -3e2;``

We initialized the `balance` variable with a negative scientific notation number.

## String Primitive Data Type​

A primitive string value is a quoted series of characters representing JavaScript's textual data.

You can create a string by enclosing zero or more characters in quotes.

The typical type of quotes you can use to create strings are:

• Double quotes (`""`)
• Single quotes (`''`)
• Backtick quotes (````)

Below are some examples.

### Example 1: Double quote string in JavaScript​

``const balance = "300";``

We initialized the `balance` variable with a double-quoted string value.

### Example 2: Single quote string in JavaScript​

``const balance = "300";``

We initialized the `balance` variable with a single-quoted string value.

### Example 3: Backtick quote string in JavaScript​

``const balance = `300`;``

We initialized the `balance` variable with a backtick-quoted string value.

note

A JavaScript backtick is sometimes called a template literals string.

### Single vs. double vs. backtick quotes: What's the difference?​

JavaScript's single and double quotes do the same job of representing textual data. So, the choice between the two is a matter of personal preference.

Some developers argue that single quotes are easier to type and read. But the best is the one you prefer.

On the other hand, a backtick extends the functionalities of single and double quotes by allowing you to do the following:

Therefore, use single or double quotes if you only need to indicate textual data.

However, to do extra things—like embedding expressions in strings, use template literals.

### Important stuff to know about primitive string values​

Keep these four essential pieces of info in mind whenever you choose to use JavaScript strings.

#### Info 1: You can treat strings as objects​

Strings are primitive values—not objects. However, JavaScript allows you to treat them like objects by providing helpful properties and methods.

Here's an example:

``"Hello".length;// The invocation above will return: 5``

You can see that the computer treated `"Hello"` as an object.

• JavaScript analyzed the `"Hello"` string as an object's name.
• `length` served as a property's key.
• Number `5` is like a value inside an object named `"Hello"`.

In other words, the `"Hello".length` code is like invoking an object like so:

``// Create an object named "Hello":const Hello = { length: 5 };// Invoke the "Hello" object's length property:Hello.length;// The invocation above will return: 5``

#### Info 2: You can add strings​

JavaScript allows adding one string to another string (or a number)—just like you would add two or more numbers.

note

The addition of strings is called concatenation.

JavaScript concatenates expressions from left to right. And it treats all numbers after a string as a string data type. Therefore, your data's placement can influence the concatenation's result.

Here's an example:

``const toDo = "Windows " + 20 + 19 + " update";console.log(toDo);// The invocation above will return: "Windows 2019 update"``

Try it on StackBlitz

The snippet above read `20 + 19` as a string because we placed it after a string value.

Here's another example:

``const toDo = 20 + 19 + " Windows" + " update";console.log(toDo);// The invocation above will return: "39 Windows update"``

Try it on StackBlitz

The snippet above evaluated `20 + 19` as a number because we placed it before the strings.

Now, consider this example:

``const toDo = "Windows" + " update " + 20 + 19;console.log(toDo);// The invocation above will return: "Windows update 2019"``

Try it on StackBlitz

The snippet above read `20 + 19` as a string because we placed it after the string values.

#### Info 3: Use a backslash to convert special characters to strings​

You can use the backslash (`\`) to convert special characters to valid strings.

Here's an example:

``const comment = 'Her speech was \"really\" good';console.log(comment);// The invocation above will return: 'Her speech was "really" good'``

The snippet above used the `\"` escape sequence to insert a double quote in the `comment`'s string.

#### Info 4: Strings are Immutable​

Unlike objects, strings are immutable (unchangeable).

In other words, you cannot change the individual characters of a string.

Suppose you need to change any of the characters of a variable's string. In that case, you must reassign the entire string to the variable.

Here's an example:

``let bestFruit = "Qpple";// Update bestFruit's zeroth index character to "A":bestFruit = "A";// Check bestFruit's current content:console.log(bestFruit);// The invocation above will return: "Qpple"``

Try it on StackBlitz

You can see that `bestFruit`'s zeroth index character did not get updated because strings are immutable.

To update any character in a string, you must reassign the entire string.

Here's an example:

``let bestFruit = "Qpple";// Update bestFruit's zeroth index character to "A":bestFruit = "Apple";// Check bestFruit's current content:console.log(bestFruit);// The invocation above will return: "Apple"``

Try it on StackBlitz

## Boolean Primitive Data Type​

Boolean is a primitive value that states the falseness or truthfulness of an expression (or variable).

In other words, Boolean is like a switch that you can turn on (`true`) or off (`false`).

note
• Truthy values are values JavaScript considers to be `true`.
• Falsy values are values JavaScript considers to be `false`.
• All JavaScript's values are true except `0` (zero), `false`, `""` (empty string), `NaN`, `null`, `undefined`, and `0n` (BigInt zero)—which are falsy.

You can use JavaScript's `Boolean()` method to check the falseness or truthfulness of an expression (or variable).

Below are some examples.

### Zero's Boolean value​

``const zero = 0;Boolean(zero);// The invocation above will return: false``

Try it on StackBlitz

### Positive number's Boolean value​

``const positiveNumber = 24;Boolean(positiveNumber);// The invocation above will return: true``

Try it on StackBlitz

### Negative number's Boolean value​

``const negativeNumber = -24;Boolean(negativeNumber);// The invocation above will return: true``

Try it on StackBlitz

### BigInt zero's Boolean value​

``const bigIntZero = 0n;Boolean(bigIntZero);// The invocation above will return: false``

Try it on StackBlitz

### Positive BigInt's Boolean value​

``const positiveBigInt = 37n;Boolean(positiveBigInt);// The invocation above will return: true``

Try it on StackBlitz

### Negative BigInt's Boolean value​

``const negativeBigInt = -37n;Boolean(negativeBigInt);// The invocation above will return: true``

Try it on StackBlitz

### Empty array's Boolean value​

``const emptyArray = [];Boolean(emptyArray);// The invocation above will return: true``

Try it on StackBlitz

### Non-empty array's Boolean value​

``const nonEmptyArray = ["green", 79, null];Boolean(nonEmptyArray);// The invocation above will return: true``

Try it on StackBlitz

### Empty string's Boolean value​

``const emptyString = "";Boolean(emptyString);// The invocation above will return: false``

Try it on StackBlitz

### Non-empty string's Boolean value​

``const nonEmptyString = "I am happy!";Boolean(nonEmptyString);// The invocation above will return: true``

Try it on StackBlitz

## Undefined Primitive Data Type​

An undefined primitive data is the value JavaScript automatically assigns to any variable you declare without an initial value.

Here's an example:

``let myName;typeof myName;// The invocation above will return: undefined``

Try it on StackBlitz

The snippet above returned `undefined` because we did not assign a value to the `myName` variable.    Note that a variable with an empty string is not undefined.

Here's an example:

``let myName = "";typeof myName;// The invocation above will return: "string"``

Try it on StackBlitz

## Null Primitive Data Type​

You can use the null primitive to indicate an intentional absence of a value.

In other words, suppose you do not wish to initialize a variable with a value, and you do not want JavaScript to render it `undefined`. In that case, use `null` to express that you've intentionally left the variable empty.

Here's an example:

``let myName = null;typeof myName;// The invocation above will return: "object"``

Try it on StackBlitz

You can see that the `typeof myName` returned `"object"`—not `undefined`.

## Symbol Primitive Data Type​

A primitive Symbol data is a unique, anonymous value that you can create by invoking the `Symbol()` function in a JavaScript runtime environment.

Here's an example:

``let mySym = Symbol();typeof mySym;// The invocation above will return: "symbol"``

Try it on StackBlitz

You can optionally pass an argument to a `Symbol` function.

Here's an example:

``let mySym = Symbol("randomTest");console.log(mySym);// The invocation above will return: Symbol("randomTest");``

Try it on CodePen

Note that a `Symbol`'s argument serves only as a label to describe the newly created Symbol. It serves no other purpose, so use it only for debugging purposes.

### Symbol's purpose​

Symbols typically get used for adding unique property names to an object. In other words, suppose you wish to add a new property to an object.

However, suppose that object already contains a property with the same name as what you want to add.

In such a case, you can use a `Symbol` to add your new property without overriding the existing one.

Here's an example:

``// Define an object:let englishClubs = {  premierLeague: "Liverpool F.C.",  championship: "Millwall F.C.",  nationalLeague: "Bromley F.C."}// Add a new premier league club to the englishClubs object above:englishClubs.premierLeague = "Arsenal F.C.";// Check englishClubs' current content:console.log(englishClubs);// The invocation above will return:{  premierLeague: "Arsenal F.C.",  championship: "Millwall F.C.",  nationalLeague: "Bromley F.C."}``

Try it on StackBlitz

You can see that the `englishClubs.premierLeague = "Arsenal F.C."` code overwrote the existing `"Liverpool F.C."` value because `englishClubs` currently contains a `premierLeague` key.

However, you can use a `Symbol` to add a new `premierLeague` property without overwriting the existing one.

Here's an example:

``// Define an object:let englishClubs = {  premierLeague: "Liverpool F.C.",  championship: "Millwall F.C.",  nationalLeague: "Bromley F.C."}// Define a Symbol:const newSym = Symbol("premierLeague");// Add a new premier league club to the englishClubs object above:englishClubs[newSym] = "Arsenal F.C.";// Check englishClubs' current content:console.log(englishClubs);// The invocation above will return:{  premierLeague: "Liverpool F.C.",  championship: "Millwall F.C.",  nationalLeague: "Bromley F.C.",  Symbol(premierLeague): "Arsenal F.C."}``

Notice that we could add a new `premierLeague` property without overwriting the existing one.

Suppose you need to retrieve the `premierLeague` Symbol's value. In such a case, invoke the Symbol through its variable like this:

``// Check the premierLeague Symbol's value:englishClubs[newSym];// The invocation above will return: "Arsenal F.C."``

Try it on StackBlitz

### Important stuff to know about Symbols​

Symbols are always unique.

JavaScript always creates a new and unique symbol each time you invoke the `Symbol()` function.

For instance, consider this example:

``Symbol() === Symbol();// The equality comparison above will return: false``

Try it on StackBlitz

The snippet above returned `false` because each `Symbol` you create is guaranteed to be unique.

Here's another example:

``Symbol("yellow") === Symbol("yellow");// The equality comparison above will return: false``

Try it on StackBlitz

You can see that the snippet above returned `false` because each `Symbol` is unique—regardless of the presence of identical labels.

## BigInt Primitive Data Type​

A BigInt primitive is a unique numeric data type used mainly for arbitrarily lengthy integers.

note

BigInt is the short name for Big Integer.

### How to create a BigInt​

There are two ways to create a BigInt value:

1. by appending a lowercase letter `"n"` to the end of an integer
2. by calling the `BigInt()` constructor function

Below are some examples.

#### How to create a BigInt value by appending the letter `n` to an integer​

``584n;``

The snippet above is a BigInt value because it is an integer with the letter `"n"` appended.

#### How to create a BigInt value with the `BigInt()` function​

``BigInt(584);// The invocation above will return:584n;``

Try it on CodePen

The snippet above created a BigInt value by providing an integer as the `BigInt()` function's argument.

### Important stuff to know about BigInt​

Keep these three essential pieces of info in mind whenever you choose to use a BigInt value.

#### Info 1: You can convert BigInts to Number types​

Suppose you wish to convert a BigInt to a Number data type. In such a case, use the `Number()` function like this:

``let myBigInteger = 100n;// Convert myBigInteger to a Number data type:Number(myBigInteger);// The invocation above will return: 100``

Try it on StackBlitz

#### Info 2: JavaScript's operators work with BigInts​

You can use addition (`+`), subtraction (`-`), division (`/`), multiplication (`*`), increment (`++`), decrement (`--`), exponentiation (`**`), or modulus (`%`) operators with BigInts—just as you would with numbers.

Here's an example:

``let myBigInteger = 100n;myBigInteger + 50n; // 150nmyBigInteger - 25n; // 75n++myBigInteger; // 101n++myBigInteger; // 102nmyBigInteger * 2n; // 204n--myBigInteger; // 101n--myBigInteger; // 100nmyBigInteger / 7n; // 14nmyBigInteger ** 10n; // 100000000000000000000nmyBigInteger % 6n; // 4n``

Try it on CodePen

Notice that BigInt values are always integers, not decimals—even while dividing.

#### Info 3: BigInt allows accurate comparison of numbers larger than JavaScript's maximum safe integer​

Number.MAX_SAFE_INTEGER (`2^53 - 1`) is the maximum integer JavaScript can safely compare and precisely express.

However, BigInt allows accurate comparison and representation of larger integers than the maximum safe digit of `9007199254740991`.

For instance, consider the code below:

``const maxInt = Number.MAX_SAFE_INTEGER;// Check the maximum safe integer:console.log(maxInt); // 9007199254740991// Add 1 to the maximum safe integer:const x = maxInt + 1; // 9007199254740992// Add 2 to the maximum safe integer:const y = maxInt + 2; // 9007199254740992// Compare x and y:console.log(x === y); // true``

Try it on CodePen

You can see that increasing `Number.MAX_SAFE_INTEGER` by `1` or `2` evaluates to the same integer, which is mathematically inaccurate.

In other words, it is safer to use BigInt to represent integers that are larger than `9007199254740991` (`2^53 - 1`).

Here's an example:

``const maxInt = BigInt(Number.MAX_SAFE_INTEGER);// Check the maximum safe integer:console.log(maxInt); // 9007199254740991n// Add 1 to the maximum safe integer:const x = maxInt + 1n; // 9007199254740992n// Add 2 to the maximum safe integer:const y = maxInt + 2n; // 9007199254740993n// Compare x and y:console.log(x === y); // false``

Try it on CodePen

You can see that BigInt allowed us to evaluate and compare integers that are larger than `Number.MAX_SAFE_INTEGER` accurately.

## Overview​

This article discussed what primitive data are. We also used examples to understand how to define and use the different types of JavaScript primitives.