Ultime Guide to Data Types in JavaScript
Tags: javascript, react, typescript
Published: 2022-05-02 13:48:01

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. 

```javascript
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.

```javascript
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".
```javascript
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.

```javascript
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 (%)

```javascript
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
```javascript
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".

```javascript
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

```javascript
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.

```javascript
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.

```javascript
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

```javascript
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.

```javascript
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

```javascript
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

```javascript
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.

```javascript
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. 

```javascript
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. 

```javascript
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 

```javascript
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.

```javascript
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

```javascript
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()` 

```javascript

// 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.

```javascript
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

```javascript
const fruitSymbol = Symbol();
```

### Check for Symbol Type

To check for Symbol type, use the typeof operator. It should return `symbol`.

```javascript
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()"

```javascript
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](https://bloggu.io). Try it for free.*