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

Warm Up

In your notebooks write what do you think these logs will return?

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

const [color1, color2] = colors //Destructuring

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

The Answer

This is what happen in the code above. Destructuring-array

A few more scenarios

Let’s now see a few techniques to use array destructuring efficiently. In breakout groups, predict what the console.logs with give, run it, and then discuss the difference between these two examples.

Example 1:

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)

Example2:

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)

The Answer

Assigning an Array to a variable

Destructuring-comp Destructuring-comp

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];

Review

Return to your notebooks and write what do you think this logs will return?

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.

Warm Up

In breakout rooms, write what you think will be logged?

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);

After running it, write what do you think the above code would look like in ES5?

Breaking This Down Further

Destructuring-comp

In a destructuring expression L = R, we take the right value R, and break it down so that the new variables in L can be assigned a value. The variable names on the left side must match the property names on the right.

In ES5, this would look like:

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

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. The code below demonstrates this:

const user = {// Object we want to destructure
  firstName: 'Jon',
  lastName: 'Doe',
  dateOfBirth: '1990'
};
// Destructuring the object into variables without 
// assigning default values 

let { firstName, lastName, country } = user;
console.log("Without setting default values")
console.log( firstName, lastName, country);

// Destructuring the object into variables by 
// assigning default values 

let { firstName = 'default firstName', 
  lastName = 'default lastName', 
  country = 'default country' } = user;
console.log("After setting default values")
console.log( firstName, lastName, country);

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)

Exit Ticket

  • How do we destructuring an object?
  • How do we destructuring an object?
  • How do we use spread operator?

Additional Resources

Lesson Search Results

Showing top 10 results