DEV Community

Cover image for Object and Array Destructuring in JavaScript ES6
Anas Nabil
Anas Nabil

Posted on • Updated on

Object and Array Destructuring in JavaScript ES6

#javascript #tutorial #beginners #programming

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode 
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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode 
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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Latest comments (0)

Read next

bytehide profile image

How to Use Intellicode in Visual Studio

ByteHide -

spiff profile image

Crafting an Image to PDF Converter App Using Python

Ebikara Dandeson Spiff -

mrkandreev profile image

How to create Unit tests for code design?

Mark Andreev -

ticha profile image

How to add two numbers in JavaScript without using the "+" operator?

Ticha Godwill Nji -