Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Destructuring Assignment
  • Example: Array destructuring syntax
  • Example: Object destructuring syntax
  • Example: Return Multiple Values from Functions
  • Example: Import Multiple Named Exports
  • Spread Operator
  • Example: Make Shallow Copy of Array
  • Example: Concatenate Arrays
  • Example: Concatenate Objects
  1. 0: Foundations
  2. 0.4: JavaScript

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.

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.

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.

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

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

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

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

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

Spread Operator

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.

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.

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

Shallow vs deep copy

Example: Concatenate Arrays

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

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.

const userData = { name: "kai" };
const userData2 = { height: 6 };
const combinedUserData = { ...userData, ...userData2 }; // has both keys inside
Previous0.4.4: ClassesNext0.4.6: Promises

Last updated 1 year ago

Return a of the elements or key-value pairs inside an array or object respectively.

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 .

🪨
shallow copy
this tutorial