Skip to main content

Primitive Data Type in JavaScript – Explained with Examples

JavaScript primitive data types are the basic values you can use to build a webpage.

Note that a primitive value is neither a property nor a method. It is a basic value we 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[0] = "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; // 150n
myBigInteger - 25n; // 75n
++myBigInteger; // 101n
++myBigInteger; // 102n
myBigInteger * 2n; // 204n
--myBigInteger; // 101n
--myBigInteger; // 100n
myBigInteger / 7n; // 14n
myBigInteger ** 10n; // 100000000000000000000n
myBigInteger % 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.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter