# Mastering JavaScript: Data Structures

## Keyed Collections

### Map

#### Overview

A `Map` object holds key-value pairs where keys can be of any type. Unlike objects, Maps maintain the insertion order of their elements.

#### Creating a Map

To create a new Map, use the `Map` constructor:

```javascript
const map = new Map();
```

#### Adding and Accessing Elements

You can add key-value pairs using the `set` method and retrieve them with the `get` method:

```javascript
map.set('name', 'John');
map.set(1, 'one');
map.set(true, 'boolean');
```

To access values:

```javascript
console.log(map.get('name')); // Output: John
console.log(map.get(1)); // Output: one
console.log(map.get(true)); // Output: boolean
```

#### Iterating Over Maps

Maps can be iterated using `forEach`, `for...of`, or the `forEach` loop:

```javascript
// Using forEach
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// Using for...of
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
```

#### Properties and Methods

* **Size**: Returns the number of elements.
    
    ```javascript
    console.log(map.size); // Output: 3
    ```
    
* **has()**: Checks if a key exists.
    
    ```javascript
    console.log(map.has('name')); // Output: true
    ```
    
* **delete()**: Removes a specific key-value pair.
    
    ```javascript
    map.delete('name');
    console.log(map.has('name')); // Output: false
    ```
    
* **clear()**: Removes all key-value pairs.
    
    ```javascript
    map.clear();
    console.log(map.size); // Output: 0
    ```
    

#### Use Case Example

Maps are ideal for storing key-value pairs with keys of any type and maintaining insertion order.

```javascript
const studentScores = new Map();
studentScores.set('Alice', 85);
studentScores.set('Bob', 92);
studentScores.set('Charlie', 78);

studentScores.forEach((score, name) => {
  console.log(`${name}: ${score}`);
});
```

### WeakMap

#### Overview

A `WeakMap` is similar to a `Map`, but its keys must be objects and it allows garbage collection of keys when they are no longer referenced elsewhere.

#### Creating a WeakMap

```javascript
const weakMap = new WeakMap();
```

#### Adding and Accessing Elements

```javascript
const obj = { id: 1 };
weakMap.set(obj, 'value');

console.log(weakMap.get(obj)); // Output: value
```

#### Properties and Methods

* **has()**: Checks if a key exists.
    
    ```javascript
    console.log(weakMap.has(obj)); // Output: true
    ```
    
* **delete()**: Removes a key-value pair.
    
    ```javascript
    weakMap.delete(obj);
    console.log(weakMap.has(obj)); // Output: false
    ```
    

#### Use Case Example

WeakMaps are useful for storing private data for objects, allowing the object to be garbage collected when no longer needed.

```javascript
const userData = new WeakMap();

function createUser(id, name) {
  const user = { id, name };
  userData.set(user, { age: 25, email: 'user@example.com' });
  return user;
}

const user = createUser(1, 'John Doe');
console.log(userData.get(user)); // Output: { age: 25, email: 'user@example.com' }
```

![Weakening Your Maps - an experiment](https://zacharybabtkis.com/img/posts/weakmaps/feature.png align="center")

### Set

#### Overview

A `Set` object lets you store unique values of any type, whether primitive values or object references.

#### Creating a Set

```javascript
const set = new Set();
```

#### Adding and Accessing Elements

```javascript
set.add('apple');
set.add('banana');
set.add('cherry');
```

To check if a value exists:

```javascript
console.log(set.has('banana')); // Output: true
```

#### Iterating Over Sets

Sets can be iterated using `forEach`, `for...of`, or the `forEach` loop:

```javascript
// Using forEach
set.forEach(value => {
  console.log(value);
});

// Using for...of
for (const value of set) {
  console.log(value);
}
```

#### Properties and Methods

* **Size**: Returns the number of elements.
    
    ```javascript
    console.log(set.size); // Output: 3
    ```
    
* **delete()**: Removes a specific element.
    
    ```javascript
    set.delete('banana');
    console.log(set.has('banana')); // Output: false
    ```
    
* **clear()**: Removes all elements.
    
    ```javascript
    set.clear();
    console.log(set.size); // Output: 0
    ```
    

#### Use Case Example

Sets are perfect for storing a collection of unique items.

```javascript
const uniqueIds = new Set([1, 2, 3, 4, 5]);
uniqueIds.add(6);
uniqueIds.delete(2);
uniqueIds.forEach(id => console.log(id));
```

---

## Indexed Collections

### Typed Arrays

#### Overview

Typed Arrays are array-like objects that provide efficient access to raw binary data in memory.

#### Creating a Typed Array

To create a Typed Array, specify the type of elements it will hold, such as `Int8Array`, `Uint8Array`, `Float32Array`, etc.:

```javascript
const intArray = new Int8Array(4); // Creates an array of 4 8-bit signed integers
const floatArray = new Float32Array([1.5, 2.3, 3.1]); // Creates an array from an array-like object
```

#### Accessing and Modifying Elements

Typed Arrays allow direct access to their elements for reading and writing:

```javascript
intArray[0] = 42;
console.log(intArray[0]); // Output: 42
```

#### Properties and Methods

* **length**: Returns the number of elements.
    
    ```javascript
    console.log(intArray.length); // Output: 4
    ```
    
* **buffer**: Returns the ArrayBuffer associated with the Typed Array.
    
    ```javascript
    const buffer = intArray.buffer;
    ```
    
* **slice()**: Returns a shallow copy of a portion of the Typed Array into a new Typed Array object.
    
    ```javascript
    const subArray = floatArray.slice(1, 2); // Copies the element at index 1
    ```
    

#### Use Case Example

Typed Arrays are ideal for scenarios requiring efficient manipulation of binary data, such as image processing.

```javascript
const data = new Uint8Array([10, 20, 30, 40]);
data.forEach(value => console.log(value));
```

### Arrays

#### Overview

Arrays in JavaScript are a versatile data structure for storing elements indexed by integers.

#### Creating an Array

You can create an array using array literals or the `Array` constructor:

```javascript
const fruits = ['apple', 'banana', 'cherry'];
const numbers = new Array(1, 2, 3, 4, 5);
```

#### Accessing and Modifying Elements

Arrays support random access to elements using index notation:

```javascript
console.log(fruits[0]); // Output: apple
fruits[1] = 'pear';
console.log(fruits); // Output: ['apple', 'pear', 'cherry']
```

#### Iterating Over Arrays

Arrays can be iterated using `forEach`, `for...of`, or traditional loops:

```javascript
// Using forEach
fruits.forEach(fruit => console.log(fruit));

// Using for...of
for (const fruit of fruits) {
  console.log(fruit);
}
```

#### Properties and Methods

* **length**: Returns the number of elements in the array.
    
    ```javascript
    console.log(numbers.length); // Output: 5
    ```
    
* **push()**: Adds one or more elements to the end of the array.
    
    ```javascript
    numbers.push(6);
    console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]
    ```
    
* **pop()**: Removes the last element from the array and returns it.
    
    ```javascript
    const lastElement = numbers.pop();
    console.log(lastElement); // Output: 6
    ```
    

#### Use Case Example

Arrays are widely used in JavaScript for managing collections of data.

```javascript
const shoppingList = ['milk', 'eggs', 'bread'];
shoppingList.push('cheese');
shoppingList.forEach(item => console.log(item));
```

![Chad Javascript – ProgrammerHumor.io](https://programmerhumor.io/wp-content/uploads/2023/04/programmerhumor-io-java-memes-javascript-memes-0f24c47f3a34e2a.jpg align="center")

---

## Structured Data - JSON

### JSON Overview

#### What is JSON?

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate. It is based on JavaScript object syntax but is independent of any programming language.

#### JSON Syntax

JSON data is formatted as key-value pairs, similar to JavaScript object literals:

```json
{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science", "History"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}
```

* **Objects**: Enclosed in curly braces `{}`, with key-value pairs separated by commas.
    
* **Arrays**: Ordered lists of values enclosed in square brackets `[]`.
    
* **Values**: Strings in double quotes, numbers, booleans (`true` or `false`), arrays, objects, or `null`.
    

#### Example JSON Data

Here’s an example of JSON representing information about a person:

```json
{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science", "History"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}
```

### JSON Methods and Operations

#### Parsing JSON

In JavaScript, you can parse JSON strings into JavaScript objects using `JSON.parse()`:

```javascript
const jsonString = '{"name":"John Doe","age":30,"isStudent":false}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // Output: John Doe
```

#### Stringifying Objects

Conversely, JavaScript objects can be converted to JSON strings using `JSON.stringify()`:

```javascript
const person = {
  name: "Jane Smith",
  age: 25,
  isStudent: true,
  courses: ["English", "Art"],
  address: {
    street: "456 Elm St",
    city: "Smalltown"
  }
};

const jsonStr = JSON.stringify(person);
console.log(jsonStr);
```

#### Handling JSON Errors

Parsing JSON can throw errors if the JSON is malformed. Handle errors using `try...catch`:

```javascript
const invalidJsonString = '{name:"John Doe"}';

try {
  const obj = JSON.parse(invalidJsonString);
  console.log(obj);
} catch (error) {
  console.error('Invalid JSON:', error.message);
}
```

### Use Cases for JSON

#### Data Exchange

JSON is widely used for transmitting data between a server and a web application due to its lightweight nature.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1722094657989/0d9ba05a-41d9-4645-b07e-8f566febea96.png align="center")

#### Configuration Files

JSON is used for configuration files because of its human-readable and easy-to-edit format.

#### Storing Complex Data

JSON is suitable for storing complex data structures such as nested objects and arrays.

```javascript
const config = {
  "server": {
    "host": "example.com",
    "port": 8080,
    "protocol": "https"
  },
  "features": ["search", "analytics"]
};
```

## Conclusion

Understanding JavaScript collections such as Maps, Sets, and WeakMaps provides essential tools for managing data efficiently in your applications. Each collection type offers distinct advantages, whether you need key-value pairs with Maps, unique values with Sets, or private object data with WeakMaps. These collections empower you to handle diverse data structures effectively, ensuring optimal performance and flexibility in your JavaScript projects.

As you continue your journey in mastering JavaScript, our next article will delve into value comparisons. We'll explore the nuances of operators like `==`, `===`, and [`Object.is`](http://Object.is), as well as equality algorithms such as `isLooselyEqual`, `isStrictlyEqual`, `SameValueZero`, and `SameValue`. Understanding these concepts is crucial for writing reliable and predictable JavaScript code. Stay tuned!

%%[bmc-singhlify]