Intro to Destructuring

Learning Goals

• Implement destructuring on arrays and objects

Vocabulary

• Destructuring is a feature introduced with ES6. A feature that enables you to break down a structure, like an array or object, and store its components in variables.

• Array destructuring is a javascript expression that reduces arrays to smaller atoms where the contents of the array can be easily accessed and referenced by variables. The reduction may only be to 1 level or to the least level (depending on the depth of the array and how far you want to destructure it).

• Object destructuring is a feature in JavaScript that allows you to extract values from objects and assign them to variables in a more concise and convenient way. Even better, object destructuring can extract multiple properties in a single statement, can access properties from nested objects, and can set a default value if the property doesn’t exist.

• The spread operator is a new addition to the set of operators in JavaScript ES6. It takes in an iterable (e.g an array) and expands it into individual elements.

Starting with Array Destructuring

const colors = ["Red","Pink","Blue","Black"] //Array to be destructured

const [color1, color2] = colors //Destructuring

console.log(color1)
console.log(color2)

const colors = ["Red","Pink","Blue","Black"] //Array to be destructured

const [,color1,, color2] = colors //Focus on the use of extra commas to skip through elements

console.log(color1)
console.log(color2)

const colors = ["Red","Pink","Blue","Black"] //Array to be destructured

const [color1, ...others] = colors //Focus on the use of ... to assign remaining elements to an array

console.log(color1)
console.log(others)

Why do we use destructuring?

Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals. This syntax can offer more clarity than the traditional way of accessing values by their index.

Without destructuring assignment, you might access the first three items in an array like this:

const first = bigArr[0];
const second = bigArr[1];
const third = bigArr[2];

const bigArr = ["number", 4,5,6]
const [ important, ...secondArr ] = bigArr;
console.log(important, secondArr)

Object Destructuring

The right side of the statement contains the Javascript object that we want to split into variables; the left side contains a “pattern” for corresponding properties of the object. This “pattern” is usually a list of variable names.

const user = { // Object we want to destructure
  firstName: 'Jon',
  lastName: 'Doe',
  dateOfBirth: '1990'
};

// Destructuring the object into our variables
const { firstName, lastName, dateOfBirth } = user;
console.log( firstName, lastName, dateOfBirth);

const firstName = user.firstName;
const lastName = user.lastName;
console.log(firstName);
console.log(lastName);

const user = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zipCode: "12345"
  },
  contact: {
    emailAddress: "john.doe@example.com",
    phone: "555-123-4567"
  },
  preferences: {
    theme: "dark",
    language: "en",
    notifications: {
      email: true,
      sms: false
    }
  }
};

Assigning to a variable with default:

We can also assign default values to variables whose keys may not exist in the object we want to destructure. This will prevent our variable from having an undefined value being assigned to it. Let’s take a look at an example!

const newspaperArticles = [
  {
    name: "COVID-19 Vaccines Rollout",
    tags: ["COVID-19", "vaccine", "pandemic"],
    imageUrl: "https://example.com/covid-vaccine.jpg"
  },
  {
    name: "Climate Change Summit",
    tags: ["climate change", "environment", "summit"],
    imageUrl: undefined
  },
  {
    name: "Economic Recovery Strategies",
    tags: ["economy", "recovery", "pandemic"],
    imageUrl: undefined
  },
  {
    name: "Space Exploration Milestone",
    tags: ["space exploration", "NASA", "satellite"],
    imageUrl: "https://example.com/space-exploration.jpg"
  }
];

// Our goal is to iterate through this array of newspaper articles and display them on a page:
// Note the logs and how some image URLs are missing a path.
newspaperArticles.forEach(newspaper => {
  const { name, description, tags, imageUrl } = newspaper;
  console.log(imageUrl);
  section.innerHTML += // Insert articles here
})

// Let's update this so that we have a default image if no image URL is given 

newspaperArticles.forEach(newspaper => {
  const { name, description, tags, imageUrl = './images/no-image.svg' } = newspaper;
  console.log(imageUrl);
  section.innerHTML += // Insert articles here
})

Passing an object as an argument:

What if you want to destructuring an object as an argument?

const user = { // Object we want to destructure
  firstName: 'Jon',
  lastName: 'Doe',
  dateOfBirth: '1990'
};

const logUser = ({ firstName, lastName, dateOfBirth }) => {
  console.log(firstName)
  console.log(lastName)
  console.log(dateOfBirth)
}

logUser(user)

Additional Resources

• MDN: Destructuring Assignment
• MDN: Spread operator