Back to course

Destructuring Arrays and Objects

JavaScript: The Complete '0 to Hero' Beginner Course

92. Destructuring (ES6)

Destructuring assignment is a powerful syntax that allows you to unpack values from arrays or properties from objects into distinct variables in a concise way.

1. Object Destructuring

Extracts properties based on their key name.

javascript const user = { username: 'maximus', id: 45, email: 'm@dev.com' };

// Instead of: // const username = user.username; // const email = user.email;

// Destructuring: const { username, email } = user; console.log(username); // maximus console.log(email); // m@dev.com

// You can also rename variables during destructuring: const { username: accountName, id } = user; console.log(accountName); // maximus

2. Array Destructuring

Extracts elements based on their position/index.

javascript const rgb = [255, 0, 100];

// The variables are matched by position const [red, green, blue] = rgb; console.log(green); // 0

// You can skip elements with a comma const [first, , third] = [1, 2, 3]; console.log(third); // 3