Question 160453 in Javascript Question posted in
A very good W3school tutorial can be found here.

What is an example of array destructuring via assignment pattern in JS?

This MDN documentation on destructuring assignment says that "for both object and array destructuring, there are two kinds of destructuring patterns: binding pattern and assignment pattern". Therefore, there should be four types of destructuring syntax:

  • Type 1: object destructuring via binding pattern
  • Type 2: array destructuring via binding pattern
  • Type 3: object destructuring via assignment pattern
  • Type 4: array destructuring via assignment pattern

I have read through the MDN documentation page many times, and the page seems to have provided examples only for the first 3 types. Googling doesn’t seem to help either.

What would be an example of Type 4?

Thanks!

Update 1:

For Type 3, MDN provided this example:

// This assigns a to numbers[0] , and b to number[1] 
({ a: numbers[0], b: numbers[1] } = obj);

What would be an equivalent example for Type 4? Thanks!

Tags:

2

Answers


  1. 0

    Here are examples of each of the four types you listed:

    • Type 1: Object destructuring via binding pattern

      const person = {
  name: 'Alice',
  age: 30,
};

const { name, age } = person;

    • Type 2: Array destructuring via binding pattern

      const rgb = [255, 200, 100];

const [red, green, blue] = rgb;

    • Type 3: Object destructuring via assignment pattern

      const person = {
  name: 'Bob',
  age: 25,
};

let name, age;
({ name, age } = person);

    • Type 4: Array destructuring via assignment pattern

      const rgb = [255, 200, 100];

let red, green, blue;
[red, green, blue] = rgb;

    • Advanced example for type 4:

      const obj = {
  numbers: [1, 2, 3, 4, 5],
};

let a, b;

// This assigns a to obj.numbers[0], and b to obj.numbers[1]
[a, b] = obj.numbers;

    To surgically and individually extract each indexed element of an array value using array destructuring with the assignment pattern, do the following:

    const obj = {
  numbers: [1, 2, 3, 4, 5],
};

let a, c, e;

// This assigns obj.numbers[0] to a, obj.numbers[2] to c, and obj.numbers[4] to c
([a, , c, , e] = obj.numbers);

    In this example, we’re destructuring the numbers array from the obj object and assigning its 1st, 3rd, and 5th elements to the variables a, c, and e respectively. We use elisions between the commas to skip the elements we don’t want to extract.

    Login or Signup to reply.
  2. 0

    MDN should have explained Type 4 with a clearer and simpler example. Here you go:

    const source = [1, 2, 3];
const target = [4, 5];

[target[0], target[1]] = source; // target = [1, 2]

    Also, JavaScript arrays are just objects with indexed properties, so the above can also be written as the Type 3 format below:

    ({ 0: target[0], 1: target[1] } = source);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search