Dynamically set multiple object properties using variable

Question

I wanna set multiple object property with the same value.

const SHOW_PAYMENT_DIALOG = 'SHOW_PAYMENT_DIALOG';
const SHOW_BUSINESS_DIALOG = 'SHOW_BUSINESS_DIALOG';

const handler = (state, payload) => {
    return {
        ...state,
        data: payload
    };
  };

const object = {
  [SHOW_BUSINESS_DIALOG]: handler,
  [SHOW_PAYMENT_DIALOG]: handler,
};

As above example, I have to manually assign handler for 2 property SHOW_BUSINESS_DIALOG & SHOW_PAYMENT_DIALOG

Is there anyway to set it quickly on the fly by js api but no need to introduce a new function to handle that like

const object = {
      [SHOW_BUSINESS_DIALOG, SHOW_PAYMENT_DIALOG]: handler,
    };

Why don’t you use a method for it then compare the parameter to return the function that you requiere. — Bob White
– Bob White, Commented Jul 17, 2019 at 4:24
someone have already answered you question. it was what i meant. — Bob White
– Bob White, Commented Jul 17, 2019 at 4:53
There is no shortcut for assigning value to multiple keys at once yet, other than the old obj.a = obj.b = value. What you have is the most readable and concise. — Slai
– Slai, Commented Jul 17, 2019 at 6:00

Nick Parsons · Accepted Answer · 2019-07-17 04:37:24Z

You could use Object.fromEntries() with .map() if you're okay with having the same reference to handler for each value... (the snippet console output shows how the handler method is the same reference for each value, that's why it looks a little strange):

const SHOW_PAYMENT_DIALOG = 'SHOW_PAYMENT_DIALOG';
const SHOW_BUSINESS_DIALOG = 'SHOW_BUSINESS_DIALOG';

const handler = (state, payload) => {
  return {
    ...state,
    data: payload
  };
};

const keys = [SHOW_PAYMENT_DIALOG, SHOW_BUSINESS_DIALOG];
const object = Object.fromEntries(keys.map(k => [k, handler]));

console.log(object);

Please note that .fromEntries() is currently in draft mode, however, I think a generic if statement accompanied with a Set (using .has()) would be better for this case than using an object:

const SHOW_PAYMENT_DIALOG = 'SHOW_PAYMENT_DIALOG';
const SHOW_BUSINESS_DIALOG = 'SHOW_BUSINESS_DIALOG';

const handler = (state, payload) => {
  return {
    ...state,
    data: payload
  };
};

const get_handler = key => {
  const keys = new Set([SHOW_PAYMENT_DIALOG, SHOW_BUSINESS_DIALOG]);
  if(keys.has(key))
    return handler;
}

console.log(get_handler(SHOW_BUSINESS_DIALOG)); // hanlder
console.log(get_handler("foo")); // undefined

Code Maniac · Accepted Answer · 2019-07-17 04:18:36Z

1

You can create a generic function and pass an array of key and loop through keyArr and place value for each key

const SHOW_PAYMENT_DIALOG = 'SHOW_PAYMENT_DIALOG';
const SHOW_BUSINESS_DIALOG = 'SHOW_BUSINESS_DIALOG';

let value = "some value"
const object = { someKey: 'value'};

let dynamicSetValues = (keyArr, value) => {
  keyArr.forEach(key => {
    object[key] = value
  })
}

dynamicSetValues(['SHOW_PAYMENT_DIALOG','SHOW_BUSINESS_DIALOG'], value)

console.log(object)

Note:- this mutates original object, if you want immutability you can make a copy of object and place value on desired keys and return a new object every time from function

answered Jul 17, 2019 at 4:18

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

2 Comments

taile Over a year ago

cool, I'm also thinking about that. I'm just curious about the faster way which is supported by es6

Code Maniac Over a year ago

Only direct way is to define manually, else you need to loop if you dont want to repeat yourself writing the same thing again and again

Collectives™ on Stack Overflow

Dynamically set multiple object properties using variable

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related