Utilizing ES6 array destructuring to directly assign values to an object without relying on functions

Question

Utilizing ES6 array destructuring to directly assign values to an object without relying on functions

Is it feasible to achieve the following functionality without utilizing a map, reduce, or any other functions?

const arr1 = ['str', 'str2'];
let obj = {};
Object.assign(obj, [...arr1] : 'Value');
console.log(obj); // Anticipated result: { str1: 'Value', str2: 'Value' }

The objective is to transform each element of an array into an object key and assign it a fixed value. The syntax in question involves potential destructuring similar to the provided pseudo code. I am curious if this can be accomplished using a simple approach without additional functions. With no available information on this method, my curiosity led me to seek clarification on this matter.

javascript arrays ecmascript-6 destructuring

Answer 1

Answer №1

You can't simply use the array elements as property names for separate properties in an object.

An easy way to achieve this is by using a loop after creating the object:

let obj = {};
for (const str of arr1) {
    obj[str] = 'Value';
}

Here's a live example:

const arr1 = ['str', 'str2'];
let obj = {};
for (const str of arr1) {
    obj[str] = 'Value';
}
console.log(obj); // Expected output: { str1: 'Value', str2: 'Value' }

If you want to get fancy, you can utilize Object.assign, temporary objects, spread notation, map, and an arrow function like this:

let obj = {};
Object.assign(obj, ...arr1.map(str => ({[str]: 'Value'})));

You can also check out Jared Smith's solution using fromEntries for another efficient approach similar to using assign.

Another option is to use reduce:

let obj = arr1.reduce((o, str) => {
    o[str] = 'Value';
    return o;
}, {});

Or you could condense it even further with the comma operator:

let obj = arr1.reduce((o, str) => (o[str] = 'Value', o), {});

In my opinion, keeping it simple with a loop is usually the best option. :-)

Answer 2

You can't simply use the array elements as property names for separate properties in an object.

An easy way to achieve this is by using a loop after creating the object:

let obj = {};
for (const str of arr1) {
    obj[str] = 'Value';
}

Here's a live example:

const arr1 = ['str', 'str2'];
let obj = {};
for (const str of arr1) {
    obj[str] = 'Value';
}
console.log(obj); // Expected output: { str1: 'Value', str2: 'Value' }

If you want to get fancy, you can utilize Object.assign, temporary objects, spread notation, map, and an arrow function like this:

let obj = {};
Object.assign(obj, ...arr1.map(str => ({[str]: 'Value'})));

You can also check out Jared Smith's solution using fromEntries for another efficient approach similar to using assign.

Another option is to use reduce:

let obj = arr1.reduce((o, str) => {
    o[str] = 'Value';
    return o;
}, {});

Or you could condense it even further with the comma operator:

let obj = arr1.reduce((o, str) => (o[str] = 'Value', o), {});

In my opinion, keeping it simple with a loop is usually the best option. :-)

Answer 3

Answer №2

If you're interested, you have the option to utilize the latest feature called Object.fromEntries:

var obj = Object.fromEntries(arr.map(str => [str, "Value"]));

It's important to note that this functionality is relatively new and may require a polyfill in certain situations.

Answer 4

If you're interested, you have the option to utilize the latest feature called Object.fromEntries:

var obj = Object.fromEntries(arr.map(str => [str, "Value"]));

It's important to note that this functionality is relatively new and may require a polyfill in certain situations.

Answer 5

Answer №3

Spreading a value to create an object with the item as a key and another value is not achievable.

In order to generate an object with specific properties, you can modify the array by adding a custom generator function that returns an object for each item.

const arr1 = ['str', 'str2'];

arr1[Symbol.iterator] = function* () {
    for (let i = 0; i < this.length; i++) yield { [this[i]]: 'Value' };
};

let obj = {};

Object.assign(obj, ...arr1);

console.log(obj);

Answer 6

Spreading a value to create an object with the item as a key and another value is not achievable.

In order to generate an object with specific properties, you can modify the array by adding a custom generator function that returns an object for each item.

const arr1 = ['str', 'str2'];

arr1[Symbol.iterator] = function* () {
    for (let i = 0; i < this.length; i++) yield { [this[i]]: 'Value' };
};

let obj = {};

Object.assign(obj, ...arr1);

console.log(obj);

Utilizing ES6 array destructuring to directly assign values to an object without relying on functions

Answer №1

Answer №2

Answer №3

Similar questions

Limiting the values of JSON data in C3 charts

What could be the reason behind the improper display of JavaScript for ID overlay2?

Using JavaScript or jQuery to modify the URL of a webpage

Angular JS Promise - Implementing data binding within a forEach iteration

What causes the failure of Angular 2 RC.6 routing when bundled with ngc + Rollup?

Steps for exporting a module from a JavaScript file that is linked:

Transmit JSON data through a REST API request body

Modify the templateUrl in routeProvider according to the user's authorization

Having trouble with Ajax retrieving the updated JSON file version

2020 Google Kickstart Challenge: Breaking Records with Incorrect Solutions

Setting up KaTeX integration (code injection) on Circle.so

Updating an ad unit dynamically in an HTML5 mobile web application through doubleclick DFP refreshing

Update the state of a button in an HTML header file

Separate the Array elements and organize them into an object

Failure to prompt for authentication when accessing secure URLs via the $.ajax function

Using Fabric JS to update the image source of an element with a new URL

Anticipate the completion of Subject callback execution

What is the best way to integrate Babel and React into my Express Application?

Tips for personalizing an angular-powered kendo notification component by adding a close button and setting a timer for automatic hiding

Any advice on applying jquery CSS to elements contained within a dynamically loaded div element?