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.
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:
- Create multi-line strings
- Interpolate strings
- Create tagged templates
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.
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"
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"
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"
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"
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"
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
).
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
Positive number’s Boolean value
const positiveNumber = 24;
Boolean(positiveNumber);
// The invocation above will return: true
Negative number’s Boolean value
const negativeNumber = -24;
Boolean(negativeNumber);
// The invocation above will return: true
BigInt zero’s Boolean value
const bigIntZero = 0n;
Boolean(bigIntZero);
// The invocation above will return: false
Positive BigInt’s Boolean value
const positiveBigInt = 37n;
Boolean(positiveBigInt);
// The invocation above will return: true
Negative BigInt’s Boolean value
const negativeBigInt = -37n;
Boolean(negativeBigInt);
// The invocation above will return: true
Empty array’s Boolean value
const emptyArray = [];
Boolean(emptyArray);
// The invocation above will return: true
Non-empty array’s Boolean value
const nonEmptyArray = ["green", 79, null];
Boolean(nonEmptyArray);
// The invocation above will return: true
Empty string’s Boolean value
const emptyString = "";
Boolean(emptyString);
// The invocation above will return: false
Non-empty string’s Boolean value
const nonEmptyString = "I am happy!";
Boolean(nonEmptyString);
// The invocation above will return: true
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
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"
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"
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"
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");
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."}
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."
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
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
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.
How to create a BigInt
There are two ways to create a BigInt value:
- by appending a lowercase letter
"n"
to the end of an integer - 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;
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
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
Notice that BigInt values are always integers, not decimals—even while dividing.
Use CSS Grid like a pro
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
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
You can see that BigInt allowed us to evaluate and compare integers that are larger than Number.MAX_SAFE_INTEGER
accurately.