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 :
- Number: integer or floating-point
- String: represent textual data
- BigInt: large integers
- Boolean: true or false
- undefined: not initialized value
- null: denotes an empty value
- Object: key-value pairs of collection of data
- Symbol: represents data whose instances are unique and immutable (can't be changed)
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.
1 - Number
Syntax
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;
Possible Operations
Number support many operations like :
addition
+division
/subtraction
-multiplication
*modulo
%
Specific numeric values
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); => NaN
Check for number type
Use "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"
Common mistakes
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.
2 - BigInt
Syntax
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;
Possible operations
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); // => 1n
Comparisons and Boolean operations
Comparisons 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"
Usage Recommendation
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.
3 - String
Syntax
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."
Properties and methods
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.endsWithdo 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"); => true
More methods
str.substring(start, end)=> returns the part of str between start and endstr.substr(start, end)=> returns the part of str from start, with the given lengthstr.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"
Accessing characters
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"
Useful and important information
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"
4 - Boolean
Syntax
- the boolean type in JavaScript has only two types: true and false
let checked = true;
let notChecked = false;
Comparisons
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); // => true
Some Logical Operators
OR =>
||(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); // => false
Useful information
Actually 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); // false
5 - Null
Syntax
In 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); // => null
Check for null
Actually, you can use :
The strict operator
===as a
boolean, becausenullis 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"
6 - Undefined
Syntax
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); // => undefined
Check for undefined
Actually, 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'
7 - Object
Syntax
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;
};
Accessing properties
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.
8 - Symbol
Syntax
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();
Check for Symbol Type
To check for Symbol type, use the typeof operator. It should return symbol.
console.log(Symbol() === Symbol()); // false
Must-know about Symbol
Symbols 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 ..inorfor..ofAccess symbols from an object using "obj.getOwnPropertySymbols()"
Symbol("x") === Symbol("x"); // => false
let id = Symbol.for("id");
let newId = Symbol.for("id");
Conclusion
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. 🤠
Top comments (0)