Destructuring in javascript

//simple example with object------------------------------ let obj = {name: 'Max', age: 22, address: 'Delhi'}; const {name, age} = obj; console.log(name); //expected output: "Max" console.log(age); //expected output: 22 console.log(address); //expected output: Uncaught ReferenceError: address is not defined // simple example with array------------------------------- let a, b, rest; [a, b] = [10, 20]; console.log(a); // expected output: 10 console.log(b); // expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: Array [30,40,50]

object destructuring javascript

// destructuring object & nested object & combine object into single object
let user = {
  name: 'Mike',
  friend: ["John", "Paul", "Jimmy"],
  location: {
    region:"England",
    country:"United Kingdom"
  },
  aboutMe: {
    status: "Single",
    pet: "Dog",
  }
}

const { name, friend, location, aboutMe: {status , pet} } = user;

console.log(name); // output: "Mike"
console.log(friend);  // output: [ 'John', 'Paul', 'Jimmy' ]
console.log(location); // output: { region: 'England', country: 'United Kingdom' }
console.log(status); // output: "Single"
console.log(pet); // output: "Dog"

//Combining Obj
const newUser = {
  ...user,
  car: {
    make: "Buick",
    year: 2012,
  }
}

console.log(newUser)
// output user obj + car object into one
// {
//   name: 'Mike',
//   friend: [ 'John', 'Paul', 'Jimmy' ],
//   location: { region: 'England', country: 'United Kingdom' },
//   aboutMe: { status: 'Single', pet: 'Dog' },
//   car: { make: 'Buick', year: 2012 }
// }

//Bonus destructuring from object of array
const {friend: [a, ...b]} = user
console.log(a) // output: "John"
console.log(b) // output: ["Paul", "Jimmy"]

Posted by: Guest on September-07-2021

const HIGH_TEMPERATURES = { yesterday: 75, today: 77, tomorrow: 80 }; //ES6 assignment syntax const {today, tomorrow} = HIGH_TEMPERATURES; //ES5 assignment syntax const today = HIGH_TEMPERATURES.today; const tomorrow = HIGH_TEMPERATURES.tomorrow; console.log(today); // 77 console.log(tomorrow); // 80 console.log(yesterday); // "ReferenceError: yesterday is not defined" as it should be.

({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 // Stage 4(finished) proposal ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); // {c: 30, d: 40}

const objA = { prop1: 'foo', prop2: { prop2a: 'bar', prop2b: 'baz', }, }; // Deconstruct nested props const { prop1, prop2: { prop2a, prop2b } } = objA; console.log(prop1); // 'foo' console.log(prop2a); // 'bar' console.log(prop2b); // 'baz'

Code answers related to "Destructuring in javascript"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "Destructuring in javascript"

Code answers related to "Destructuring in javascript"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us