JavaScript Destructuring Assignment - 2

We've covered the basics of destructuring assignment. This article is the continuation of part 1

Destructuring assignment is a more convenient and special syntax that allows unpacking of arrays or objects into separate variables. It is used on array, objects, and functions.

Array destructuring

Let's see a couple of examples below:

const arr = [ "Bello", "Osagie", "Noah" ];
const [ surName, firstName, otherName ] = arr;
// split individual items into separate variables 
// => "Bello Osagie Noah".split(' ');

console.log(surName); // Bello => surName = arr[0]
console.log(firstName);  // Osagie => firstName= arr[1]
console.log(otherName );  // Noah => otherName = arr[2]

The example above is the same as below:

const [ surName, firstName, otherName ] = "Bello Osagie Noah".split(' ');

console.log(surName); // Bello => surName = arr[0]
console.log(firstName);  // Osagie => firstName= arr[1]
console.log(otherName );  // Noah => otherName = arr[2]

Destructuring allows certain elements in an array to be omitted by omitting the element variable.

const arr = [ "Bello", "Osagie", "Noah" ];
const [ surName, /*omitted*/ , otherName ] = arr;

console.log(surName); 
console.log(otherName);

It works with any iterable data structure like strings, objects, sets, etc.

// string
const [ a, b, c ] = "xyz";
console.log(a); // x
console.log(b); // y
console.log(c); // z

//obj
const obj = { one: 1, two: 2, three: 3 };
const { one, two, three } = obj;
console.log(one);  // 1
console.log(two);  // 2
console.log(three); // 3

// set
const [ one_, two_, three_ ] = new Set([1, 2, 3]);
console.log(one_) // 1
console.log(two_) // 2
console.log(three_) // 3

You can also unpack numbers to a variable by the rest parameters.

const [ one, two, ...numb ] = [ 1, 2, 3, 4, 5, 6 ]
// the rest will be all except one and two

console.log(one); // 1
console.log(two); // 2
console.log(numb); // [ 3, 4, 5, 6 ]

The rest operation above works on objects also:

See below:

const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5,
  six: 6,
};

const { one, two, ...numb} = obj;

console.log(one); // 1
console.log(two); // 2
console.log(numb); // { three: 3, four: 4, five: 5, six: 6 }

We can also add properties in an object by setting default values (use =).

const obj = { one: 1 };

const { two = 2, three = 3, one } = obj;

console.log(one);  // 1
console.log(two);  // 2
console.log(three); // 3

We can set default values also in arrays.

const [ firstName = "John", lastName = "Bello" ] = [ "Osagie" ];

console.log(firstName);    // Osagie
console.log(lastName ); // Bello

We can also swap values of two variables using a destructuring assignment.

let firstName = "Osagie";
let lastName = "Bello";

// swap to firstName=Bello, lastName=Osagie
[ firstName, lastName ] = [ lastName, firstName ];

console.log(`${firstName} ${lastName}`);  // Bello Osagie

We can also destructure to loop over keys-and-values of an object.

const person = {
  name: "Bello",
  age: 27
};

for ( let [ key, value ] of Object.entries(person) ) {
  console.log(`${key}:${value}`);
  /* 
  name:Bello
  age:27
  */
}

It works on iterable objects like maps.

const map = new Map();
    .set("name", "Bello");
    .set("age", "27");

// syntax looks more convenient with map
for (let [key, value] of map) {
  console.log(`${key}:${value}`); 
  /* 
  name:Bello
  age:27
  */
}

We can use restructure an array (object) returned by a function.

const arr = () => {
  return [ 4, 6, 2]
};

const [ four, , two ] = arr();
console.log( arr() ); // [ 4, 6, 2 ]

---

---