Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 30, 2022 06:04 pm GMT

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

Original Link: https://dev.to/anasnmu/object-and-array-destructuring-in-javascript-es6-7lh

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To