How to destructure array inside object in js?

Question

let data = {
   names: ["Sam", "Tom", "Ray", "Bob"],
   ages: [20, 24, 22, 26],
};
let /* some code */ = data;
console.log(name2); // "Tom"
console.log(age2); // 24
console.log(name4); // "Bob"
console.log(age4); // 26

Why not simply: `console.log( data.names[1] )`? Why the need to destructure? — Roko C. Buljan, Feb 17 '23 at 12:35

Vatsal Patel · Answer 1 · 2023-02-17T12:55:07.840

1

    let data = {
       names: ["Sam", "Tom", "Ray", "Bob"],
       ages: [20, 24, 22, 26],
    };
    console.log(data.names[0]); // "Sam"
    console.log(data.ages[0]); // 20
    console.log(data.names[3]); // "Bob"
    console.log(data.ages[3]); // 26

edited Feb 17 '23 at 12:55

answered Feb 17 '23 at 12:36

Vatsal Patel

21
6

score 1 · Answer 2 · answered Feb 17 '23 at 12:36

Since they're arrays you need to use [], not {} in the destructure to mirror the original data structure.

const data = {
   names: ["Sam", "Tom", "Ray", "Bob"],
   ages: [20, 24, 22, 26],
};

const {
  names: [ , name2, , name4 ],
  ages: [ , age2, , age4 ]
} = data;

console.log(name2);
console.log(age2);
console.log(name4);
console.log(age4);

score 0 · Answer 3 · answered Feb 17 '23 at 12:35

You need to use the variable names in the same structure for destructuring.

const
    data = {
       names: ["Sam", "Tom", "Ray", "Bob"],
       ages: [20, 24, 22, 26],
    },
    {
        names: [name1, name2, name3, name4],
        ages: [age1, age2, age3, age4]
    } = data;


console.log(name2); // "Tom"
console.log(age2); // 24
console.log(name4); // "Bob"
console.log(age4); // 26

How to destructure array inside object in js?

3 Answers3