JavaScript Array and Object Destructing

JavaScript destructuring allows you to unpack values from arrays or properties from objects into distinct variables, which can make your code cleaner and more readable.

1. Array Destructuring

In array destructuring, you extract values from an array and assign them to variables in a convenient way. Here’s the basic syntax:

const array = [1, 2, 3];

// Destructuring
const [a, b, c] = array;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

1.1 Skipping Elements in array destrucring

You can skip elements in an array by leaving the spot empty:

const array = [1, 2, 3, 4];

// Skip the second element
const [first, , third] = array;

console.log(first); // 1
console.log(third); // 3

1.2 Default Values in array destrucring

If the array has fewer elements than expected, you can assign default values:

const array = [1];

// Set default for missing elements
const [a, b = 2] = array;

console.log(a); // 1
console.log(b); // 2

1.3 Rest operator in array destrucring

You can collect the remaining elements of the array using the rest syntax (...):

const array = [1, 2, 3, 4];

// Collect remaining elements into `rest`
const [first, second, ...rest] = array;

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

2. Object Destructuring

In object destructuring, you extract properties from an object and assign them to variables. The syntax is based on the property names.

const person = { name: 'John', age: 30 };

// Destructuring
const { name, age } = person;

console.log(name); // John
console.log(age);  // 30

2.1 Renaming Variables in object destruring

If you want to rename the variables while destructuring, you can do this:

const person = { name: 'John', age: 30 };

// Rename 'name' to 'fullName' and 'age' to 'yearsOld'
const { name: fullName, age: yearsOld } = person;

console.log(fullName);  // John
console.log(yearsOld);  // 30

Get Tejas kasare’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

2.3 Default Values in object destructuring

If an object does not have a specific property, you can assign a default value:

const person = { name: 'John' };

// Set default value for missing 'age'
const { name, age = 25 } = person;

console.log(name); // John
console.log(age);  // 25

2.4 Nested Object Destructuring

You can destructure nested objects by using a similar syntax inside the curly braces:

const person = {
  name: 'John',
  address: {
    city: 'New York',
    zip: '10001'
  }
};

// Destructuring nested object
const { name, address: { city, zip } } = person;

console.log(name);  // John
console.log(city);  // New York
console.log(zip);   // 10001

2.5 Rest Syntax in Object destructuring

The rest syntax (...) can also be used to collect the remaining properties into a new object:

const person = { name: 'John', age: 30, gender: 'male' };

// Collect remaining properties into `other`
const { name, ...other } = person;

console.log(name);   // John
console.log(other);  // { age: 30, gender: 'male' }

3. Combining Array and Object Destructuring

You can combine array and object destructuring when working with complex data structures

const data = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
];

// Destructure array of objects
const [{ name: name1, age: age1 }, { name: name2, age: age2 }] = data;

console.log(name1, age1); // John 30
console.log(name2, age2); // Jane 25

4. Function Parameters with Destructuring

Destructuring is very useful when working with function parameters, especially when passing objects or arrays.

4.1 Object Destructuring in Function Parameters

const printPersonInfo = ({ name, age }) => {
  console.log(`${name} is ${age} years old`);
};

const person = { name: 'John', age: 30 };

printPersonInfo(person); // John is 30 years old

4.2 Array Destructuring in Function Parameters

const sum = ([a, b]) => a + b;

const result = sum([5, 7]);

console.log(result); // 12

5. Conclusion

JavaScript destructuring helps you unpack values from arrays or objects in a clean and efficient way. You can:

• Destructure arrays and objects in simple or nested structures.
• Assign default values for missing properties or elements.
• Skip elements in arrays or collect the remaining items with the rest syntax.
• Rename properties while destructuring.