Object and Array Destructuring in JavaScript ES6
Published
•3 min read
A
Experienced mobile app developer who has a track record of success creating apps that are both well-received and commercially viable. Skilled with working as a team and incorporating input into projects. Ability to always look for ways to improve upon an already existing app to keep people downloading it and enjoying it. Strong eye for detail and tenacity to never quit on something until it is absolutely perfect.
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
