[Javascript](EN) Destructuring values using destructuring assignment

Get values using destructuring assignment.


Environment and Prerequisite

  • Javascript


Destructuring Assignment

Definition

  • Destructuring assignment : It is an syntax which can unpack values from elements of array or properties in object.
  • There are many examples on link in below ‘Reference’


Simple Examples

Array Destructuring

let arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr;

console.log(arr);
console.log(a);
console.log(b);
console.log(c);
[ 1, 2, 3, 4, 5 ]
1
2
[ 3, 4, 5 ]

Object Destructuring

let object = {
  a: 1,
  b: "test",
  c: [1, 2],
  d: { name: "test", age: 28 },
};

// Key must be same
let { a, b, c, d } = object;

/* Assign to different variable name example
let { a: e, b: f, c: g, d: h } = object;
*/

console.log(a);
console.log(b);
console.log(c);
console.log(d);
1
test
[ 1, 2 ]
{ name: 'test', age: 28 }


Usage

  • By using this destructuring assignment, we can return multi values from function. Technically, its function return object or array and receives its values in caller using destructuring assignment.

Array Destructuring Example

function test() {
  return [1, 2, 3, 4, 5];
}

let [a, b, ...c] = test();

console.log(a);
console.log(b);
console.log(c);
1
2
[ 3, 4, 5 ]

Object Destructuring Example

function test() {
  let object = {
    a: 1,
    b: "test",
    c: [1, 2],
    d: { name: "test", age: 28 },
  };

  return object;
}

let { a, b, c, d } = test();

console.log(a);
console.log(b);
console.log(c);
console.log(d);
1
test
[ 1, 2 ]
{ name: 'test', age: 28 }


Reference