Quick Introduction to JavaScript Data Types
Tags: beginners, tutorial, javascript, webdev
Published: 2020-01-14 03:39:23

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

JavaScript, like any other programming language, has its own data structures and types. JavaScript has a few data types that we have to know about in order to build programs with it. Different pieces of data can be put together to build more complex data structures.

JavaScript is a loosely typed, or dynamically typed, language. This means that a variable that’s declared with one type can be converted to another type without explicitly converting the data to another type. Variables can also contain any type at any time, depending on what’s assigned. For example, if we write the following code:

```javascript
let x = 1;      
x = 'bar';  
x = true;
```

In the first line `x` is a number, but in the second line, the same variable `x` has been reassigned into a string. In the last line, it has been again been reassigned, this time to a Boolean.

JavaScript has multiple data types. There are seven primitive data types and an object type. The seven primitive types are Boolean, null, undefined, number, BigInt, string, and symbol.

All of JavaScript’s primitive types are immutable, which means that they can’t be changed. The primitive types contain values that are fixed once they’re defined. The Boolean type is either `true` or `false` and represents logical entities. The null type only has one value, which is `null`. The `null` value means that it refers to some nonexistent or invalid object or address. The undefined type is unique to JavaScript. It means that a variable hasn’t been assigned any value.

* * *

Numbers
=======

There are two number types in JavaScript, which are number and BigInt. The number type is a double-precision 64-bit number that can have values between -2 to the 53rd power minus 1 and 2 to the 53rd power minus 1. There’s no specific type for integers. All numbers are floating point numbers. There are also three symbolic values: `Infinity` , `-Infinity` and `NaN`.

The largest and smallest available values for a number are `Infinity` and `-Infinity` respectively. We can also use the constants `Number.MAX_VALUE` or `Number.MIN_VALUE` to represent the largest and smallest numbers. We can use the `Number.isSafeInteger()` function to check whether a number is in the range of numbers available that are allowed in JavaScript. There is also the constants `Number.MAX_SAFE_INTEGER` and `Number.MIN_SAFE_NUMBER` to check if the number you specify in the safe range. Anything outside the range isn’t safe and will be a double-precision floating-point of the value. The number 0 has two representations in JavaScript: There’s +0 and -0, and 0 is an alias for +0. It will be noticed if you try to divide a number by 0:

```javascript
1/+0 // Infinity  
1/-0 // -Infinity
```

Sometimes numbers can represent Boolean values with bitwise operators to operate them as Boolean, but this is bad practice since JavaScript already has Boolean types, so using numbers to represent Boolean will be unclear to people reading the code. That’s because numbers can represent numbers, or they can represent Booleans if someone chooses to use them that way.

In JavaScript, there is the BigInt type to store numbers that are beyond safe integer range. A BigInt number can be created by adding an `n` character to the end of a number. With BigInt, we can make calculations that have results beyond the safe range of normal numbers. For example, we can write the following expressions and still get the numbers we expect:

```javascript
const x = 2n ** 55n;  
const y = x + 1n;
```

For `x` we get `36028797018963968n` and for `y` we get `36028797018963969n` , which is what we expect. BigInts can use the same arithmetic operations as numbers like `+`, `*`, `-`, `**` and `%`. A BigInt behaves like a number when converted to a Boolean with functions, keywords, or operators like `Boolean`, `if` , `||` , `&&`, `!`. BigInts cannot be operated in the same expressions as numbers. If we try that, we will get a `TypeError`.

* * *

Strings
=======

Strings are used to represent textual data. Each element of the string has its own position in the string. It’s zero-indexed, so the position of the first character of a string is 0. The `length` property of the string has the total number of characters of the string.

JavaScript strings are immutable. We cannot modify a string that has been created, but we can still create a new string that contains the originally defined string. We can extract substrings from a string with the `substr()` function and use the `concat()` function to concatenate two strings.

We should only present text data with strings. If there are more complex structures needed for your data structure, then they shouldn’t be represented with a string. Instead, they should be objects. This is because it’s easy to make mistakes with strings since we can put in the characters we want. Therefore, mistakes are made easily.

* * *

Symbols
=======

Symbols are new to ES2015. It is a unique and immutable identifier. Once you have created it, it cannot be copied. Every time you create a new symbol, it’s a unique one. Symbols are mainly used for unique identifiers in an object. That’s a symbol’s only purpose.

There are some static properties and methods of its own that expose the global symbol registry. It is like a built-in object, but it doesn’t have a constructor, so we can’t write `new Symbol` to construct a symbol object with the `new` keyword.

To create new symbols, we can write:

```javascript
const fooSymbol = Symbol('foo')
```

Note that each time we call the `Symbol` function, we get a new symbol, so if we write

```javascript
Symbol('sym') === Symbol('sym')
```

the expression above would be `false`.


* * *

Objects
=======

Object is a reference data type, which means it can be referenced by an identifier that points to the location of the object in memory. In memory, the object’s value is stored, and, with the identifier, we can access the value. Object has properties, which are key-value pairs with the values being able to contain the data with primitive types or other objects. That means we can use object to build complex data structures. The key is an identifier for the values of a property, which can be stored as a string or symbol. There are two types of properties that have certain attributes in an object. Objects have data properties and accessor properties.

A JavaScript object has the following data properties:

*   `[[Value]]` — This can be of any type. It has the value retrieved by a getter of the property. Defaults to `undefined`.
*   `[[Writable]]` — This is a Boolean value. If it’s `false`, then `[[Value]]` can’t be changed. Defaults to `false`.
*   `[[Enumerable]]` — This is a Boolean value. If it’s `true`, then it can be iterated over by the `for...in` loop, which is used to iterate over the properties of an object. Defaults to `false`.
*   `[[Configurable]]` — This is a Boolean value. If it’s `true`, then the property can be deleted or changed to an accessor property, and all attributes can be changed. Otherwise, the property can’t be deleted or changed to an accessor property, and attributes other than `[[Value]]` and `[[Writable]]` can’t be changed. Defaults to `false`.

A JavaScript object has the following accessor properties:

*   `[[Get]]` — This is either a function or it’s `undefined`. This may contain a function that is used to retrieve a property value whenever a property is being retrieved. Defaults to `undefined`.
*   `[[Set]]` — This is either a function or it’s `undefined`. This lets us set the assigned value to an object’s property whenever an object’s property is attempted to be changed. Defaults to `undefined`.
*   `[[Enumerable]]` — This is a Boolean value that defaults to `false`. If it’s `true`, then the property will be included when we loop through the properties with the `for...in` loop.
*   `[[Configurable]]` — This is a Boolean value that defaults to `false`. If it’s `false`, then we can’t delete the property and can’t make changes to it.

JavaScript has a `Date` object built into the standard library, so we can use it to manipulate dates.

Array are also objects. `Array` can store a list of data with integer indexes to indicate its position. The first index of JavaScript arrays is 0. There’s also a `length` property to get the size of the array. The `Array` object has many convenient methods to manipulate arrays, like the `push` method to add items to the end of the array and the `indexOf` method to find the index of the first occurrence of a given value. A`TypedArray` object is an object that lets us see an array-like view of a binary data buffer.

Since ES2015, the following typed array objects are available:

*   `Int8Array`, value ranges from -128 to 127
*   `Uint8Array`, value ranges from 0 to 255
*   `Uint8ClampedArray`, value ranges from 0 to 255
*   `Int16Array`, value ranges from -32768 to 32767
*   `Uint16Array`, value ranges from 0 to 65535
*   `Int32Array`, value ranges from -2147483648 to 2147483647
*   `Unit32Array`, value ranges from 0 to 4294967295
*   `Floar32Array`, value ranges from -1.2 times 10 to the 38 to 3.4times 10 to the 38
*   `Float64Array`, value ranges from 5.0 times 10 to the 324 to 1.8 times 10 to the 308
*   `BigInt64Array`, value ranges from -2 to the 63 to 2 to the 63 minus 1
*   `BigUint64Array`, value ranges from 0 to 2 to the 64 minus 1

Since ES2015, we have new iterable object types. They are `Map`, `Set`, `WeakMap`, `WeakSet`. `Set` and `WeakSet` represent sets of objects, and `Map` and `WeakMap` represent objects with a list of key-value pairs. `Map` keys can be iterated over, but`WeakMap`’s keys cannot be.

* * *

JSON
====

JSON is a data serialization format that resembles JavaScript objects. They can contain plain data, which means that functions and other kinds of dynamic code aren’t valid in JSON. JSON is frequently used for sending and receiving data for HTTP requests.

* * *

The Typeof Operator
===================

With the `typeof` operator, we can determine the type of a variable or a given value.

* * *

JavaScript data types are for classifying data stored in memory into different types. We have numbers and BigInts to store numbers large and small. Also, we have strings to store data. To store more complex data, we can use objects to store things like lists in array objects and maps for key-value pairs. Objects themselves also consist of key-value pairs. In recent versions of JavaScript, we also have Typed Arrays to store binary data with different ranges of values. To transmit and receive data, we can use JSON. Finally, we can use the `typeof` operator to determine the data type of your variable or value.