What is destructuring?

JavaScriptJunior~1 min read

A simple definition

Destructuring is a way to extract data from arrays and objects concisely and elegantly, without extra code.

Example with an object

Before ES6:

javascript

const user = { name: 'Alex', age: 25 };
const name = user.name;
const age = user.age;

console.log(name, age); // Alex 25

With ES6:

javascript

const user = { name: 'Alex', age: 25 };
const { name, age } = user;

console.log(name, age); // Alex 25

Now name and age are automatically created as variables with the same names as the object's properties.

Object destructuring - capabilities

1. Extracting only the properties you need

javascript

const { name } = user;
console.log(name); // Alex

2. Renaming variables

javascript

const { name: userName, age: userAge } = user;
console.log(userName, userAge); // Alex 25

3. Default values

javascript

const { city = 'Paris' } = user;
console.log(city); // Paris

4. Nested objects

javascript

const user = {
  name: 'Alex',
  address: { city: 'Paris', zip: 12345 }
};

const { address: { city, zip } } = user;
console.log(city, zip); // Paris 12345

Array destructuring

Example:

javascript

const arr = [10, 20, 30];
const [a, b, c] = arr;

console.log(a, b, c); // 10 20 30

1. Skipping elements:

javascript

const [first, , third] = [1, 2, 3];
console.log(first, third); // 1 3

2. Default values:

javascript

const [x = 0, y = 0, z = 0] = [5, 10];
console.log(x, y, z); // 5 10 0

3. The rest operator:

javascript

const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]

Mixed destructuring

You can combine objects and arrays:

javascript

const user = {
  name: 'Tim',
  hobbies: ['music', 'coding'],
  address: { city: 'Berlin' }
};

const {
  name,
  hobbies: [firstHobby],
  address: { city }
} = user;

console.log(name, firstHobby, city); // Tim music Berlin

Destructuring in functions

1. Passing an object as an argument:

javascript

function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age}.`);
}

greet({ name: 'Alex', age: 25 }); // Hello, Alex! You are 25.

2. Default values:

javascript

function connect({ host = 'localhost', port = 3000 } = {}) {
  console.log(`Connecting to ${host}:${port}`);
}

connect(); // Connecting to localhost:3000

Destructuring returned data

javascript

function getUser() {
  return { name: 'Alex', age: 25 };
}

const { name, age } = getUser();
console.log(name, age); // Alex 25

Why destructuring is useful

Benefit	Explanation
Short, clean code	Fewer repeats of `obj.prop`
Convenient handling of function arguments	No need to pass a pile of parameters
Flexibility	You can set default values, rename, skip
Commonly used in React	For example: `const { user, loading } = useAuth();`

Quick summary

Type	Syntax	Example
Object	`{ prop1, prop2 } = obj`	`const { name, age } = user;`
Array	`[a, b] = arr`	`const [x, y] = [10, 20];`
Nested	`{ nested: { prop } } = obj`	`const { info: { id } } = data;`
Rest	`{ a, ...rest } = obj` / `[a, ...rest] = arr`	-
Default	`{ prop = value }` / `[x = 0]`	-

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.