use shorthand for object property assigment

Question

I'm using the following code

   function(props){

...
    this.props.appName = this.options.appName || this.props.appName;
          this.props.host = this.options.host || this.props.hos;
          this.props.endpoint = this.options.endpoint || this.props.endpoint;
          this.props.appPath = this.options.appPath || this.props.appPath;
    
       ....

Before I was using the or (||) I've used something like

this.props = Object.assign(this.props, props);

I've many fields which I need to assign is there a way to make it shorter?

How about this:`this.props = {...this.props, ...this.options}`? — gorak, Jun 21 '20 at 06:43
Does this answer your question? [How can I merge properties of two JavaScript objects dynamically?](https://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically) — user120242, Jun 21 '20 at 08:33
[react shorthand for passing props](https://stackoverflow.com/questions/42620847/react-shorthand-for-passing-props) — user120242, Jun 21 '20 at 08:33
seems like a potential bug because values of `0`, `""` and `false` will be replaced too — Slai, Jun 21 '20 at 09:43

gorak · Accepted Answer · 2020-06-21T09:19:02.117

1

You can make use of spread operator here to unpack the values from other object, while keeping the first one as default.

var props={appName:'name', host:'host', appPath:'path'};

var options={appName:'UpdatedName', appPath:'pathUpdated'};

props = {...props, ...options};

console.log(props);

UPDATE

In case of undefine, I think you can iterate object using for..in loop, to settle the data:

var props={appName:'name', host:'host', appPath:'path'};

var options={appName:'UpdatedName', host:undefined, appPath:'pathUpdated'};

for(let item in options){
  if(options[item]) props[item] = options[item];
}

console.log(props);

edited Jun 21 '20 at 09:19

answered Jun 21 '20 at 06:46

gorak

5,233
1
7
19

if options holds a falsy (e.g undefined) property, the || operator would have kept the props property while here you are setting that falsy property to props – grodzi Jun 21 '20 at 08:32
but what happen if `options` is undfiend so that loop will not start – Beno Odr Jun 21 '20 at 13:00

score 1 · Answer 2 · answered Jun 21 '20 at 08:06

1

Try the below

var props={appName:'name', host:'host', appPath:'path'};
var options={appName:'UpdatedName', appPath:'pathUpdated'};

props = Object.keys(props).reduce((target, key) => {
  target[key] = options[key] || props[key];
  return target;
}, {});
console.log(props);

answered Jun 21 '20 at 08:06

Girish Sasidharan

582
1
5
14

thanks, im using it in typescript and got error on the `target[key]` , `TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'.` any idea how to resolve it? – Beno Odr Jun 21 '20 at 12:22
I tried the same on typescript, working fine. Any particular framework? – Girish Sasidharan Jun 21 '20 at 13:55
no, just using `eslint recomended ` which is integreated with webstorm – Beno Odr Jun 21 '20 at 14:05
tried the same on Angular 6 -> https://stackblitz.com/edit/copytaskshorthand, Typescript -> https://jsfiddle.net/boilerplate/typescript – Girish Sasidharan Jun 21 '20 at 14:11

score 0 · Answer 3 · answered Jun 21 '20 at 06:56

You can do destruction:

  let {appName, host, endpoint, apPath} = this.props;
  let {appName: appNameOptions, host: hostOptions, endpoint: endpointOptions, apPath: appPathOptions} = this.options;

  appName = appNameOptions || appName;
  host = hostOptions || host;
  endpoint = endpointOptions || endpoint;
  appPath = appPathOptions || appPath;

score 0 · Answer 4 · answered Jun 21 '20 at 11:45

0

As per your given snippet you just need to change the option in Object.assign().

this.props = Object.assign(this.props, this.options);

This should be work for you.

answered Jun 21 '20 at 11:45

Savan

102
6

use shorthand for object property assigment

4 Answers4