Return object with default values from an array in JavaScript

Question

Consider:

    const fields = ['email', 'password'];

    const objFields = {};
    fields.forEach(value => {
      objFields[value] = '';
    });

    console.log(objFields);
// Outputs {email: "", password: ""}

I want to achieve the same result, but without having to initialize an empty object.

Actually, my case is that I want to set the initial state of a React component.

class App extends Component {
  fields = ['email', 'password'];

  state = {

    fields: // The one liner code here that should return the object created from fields array,

  };
  ...

The expected result would be

// state = {fields: {email: "", password: ""}}

fields will have only two values?

brk
– brk

2019-01-16 13:59:44 +00:00
Commented Jan 16, 2019 at 13:59 — brk
– brk, Commented Jan 16, 2019 at 13:59
fields.reduce((acc,k) => (acc[k] = "", acc), {})

adiga
– adiga

2019-01-16 14:01:53 +00:00
Commented Jan 16, 2019 at 14:01 — adiga
– adiga, Commented Jan 16, 2019 at 14:01
@brk that is for simplicity purpose in question only

Raheel
– Raheel

2019-01-16 14:08:53 +00:00
Commented Jan 16, 2019 at 14:08 — Raheel
– Raheel, Commented Jan 16, 2019 at 14:08

Peter Mortensen · Accepted Answer · 2023-05-27 15:34:35Z

10

Whenever you're looking for reducing an array of values to one value, you're looking for .reduce():

state = {
  fields: fields.reduce((acc, key) => ({...acc, [key]: ''}), {}),
};

edited May 27, 2023 at 15:34

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 16, 2019 at 14:01

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Janssen · Accepted Answer · 2020-10-27 09:51:53Z

8

In modern browsers, or by using polyfills, you can use Object.fromEntries() to create an object from an array, using the array's values as keys/properties, and fill the object's values with a default.

const fields = ['email', 'password'];

const result = Object.fromEntries(fields.map(value => [value, '']));

The result is {email: "", password: ""}.

answered Oct 27, 2020 at 9:51

Matt Janssen

1,71416 silver badges15 bronze badges

Comments

Nina Scholz · Accepted Answer · 2019-01-16 14:00:49Z

5

You could map objects and assign all to a single object.

const
    fields = ['email', 'password'],
    object = Object.assign({}, ...fields.map(key => ({ [key]: '' })));

console.log(object);

answered Jan 16, 2019 at 14:00

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2023-05-27 15:48:09Z

You need to transform your array which contains keys into a real object.

To do it, you have many possibilities, but you still have to do something. There isn't any magical trick.

My favorite solution is to use a function to insert into your utility class. So it's easy to read and reusable.

Number 1: The function

function initializeKeys(keys, initialValue, object) {
  return keys.reduce((tmp, x) => {
    tmp[x] = initialValue;

    return tmp;
  }, object);
}

const objFields = initializeKeys(['email', 'password'], '', {
  otherKey: 'a',
});

console.log(objFields);

Number 2: The forEach

const fields = ['email', 'password'];

const objFields = {};

fields.forEach(value => {
  objFields[value] = '';
});

console.log(objFields);

Number 3: The reduce

const fields = ['email', 'password'];

const objFields = {
  ...fields.reduce((tmp, x) => {
    tmp[x] = '';

    return tmp;
  }, {}),
};

console.log(objFields);

Collectives™ on Stack Overflow

Return object with default values from an array in JavaScript

4 Answers 4

Comments

Comments

Comments

Number 1: The function

Number 2: The forEach

Number 3: The reduce

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Number 1: The function

Number 2: The forEach

Number 3: The reduce

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related