destructuring js object code example

Example 1: javascript object destructuring

//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]

Example 2: object destructuring into this

const demo = { nextUrl: 'nextUrl', posts: 'posts' };

const target = {}; // replace target with this

({ nextUrl: target.nextUrl, posts: target.communityPosts } = demo);

console.log(target);

Example 3: Object destructuring

Object Destructuring =>
//
   The destructuring assignment syntax is a JavaScript expression that makes it
possible to unpack values from arrays,
or properties from objects, into distinct variables.
//
example:
const user = {
    id: 42,
    is_verified: true
};

const {id, is_verified} = user;

console.log(id); // 42
console.log(is_verified); // true

Example 4: array destructuring

//Without destructuring

const myArray = ["a", "b", "c"];

const x = myArray[0];
const y = myArray[1];

console.log(x, y); // "a" "b"

//With destructuring

const myArray = ["a", "b", "c"];

const [x, y] = myArray; // That's it !

console.log(x, y); // "a" "b"

Example 5: destructured object

let renseignement = ['voleur' , '10' , 'spécialité'] ;


let [classe , force, magie] = renseignement ;

console.log(classe) ;
console.log(force) ;
console.log(magie) ;

Example 6: javascript destructing

/*
* On the left-hand side, you decide which values to unpack from the right-hand
* side source variable.
* 
* This was introduced in ES6
*/
const x = [1, 2, 3, 4, 5]
const [a, b] = x
console.log(a) // prints out: 1
console.log(b) // prints out: 2