Return object with default values from array in Javascript

user_2812955 0
Viewed 2012
    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 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,

  };
  ...

expected result would be 

// state = {fields: {email: "", password: ""}}
ecmascript-6 javascript
4 Answers

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]: ''}), {}),
};
user_8710500

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);

user_14476750

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: ""}.

user_16640830

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

To do it you have many possibilites, but you still have to do something, there is no magical trick.

My favorite soluce is to use a function to insert into your Utilitary class. So it's easy to read and re-usable.

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);

user_33370800
Related