How can I replace accessing the temp variable values from the following code extract? I have tried to get all values through the default JS code, however, I would like to use destructuring here

const temp = context.options[0]; // <----- here
const avoidPattern = [
    'foo', 'bar', 'abc', 'value', 'temp', 'num'
];


return [...avoidPattern, ...temp]

How can I replace accessing the temp variable values from the following code extract? I have tried to get all values through the default JS code, however, I would like to use destructuring here

const temp = context.options[0]; // <----- here
const avoidPattern = [
    'foo', 'bar', 'abc', 'value', 'temp', 'num'
];


return [...avoidPattern, ...temp]

• javascript
• reactjs
• ecmascript-6

• If you mean using destructuring to access the first element of a list: const [temp, ...rest] = context.options; – Anson Miu Commented Apr 10, 2021 at 9:59

5 Answers 5

This can also be possible if we destructure object and array at the same time.

const context = { options: [1, 2, 3] };
const { options: [temp] } = context;

console.log(temp);

If you want to destructure the first element out of the options array.

1. You can first destructure the options property from the context object.
2. Then you can destructure the first item from the options array.

const context = { options: [1, 2, 3] };

// Destucture the options key property
const {options} = context
console.log(options) // [1,2,3]

// Next, destructure the first item from the array
const [first] = options
console.log(first) // 1

You can also bine the two steps mentioned above using the colon : operator, which is used to provide an alias while destructing an object.

const context = { options: [1, 2, 3] };

// Destucture the options property 
// and in the alias destructure the first item of the array
const {options: [first]} = context
console.log(first) // 1

You might use this

const context = { options: [1,2,3] }
const [temp] = context.options;

console.log(temp)

let arr=['data','title','image']; 

let [first]=arr[1];

console.log(first);

An interesting that Array in JavaScript is an object, So you can destructure an array as object like this

const context = { options: [1, 2, 3] };
const { options } = context; // [1, 2, 3]
const {0:firstItem } = options;
console.log(firstItem);

More details here: Object destructuring solution for long arrays?