What Are JavaScript Data Types?
Programming languages work with data and understanding how they work is crucial in manipulating the data and improving your skill as a developer.
You should keep data types in mind when writing JavaScript code. Understanding them will help you improve your skills as a JavaScript developer, it will help in the appropriate use of data, preventing bugs, and also increase the readability and maintainability of your code.
This article is based on JavaScript data types. I will cover the different data types, and give examples of their basic syntax and how they work to familiarize you with them.
In this article, you’ll learn how to use data types in JavaScript. This will help you understand the appropriate use of data, prevent bugs, and also increase the readability and maintainability of your code.
Introduction
Have you ever been to a mall or a chemistry lab? If yes then you must have seen how they put tags on the materials there, if not you should check it out.
Data types are like those tags put in malls or chemistry labs, they tell you if you’re in a fruit stall or the kind of chemical in a test tube. We might know when we’re in a shop to buy clothes or fruits, but it is different for a computer, we’ll have to be as specific as possible. Without telling the computer that this is a place for clothes or food, it won’t be able to know that by itself.
So data types are a type of identification, to tell the computer the type of data that has been inputted.
JavaScript data types are dynamic, compared to other programming languages (like Java or C#) . This means that the data held by JavaScript variables can change during runtime, and these variables are not bound to a particular data type.
So now, let’s know what these data types are all about.
Data Types In JavaScript
There are eight different data types in JavaScript:
· Strings
· Number
· BigInt
· Boolean
· Undefined
· Null
· Symbol
· Object
These data types are divided into two groups, primitive and non-primitive data types.
Primitive Data Types: These are data types that have a single value. String, Number, BigInt, Boolean, Undefined, Null, and Symbol are all primitive data types.
Non-Primitive Data Types: They are data types with multiple values. Objects are non-primitive data types.
Each of these data types is a broad topic on its own, but below I’ll explain each in simple terms.
JavaScript Strings
Strings are data types that contain characters or texts in JavaScript.
As I mentioned above, strings are primitive values. They are written in single or double quotes depending on the user’s preference or the condition. However, double quotes are recommended.
They can also be written with backticks ` as seen in template literals (A JavaScript Es6 feature for writing strings).
Using double quotes:
const myString1 = "double quotes";
Using single quotes:
const myString2 = 'single quotes';
Using backticks:
const myString3 = `backticks`;
Quotes can also be written inside the string’s value so long as it’s not the same type as the one surrounding it. However, there is a way around this, which is adding a backslash \ before the quote in the value. Like this:
const myString1 = 'It\'s a string'; // It’s a string.
There will be no need for the backslash when writing strings with backticks. You can also concatenate without using the addition + operator.
The backticks can represent variables with placeholders, not embedded expressions like quotes. The dollar sign and curly braces are characters for embedding a placeholder ${expression}
const myString1 = "Hello";
const myString2 = "World!";
const myString3 = `${myString1} ${myString2}`
console.log( myString3 ) // it logs Hello World!
JavaScript Numbers
Numbers as the name implies are data types that store numerical values in JavaScript, like integers, natural numbers, and floats.
All JavaScript numbers are stored as floating-point numbers (decimals).
JavaScript Numbers are not written in quotes. Numbers that are written in quotes are interpreted as strings by JavaScript. These numbers can be manipulated in various ways using JavaScript operators.
This is how they are written in JavaScript:
const myNumber1 = 21; // integers.
const myNumber2 = 0.21; // floats.
JavaScript BigInt
BigInt values represent integers that are too big to be contained by JavaScript numbers.
JavaScript numbers can only contain an integer up to
9007199254740991 and down to -9007199254740991.
Any integer that goes beyond this range won’t be represented.
To make JavaScript recognize the above as integers, BigInt has to be used. This is because, as stated above, JavaScript numbers are stored as floats and it’ll interpret the above numbers as floats unless stored as a BigInt.
To create a BigInt, use the BigInt() property or append n to the end of an integer this way
Using BigInt property:
const x = BigInt(9007199254740991);
Appending n:
const y = 9007199254740991n;
BigInt is a new JavaScript data type that was introduced in 2020.
JavaScript Boolean
Boolean has only two values which are: true or false.
This is used to find out if a JavaScript expression or value is true. These values are rarely set because JavaScript does it automatically based on how true our value is.
Booleans are mostly used in conditionals; if…else statements, and also with conditional (ternary) operators.
For if statements:
const user = "Jon";
if (user == "Jon") {
console.log(true) //logs true
}
else {
console.log(false) // doesn't execute
}
For ternary operators:
condition ? true expression : false expression.
The Boolean function Boolean() is used to find out if an expression is true. Anything that has a value in JavaScript is true and anything that doesn’t is false as seen in the example below:
const x = 1;
Boolean(x); // true
const y = 0;
Boolean(y); // false
JavaScript Undefined
The undefined data type shows that a variable has not been assigned a value or when a function isn’t returned it is stored as undefined.
const a;
if (a === "undefined") {
console.log(' a is undefined') // code will log “a is undefined”
}
else {
console.log(' a is defined ') // code won’t execute
}
Undefined data types can neither be written nor modified.
To know if a variable is undefined, you can use the typeof operator to check:
if (typeof a === “undefined”) {
console.log(‘ a is undefined’) // will log ‘undefined’
}
else {
console.log(‘ a is defined ’) // will not execute
}
The difference between this example and the first example is that; using a typeof operator to check a variable doesn’t throw errors but the first example will throw a reference error.
JavaScript Null
Null is when the absence of an object value is intentional. Unlike the undefined data type, null is written to represent an empty value.
Null is written with the null literal when it’s being stored in a variable.
const a = null;
console.log(a) // null
Conditionals can also be used to identify a null data type.
const a = null;
if (a === null ) {
console.log('a is null') // code will log ‘ a is null ’
}
else {
console.log('a is not null') // code will not execute
}
JavaScript Symbols
Symbols are unique value data types. Symbols are created using the Symbol() function and an optional string.
const firstSym = Symbol();
const secondSym = Symbol("sym");
When a symbol is created, JavaScript ensures it is different from other symbols even if they have the same description.
const val1 = Symbol("mark");
const val2 = Symbol("mark");
console.log(val1 === val2) // false;
As seen in the above code JavaScript will return false because it interprets the codes differently even if they both have the same descriptions.
Symbols are primarily used to create unique keys for objects amongst other functions. This is in case of a clash in the global scope where a different object has the same key-value pair as the one bearing the symbol. This symbol differentiates both objects.
JavaScript Objects
As the only non-primitive type in this list, JavaScript objects store multiple values in key-value (key: value) pairs. It can be created using curly braces {} or using the new keyword.
Using the object constructor:
const person = new Object();
Using the literal form:
const person = { key: value };
Any of the other data types can be added as values in the object type.
const person = {
name: "John",
age: 12,
status: null
}
Objects can be accessed using its key with the bracket notation([]). Using a dot notation will throw a syntax error because of the restrictions on dot notation.
const person = { name: "John" };
person.user // returns John
person["user"] // returns John.
The object type can do so many things and so many things can be done with it.
Summary
There are Eight (8) data types in total, divided into primitive and non-primitive. These data types each have roles in JavaScript making the code robust, efficient, and maintainable. They all have their syntaxes, usage, and best practices.
