30 Days Of JavaScript

Day 29: Mopping up

Lesson 3: Destructuring

Destructuring

JavaScript has a handy feature called destructuring. I've avoided introducing you to it so far, as it takes a little getting used to.

Let's start with the easier one.

Let's say you have an object and you want to access all the properties of it.

<h1>Hello World<h1>

<h1>Hello World<h1>

const pokemon = {name: "Pikachu", hp: 35, attack: 55, defense: 40, specialA: 50, specialD: 50, speed: 90};

const description = `${pokemon.name} is a pokemon with ${pokemon.hp} HP, ${pokemon.attack} attack, ${pokemon.defense} defense, ${pokemon.specialA} special attack, ${pokemon.specialD} special defense and ${pokemon.speed} speed`;
console.log(description);

const pokemon = {name: "Pikachu", hp: 35, attack: 55, defense: 40, specialA: 50, specialD: 50, speed: 90};

const description = `${pokemon.name} is a pokemon with ${pokemon.hp} HP, ${pokemon.attack} attack, ${pokemon.defense} defense, ${pokemon.specialA} special attack, ${pokemon.specialD} special defense and ${pokemon.speed} speed`;
console.log(description);

Having to access all the properties with pokemon. isn't the worst thing but it is a little cumbersome.

Instead we can declare all of those as variable and destructure the pokemon object into the,

<h1>Hello World<h1>

<h1>Hello World<h1>

const pokemon = {name: "Pikachu", hp: 35, attack: 55, defense: 40, specialA: 50, specialD: 50, speed: 90};

const { name, hp, attack, defense, specialA, specialD, speed} = pokemon;

const description = `${name} is a pokemon with ${hp} HP, ${attack} attack, ${defense} defense, ${specialA} special attack, ${specialD} special defense and ${speed} speed`;
console.log(description);

const pokemon = {name: "Pikachu", hp: 35, attack: 55, defense: 40, specialA: 50, specialD: 50, speed: 90};

const { name, hp, attack, defense, specialA, specialD, speed} = pokemon;

const description = `${name} is a pokemon with ${hp} HP, ${attack} attack, ${defense} defense, ${specialA} special attack, ${specialD} special defense and ${speed} speed`;
console.log(description);

This might not seem like the biggest win in this tiny example but trust me it's really handy.

You also don't need to grab all the properties, just the ones you want.

<h1>Hello World<h1>

<h1>Hello World<h1>

const pokemon = {name: "Pikachu", hp: 35, attack: 55, defense: 40, specialA: 50, specialD: 50, speed: 90};

const { name, speed} = pokemon;

const description = `${name} is a pokemon with ${speed} speed`;
console.log(description);

const pokemon = {name: "Pikachu", hp: 35, attack: 55, defense: 40, specialA: 50, specialD: 50, speed: 90};

const { name, speed} = pokemon;

const description = `${name} is a pokemon with ${speed} speed`;
console.log(description);

The names on your destructuring must match the name of the property in the object.

You can also do this with arrays as well, here the position is what matters and you can call them whatever you like.

<h1>Hello World<h1>

<h1>Hello World<h1>

const pokemon = [35, 55, 40, 50, 50, 90];

const [hp, attack, defense, specialA, specialD, speed] = pokemon;

const question = `Which Pokemon has ${speed} speed and ${specialA} special attack?`;
console.log(question);

const pokemon = [35, 55, 40, 50, 50, 90];

const [hp, attack, defense, specialA, specialD, speed] = pokemon;

const question = `Which Pokemon has ${speed} speed and ${specialA} special attack?`;
console.log(question);

30 Days Of JavaScript

Day 29: Mopping up

Lesson 3: Destructuring

Destructuring

Outline

Go Pro?