I was wondering if this preliminary code would be possible without a map , reduce or any other functions?

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

The whole point is to convert each array element into an object key and assign it a static value and what got my attention was whether it is possible by using a simple syntax and destructuring the array similarly to the pseudo code? Since I could not find any information on this I just want to get this question cleared out of my head.

I was wondering if this preliminary code would be possible without a map , reduce or any other functions?

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

The whole point is to convert each array element into an object key and assign it a static value and what got my attention was whether it is possible by using a simple syntax and destructuring the array similarly to the pseudo code? Since I could not find any information on this I just want to get this question cleared out of my head.

• javascript
• arrays
• ecmascript-6
• destructuring

3 Answers 3

You can't spread the array elements to use them as property names for separate properties in an object like that.

The simplest way to do it would be just to use a loop after the fact:

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

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' }

But if you want to go "fancier," you can use Object.assign and a bunch of temporary objects using spread notation and map and an arrow function:

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

See also Jared Smith's answer using fromEntries, which is very similar to this assign version but probably a bit more efficient (still creates a lot of unnecessary temporary objects, but processes those objects more efficiently).

Live Example:

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

You can also shoe-horn it in to reduce if you want (because almost any array operation can be shoe-horned into reduce):

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

Live Example:

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

And then perhaps (ab)using the ma operator so the arrow function can use a concise body:

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

Live Example:

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

I'd keep it simple, though, and use the loop. :-)

You can use the new Object.fromEntries if you wish:

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

Note that this is pretty new, and may need to be polyfilled.

It is not possible to spread a value and get an object with this item as key and another value.

You need to get an object with the wanted interior by adding a custom generator to the array which retunrs 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);