58
loading...
The 8 Must-Know Data Types in JavaScript : Ultimate Guide
In this tutorial, you will learn about the JavaScript data types and their unique characteristics.
Data types describe the different types or kinds of data we're gonna be working with. These data are stored in variables.
In JavaScript, there are 8 types of data :
All data types except Object are primitive data types, whereas Object is non-primitive because it can store collections of data. Primitive data types can only store a single data.
Let's start describing each data type by its syntax, the possible operations or methods, and how to use each one.
The number type is used for integer and floating points numbers.
JavaScript numbers are always 64-bit floating-point, where the number is stored in bits 0 to 51, the exponent in bits 52 to 62, and the sign-in bit 63.
let n = 234;
let a = 3.14;
let bigNumber = 1000000000;
// We can also use underscore _ as the separator for more readability
let bigNumber = 1_000_000_000;Number support many operations like :
addition +
division /
subtraction -
multiplication *
modulo %
These specific numeric values are just "Infinity", "-Infinity" and "NaN".
Infinity represents the mathematic Infinity.
NaN (Not a Number) is the result of incorrect or undefined mathematical operations.
console.log(16 / 0); // => Infinity
console.log("Hey here", / 5); => NaNUse "typeof" operator. If the variable is a number, it'll return "number".
let n = 314;
let d = 3.14;
typeof n; => "number"
typeof d; => "number"When working with numbers and strings, remember these rules:
JavaScript uses the + operator for both addition and concatenation.
Numbers are added and strings are concatenated.
Adding a number and a string will result in a string concatenation.
BigInt is a recent data type (propositon for ES2020).
Notice that the "number" type cannot represent integer values respectively larger or less than 2*53 - 1 or - (2*53 - 1).
A BigInt value is created by appending "n" to the end of the integer.
let a = 4n;
let n = 12345678912345678901234567890n;BigInt can be used as a regular number.
You can use operators such as:
addition (+)
division (/)
subtraction (-)
multiplication (*)
modulo (%)
console.log(2n + 2n); // => 4n
console.log(5n / 2n); // => 2n
console.log(2n * 2n); // => 4n
console.log(5n - 2n); // => 3n
console.log(5n ** 2n); // => 25n
console.log(5n % 2n); // => 1nComparisons such as < and >, work with BigInts and numbers just well.
But note that numbers and bigints can be equalt "==",but not strictly equal "===".
Operators such as "||" or "&&" works on bigints similar to numbers
console.log(3n > 1n); // => true
console.log(3n > 1); // => true
console.log(3n == 3); // => true
console.log(4 === 4n); // => false### Check for bigints type
Use "typeof" operator. If the variable is a bigint, it'll return "bigint".
let a = 3n;
console.log(typeof a); // => "bigint"Only use bigint when values are greater than 2**53.
The operations supported on BigInts are not constant time. BigInt is therefore unsuitable for use in cryptography.
Use TypeScript with bigint to reduce the production of TypeErrors.
A string in JavaScript represents textual data.
A string in JavaScript is always surrounded by quotes:
Double quotes ("")
Single quotes ('')
Backticks
let doubleQuotes = "Hello";
let singleQuotes = 'Single Quotes';
let str = "Using backticks";
let backticks = `Here, ${str}`;
console.log(backticks); // => "Here, Using backticks."str.length => returns string length.
str.indexOf(subStr, pos) looks for a substring within a string.
str.includes(subString, position) => true/false if the string contains subStr within.
str.startsWith and str.endsWith do exactly what they say.
let str = "Hello";
console.log(str.length); // => 5
str.indexOf("He"); => 0
str.includes("He"); => true
str.includes("z"); => false
str.startsWith("H"); => true
str.endsWith("o"); => truestr.substring(start, end) => returns the part of str between start and end
str.substr(start, end) => returns the part of str from start, with the given length
str.slice(start, end) => returns the part of str from start to end(not included).
Note that here,
start and end represent the indexes.let str = "Hello";
str.subString(0, 2); // => "He"
str.substr(0, 2); // => "He"
str.slice(2,4); // => "ll"To get a character at position 'index', use square brackets[]
You can also use the method str.charAt(index)
Notice that the first character starts from the zero position
let str = "Hello";
console.log(str[0]); // => "H"
console.log(str.charAt(0)); => "H"strings are immutable in JavaScript. It's impossible to change a character.
You can use str.replace(old_char, new_char) to return a new string with the old_char replaced by new_char.
let str = "Hello";
str = str.replace("Hello", "Hi");
console.log(str); => "Hi"let checked = true;
let notChecked = false;In JavaScript, boolean values come as a result of comparisons.
=== => strictly equal to
!== > strictly not equal to
> => greater than
< => lighter than
>= => greater than or equal to
<= => lighter than or equal to
console.log(1 === 1); // => true
console.log(1 > 2); // => false
console.log(1 < 2); // => trueOR => || (Returns true if one operand is true and false if none are true.)
AND => && ( Returns true if both operands are truthy and false.)
NOT => ! (converts the operand to boolean type and return the inverse value) operand.
let a = true;
let b = true;
let c = false;
console.log(a || b); // => true
console.log(a || c); // => true
console.log(a && b); // => true
console.log(a && c); // => falseActually you can also use
== (equal to) and != (not equal too) to make comparisons.But strict operators (
=== and !==) compare value and types.let a = 1; // => type number
let b = "1"; // => type string
console.log(a == b); // => true
console.log(a === b); // falseIn JavaScript,
null is just a value representing "nothing", "empty" or "unknown value".You can assign null to a variable to denote that currently, that variable does not have any value.
let fruit = null;
console.log(fruit); // => nullActually, you can use :
The strict operator ===
as a boolean, because null is a falsy value
let fruit = null;
console.log(fruit === null); // => true
if (fruit) {
console.log("fruit is truth.");
} else {
console.log("fruit is falsy.");
}
// => "fruit is falsy"undefined is returned when accessing a variable on a property that hasn't been initialized yet.or when a variable hasn't been assigned a value.
or when a function returns nothing.
let a;
console.log(a); // => undefined
let fruit = { name: 'Orange' };
console.log(fruit.taste); // => undefined
let fruitList = ["Orange", "Banana", "Lemon"];
console.log(fruitList[3]); // => undefined
function sum(a, b) {
let sumNumbers = a + b;
};
sum(5 + 5); // => undefinedActually, you can use :
The strict operator "==="
boolean, because undefined is a falsy value
let a;
console.log(a === undefined); // => true
if (a) {
console.log("Has value");
} else {
console.log("undefined");
}
// => 'undefined'The object is a data type that can holds values in terms of properties or methods.
There are two ways to create an object in JavaScript :
Object literal using {}
Object constructor using new Object()
// Using Object literal
let city = {
name: "Paris",
population: 1000,
getCityInfo: function() {
return this.name + ', ' + this.population;
}
};
// Using Object constructor
let city = new Object();
city.name = "Paris";
city.population = 1000;
city.getCityInfo = function() {
return this.name + ', ' + this.population;
};You can access object properties :
Using the dot notation
Using the bracket notation
However, you can only access methods using dot notation.
let city = {
name: "Paris",
population: 1000,
getCityInfo: function() {
return this.name + ', ' + this.population;
}
};
city.name; // => "Paris"
city["name"]; // => "Paris"
city.getCityInfo(); // => "Paris, 1000"Note that
Array is type object too.The Symbol is a primitive data type of JavaScript
They are immutable (can't be changed)
A symbol represents a unique identifier
You can pass an optional string as its description
const fruitSymbol = Symbol();To check for Symbol type, use the typeof operator. It should return
symbol.console.log(Symbol() === Symbol()); // falseSymbols are guaranteed to be unique
When making global symbols using, the values are equals
Symbols are no enumerated, then they don't appear in for ..in or for..of
Access symbols from an object using "obj.getOwnPropertySymbols()"
Symbol("x") === Symbol("x"); // => false
let id = Symbol.for("id");
let newId = Symbol.for("id");In this article, I showed you the common data types in JavaScript.
Every article can be made better so your suggestion or questions are welcome in the comment section.
If you also think that I missed somethinng important, let me know. 🤠
58