Ultime Guide to Data Types in JavaScript

This tutorial will teach 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 data collections. Primitive data types can only hold 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-point 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) results from 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 more significant than 2**53.

• The operations supported on BigInts are not constant time, and 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.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"); => true

More methods

• str.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"

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 returns 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

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, 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"

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 hold 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 not 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");

Conclusion

In this article, I showed you the standard 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 something important, let me know. ​🤠​

Article posted using bloggu.io. Try it for free.