# Objects - Introduction to Javascript Data Types - Part 2 🚗

📙 This article is part of the [Javascript Deep Dive](https://alexzaharia.com/series/javascript-deep-dive) series.

Check out the first part: [Primitives: Introduction to Javascript Data Types - Part 1 🐥](https://alexzaharia.com/primitives-introduction-to-javascript-data-types-part-1)

---

# Objects 🚗

Everything that's not a primitive is an object in Javascript. 

```jsx
> typeof {x:1}
'object'
```

They are versatile and can store complex values.

Usually, in Computer Science, an object is an instance of a class. Javascript since ECMAScript 6 also has classes, but objects can be used without classes as well.

Objects are mutable, meaning that you can change their value.

## Properties 🌶

In Javascript, objects can be seen as a collection of properties. 

A property is identified by a key. The key is either a `String` or a `Symbol`.

Property values can be anything, a primitive or an other object. This allows the creation of complex structures.

By default a typical Javascript object inherits properties from the base javascript `Object` class and the methods from `Object.prototype`. The `Object.prototype` is initially empty but can be modified. After modifying, every new object will inherit the properties specified in the prototype.

## Types of Objects 🌲

Altough when using `typeof` for anything other than primitives you will get `object` as the type, we can introduce a classification for them by their use case and functionalty.

### Normal 🙂

Normal objects are simple key → value pairs.

```jsx
var a = {x:1, y:2};
> console.log(a)
{ x: 1, y: 2 }
```

They are actually a natural fit for [Hash maps](https://en.wikipedia.org/wiki/Hash_table).

### Functions ⛏

Functions in Javascript are regular objects with the capability of being **callable**. 

```jsx
// A function that returns the sum of two variables
function sum(a, b) { // It has two parameters: a and b
	return a + b; 
}

> sum(2,3) // Calling the sum function with two arguments: a=2, b=3
5
```

An interesting thing is that when using `typeof` you will get the `function` type. 

```jsx
> typeof sum
'function'
```

The [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof#description) specifies that `function` is an object that implements the [[Call]] attribute (*Function object (implements [[Call]] in ECMA-262 terms))*

More info about functions can be found [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions).

### Date 📆

You can work with dates and times using the [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.

```jsx
> var date = new Date();
> date
2021-09-26T11:45:07.273Z

> typeof date
'object'
```

### Arrays (Indexed Collections) 👈

Arrays are data structures that hold collections of items. They are basically list of elements.

An array is indexed, which means each element has an index associated with it and you can access the element using that index.

```jsx
var arr = [10,20,30]; // An array with 3 elements. Indexes are from 0 to 2
> arr[0]
10
> arr[1]
20
> arr[2]
30
> arr[3]
undefined
```

You can create an array using the square brackets `[ ]` or using the `Array` class.

Javascript has some helper classes to simulate typed number arrays: `Int8Array`, `Uint8Array`, `Int16Array`, `Float32Array` and [more](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays).

More info about arrays can be found [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).

### Keyed Collections 🔑

A keyed collection holds elements in which each one has associated a key to it. You can access the element using the key.

Such collections are: `Map` and `Set`.

#### Map

`Map` is a collection of key → value pairs. It is an implementation of a hash table in Javascript. It's the successor of the classical curly bracket object used as a hash map. 

```jsx
// Old school
let a = {x:1};
// New school
let a = new Map();
a.set('x', 1);
```

The old school way will convert any key to `String` before storing the association. 

The new way allows any type of keys, even objects.

The main functions are `.set()` and `.get().`

```jsx
> var old = {};
> var key = {a:1}; // A key of type object
> old[key] = 10
10
> old
{ '[object Object]': 10 } // Key gets converted to string
> var otherKey = {b:1}
> old[otherKey] = 20
20
> old
{ '[object Object]': 20 } // The other key got converted to the same string => overwrite

> var neww = new Map();
> neww.set(key, 10);
Map(1) { { a: 1 } => 10 } // Key remains object
> neww.set(otherKey, 20);
Map(2) { { a: 1 } => 10, { b: 1 } => 20 } // The association works as expected
```

`Map` remembers the original order of insertion.

The type is `object`.

```jsx
> typeof neww
'object'
```

More info about arrays can be found [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map).

See also [WeakMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap).

#### Set

`Set` is a collection of unique items. You can add an item to the `Set` **only once**. 

The main functions are `.add()`, `.has()`, `.delete()`.

```jsx
> set.add(1);
Set(1) { 1 }
> set.add(1);
Set(1) { 1 }
> set.add(2);
Set(2) { 1, 2 }
> set.add("abc");
Set(3) { 1, 2, 'abc' }
> set.add("abc");
Set(3) { 1, 2, 'abc' }
```

`Set` remembers the original order of insertion.

The type is `object`.

```jsx
> typeof set
'object'
```

More info about arrays can be found [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).

See also [WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet).

### JSON 👱‍♂️

`JSON` or Javascript Object Notation is a data interchange format. It's easy to read and to work with.

```jsx
let json = {
	"a": 1,
	"b": "xyz",
	"c": ["one", "two"]
}
```

The type is `object`.

```jsx
> typeof json
'object'
```

You can use the `JSON` built-in object to work with JSON related data.

The main functions are `.parse()` and `.stringify()`.

More info [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON).

### Standard Built In Objects

You can check the full list of the Javascript built-in classes and objects here: [MDN Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects).

## Sources 📚

- [JavaScript data types and data structures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)
- [Javascript Interview Questions](https://www.interviewbit.com/javascript-interview-questions/)

## Reach Out 👋

Was this helpful for you? Let me know what you think in the comments.

You can find me on [Twitter](https://twitter.com/alexzaharia0) and  [Github](https://github.com/alexzaharia24)