Object and Array Destructuring in JavaScript ES6

Destructuring Object

Default Values

const product = {
  name: 'Mac M1 256GB',
  price: 1100,
  description: 'This is a Mac M1 Chip with 256GB SSD',
  warrenty: '1 Year',
  stock: 11,
};

const { name, price, featured = false } = product;

console.log(`${name}, ${price}, ${featured}`); // Mac M1 256GB, 1100, false

Different Variable Names

const product = {
  name: 'Mac M1 256GB',
  price: 1100,
  description: 'This is a Mac M1 Chip with 256GB SSD',
  warrenty: '1 Year',
  stock: 11,
};

const { name: productName, price: productPrice, featured: isProductFeatured = false } = product;

console.log(`${productName}, ${productPrice}, ${isProductFeatured}`); // Mac M1 256GB, 1100, false

Nested Objects

const product = {
  name: 'Mac M1 256GB',
  price: 1100,
  description: 'This is a Mac M1 Chip with 256GB SSD',
  warrenty: '1 Year',
  stock: 11,
  tech: {
    os: 'iOS',
    logo: './mac_m1.png',
    production_year: '2018',
    production_country: 'USA',
  },
};

const {
  name: productName,
  tech: { os: productOS, logo: productLogo, expired = false },
} = product;

console.log(`${productName}, ${productOS}, ${productLogo}, ${expired}`); // Mac M1 256GB, iOS, ./mac_m1.png, false

const product = {
  name: 'Mac M1 256GB',
  price: 1100,
  description: 'This is a Mac M1 Chip with 256GB SSD',
  warrenty: '1 Year',
  stock: 11,
  tech: {
    os: 'iOS',
    logo: './mac_m1.png',
    production_year: '2018',
    production_country: 'USA',
  },
};

const { os: productOS, logo: productLogo, expired = false } = product.tech;

console.log(`${productOS}, ${productLogo}, ${expired}`); // iOS, ./mac_m1.png, false

Destructuring Array

Default Values

const phones = ['iPhone 8', 'Samsung S22', 'iPhone XS'];

const [firstPhone, secondPhone, thirdPhone, fourthPhone = 'Oppo Ultra Max'] = phones;

console.log(`${firstPhone}, ${secondPhone}, ${thirdPhone}, ${fourthPhone}`); // iPhone 8, Samsung S22, iPhone XS, Oppo Ultra Max

Skipping Elements

const phones = ['iPhone 8', 'Samsung S22', 'iPhone XS', 'Oppo New Release', 'iPhone 11', 'iPhone 12', 'iPhone 13'];

const [firstPhone, , thirdPhone, fourthPhone = 'Oppo Ultra Max', , , seventhPhone] = phones;

console.log(`${firstPhone}, ${thirdPhone}, ${fourthPhone}, ${seventhPhone}`); // iPhone 8, iPhone XS, Oppo New Release, iPhone 13

Nested Array

const phones = ['iPhone 8', 'Samsung S22', ['Unnamed Phone 1', 'Unnamed Phone 2', 'Unnamed Phone 3']];

const [, , [firstNestedPhone, secondNestedPhone, thirdNestedPhone]] = phones;

console.log(`${firstNestedPhone}, ${secondNestedPhone}, ${thirdNestedPhone}`); // Unnamed Phone 1, Unnamed Phone 2, Unnamed Phone 3

const phones = ['iPhone 8', 'Samsung S22', ['Unnamed Phone 1', 'Unnamed Phone 2', ['Clear Phone 1', 'Clear Phone 2']]];

const [, , [firstNestedPhone, , [firstDeepNestedPhone, secondDeepNestedPhone]]] = phones;

console.log(`${firstNestedPhone}, ${firstDeepNestedPhone}, ${secondDeepNestedPhone}`); // Unnamed Phone 1, Clear Phone 1, Clear Phone 2

Rest Parameter

const phones = ['iPhone 8', 'Samsung S22', 'iPhone XS', 'Google Pixel 6'];

const [firstPhone, ...restPhones] = phones;

console.log(`${restPhones}`); // Samsung S22,iPhone XS,Google Pixel 6

Swapping

let firstPhone = 'iPhone 13 Pro Max',
  secondPhone = 'iPhone 12 Pro Max';

[firstPhone, secondPhone] = [secondPhone, firstPhone];

console.log(`${firstPhone}, ${secondPhone}`); // iPhone 12 Pro Max, iPhone 13 Pro Max