# 0.4.5: Destructuring and Spread Operator

## Learning Objectives

1. What the destructuring and spread operators are and how to use them

## Introduction

ES6 Destructuring and Spread Operators provide more convenient syntax for extracting variables from and making copies of arrays and JS Objects.

## Destructuring Assignment

Assign array or object properties to new variables.

### Example: Array destructuring syntax

Assign and name variables according to their **position** in an array.

```javascript
const row = ["X", "O", "X"];
const [left, center] = row;
console.log(left); // Output 'X'
console.log(center); // Output 'O'
```

### Example: Object destructuring syntax

Assign and name variables according to their **key** in an object.

```javascript
const user = { name: "kai" };
const { name } = user; // Create a new variable called name
console.log(name); // Output 'kai'
```

### Example: Return Multiple Values from Functions

Occasionally we may need to return multiple values from a function. If we wrap those values in an object, we can use ES6 destructuring to re-initialise those values as local variables in the parent function. ES6 named imports work the same way.

```javascript
const conversions = (temperatureInFahrenheit) => {
  let temperatureInCelcius = 123; // calculation goes here
  let temperatureInKelvin = 456; // calculation goes here

  return {
    kelvin: temperatureInKelvin,
    celcius: temperatureInCelcius,
  };
};

const { kelvin, celcius } = conversions(20);
console.log(kelvin);
console.log(celcius);
```

### Example: Import Multiple Named Exports

ES6 `import` uses object destructuring to initialise variables for imported functions.

Given this file that exports 3 named functions...

{% code title="tempConversion.js" %}

```javascript
export const kilometersToMiles = (kilometers) => {
  /* ... */
};
export const celciusToFahrenheit = (temperatureCelcius) => {
  /* ... */
};
export const kilogramsToPounds = (kilograms) => {
  /* ... */
};
```

{% endcode %}

... we can import those functions using named imports in a client module.

{% code title="index.js" %}

```javascript
import {
  kilometersToMiles,
  celciusToFahrenheit,
  kilgramsToPounds,
} from "./temperatureConversion.js";

console.log(kilometersToMiles(3));
console.log(celciusToFahrenheit(3));
console.log(kilogramsToPounds(3));
```

{% endcode %}

## Spread Operator

Return a [shallow copy](https://medium.com/@manjuladube/understanding-deep-and-shallow-copy-in-javascript-13438bad941c#:~:text=Shallow%20copy%20is%20a%20bit,the%20memory%20address%20is%20copied.) of the elements or key-value pairs inside an array or object respectively.

### Example: Make Shallow Copy of Array

As we may have seen, assigning an array to a new variable creates a new reference to the original array, and does NOT make a copy of the original array.

```javascript
const temperatures = [23, 12, 45];
const temperaturesCopy = temperatures; // New var is reference to temperatures.
temperatureCopy.pop(); // This mutates the original temperatures array.
```

Spread operator syntax inside a new array declared with `[]` makes a shallow copy of the original array. The same syntax works for objects.

```javascript
const temperatures = [23, 12, 45];
const temperaturesCopy = [...temperatures]; // Make shallow copy of temperatures.
temperatureCopy.pop(); // This does NOT mutate the original temperatures array.
```

{% hint style="info" %}
**Shallow vs deep copy**

Shallow copies of arrays and objects are different from deep copies. A shallow copy is a new copy of values 1 level deep. A deep copy is a new copy of values no matter how many levels deep. Read more on shallow and deep copies in [this tutorial](https://www.javascripttutorial.net/object/3-ways-to-copy-objects-in-javascript/).
{% endhint %}

### Example: Concatenate Arrays

We can combine multiple arrays using the spread operator as below.

```javascript
const names = ["susan chan", "garfield"];
const names2 = ["alex", "chee kean"];
const combinedArray = [...names, ...names2]; // has all four elements inside
```

### Example: Concatenate Objects

Similarly, we can merge the contents of 2 objects using the spread operator as below.

```javascript
const userData = { name: "kai" };
const userData2 = { height: 6 };
const combinedUserData = { ...userData, ...userData2 }; // has both keys inside
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bc.rocketacademy.co/0-foundations/0.4-javascript/0.4.5-destructuring-and-spread-operator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.