Micheal England

ES6 Destructure Examples

December 01, 2019

Simple Examples of Destructuring in Javascript

Before going to far, let’s talk about what destructuring is. Destructuring is the process of taking data and extracting the data in simpler peices such as variables.

Destructuring Objects

Let’s take a simple object and destructure it.

// Example object.
const person = {
	fName: 'Micheal',
	lName: 'England',
	age: '28',
}

// Extracting data one at a time.
firstName = person.firstName;
lastName = person.lName;
currentAge = person.age;

// Extract more data with less code.
const { fName, lName, age } = person;

console.log( fName );
console.log( lName );
console.log( age );

Destructuring Functions

In this example we’re destructuring a function that returns an object.

// Example function that returns an object.
function createMotorcycle() {
	return {
		engine: '107 Cubic Inch',
		frame: 'touring',
		style: 'cruiser',
	}
}

// Extracting data one at a time.
const motorcycleEngine = createMotorcycle().engine;
const motorcycleFrame = createMotorcycle().frame;
const motorcycleStyle = createMotorcycle().style;

// Extract more data with less code.
const { engine, frame, style } = createMotorcycle();

console.log( engine );
console.log( frame );
console.log( style );

Destructuring Arrays

Just like functions and objects destructuring arrays is handled the in the same manner.

console.log( 'Array Destructuring:' );
const  myArray = ['puppies', 'kittens', 'zombies'];

// You can destructure a array like this...
const firstIndex = myArray[1];
const secondIndex = myArray[2];
const thirdIndex = myArray[3];

// Extract more data with less code.
const [puppies, kittens, zombies] = myArray;

console.log( puppies );
console.log( kittens );
console.log( zombies );

Assigning new variables

Let’s take this one step further and assign new variables to values. During each of the exercises above, the variables all match the original property or index names.

Destructured object with new variables:

const colorPalette = {
	exampleOne: 'Red',
	exampleTwo: 'Orange',
	exampleThree: 'Yellow',
}

// Assigning new variables.
const { exmapleOne: 'red', exampleTwo: 'orange', exampleThree: 'yellow' } = colorPalette;

console.log( red );
console.log( orange );
console.log( yellow );

Destructured function with new variables:

function colorPalette() {
	return {
		exampleOne: 'Red',
		exampleTwo: 'Orange',
		exampleThree: 'Yellow',
	}
}

// Assigning new variables.
const { exmapleOne: 'red', exampleTwo: 'orange', exampleThree: 'yellow' } = colorPalette();

console.log( red );
console.log( orange );
console.log( yellow );

Destructured array with new variables:

const colorPalette = [
	exampleOne: 'Red',
	exampleTwo: 'Orange',
	exampleThree: 'Yellow',
];

// Assigning new variables.
const [ exmapleOne: 'red', exampleTwo: 'orange', exampleThree: 'yellow' ] = colorPalette;

console.log( red );
console.log( orange );
console.log( yellow );

Written by Micheal England.

© 2020 Mike England, Built with Gatsby