Conditionally adding properties to JavaScript object

Question

Is there a more concise or readable way of doing this?

var foo={a:111,c:333, somePropertyThatShouldntBeAdded:'xxx'};
var myobj={x:1,y:2,z:3};
if(foo.a){myobj.a=foo.a;}
if(foo.b){myobj.b=foo.b;}
if(foo.c){myobj.c=foo.c;}

EDIT. Context why I am doing this is below.

var obj={value:this.text,css:{color:'#929292',margin:'1px 0px'}};
if(this.width){obj.css.width=this.width;}
if(this.type){obj.type=this.type;}
if(this.id){obj.id=this.id;}
var input=$('<input/>',obj)

@hindmost somePropertyThatShouldntBeAdded might pose a problem. — user1032531
– user1032531, Commented Apr 25, 2015 at 16:39
@user1032531 Could delete myobj.somePropertyThatShouldntBeAdded afterwards? — CodingIntrigue
– CodingIntrigue, Commented Apr 25, 2015 at 16:43
@RGraham Guess the right answer, like always, depends on the actual circumstances. Do I have a bunch of properties to add and only one or two which shouldn't be, or the opposite. — user1032531
– user1032531, Commented Apr 25, 2015 at 16:46
@hindmost extend() looks like a good solution if some sort of filter could be applied to the foo to only return the applicable properties to add. — user1032531
– user1032531, Commented Apr 25, 2015 at 16:51

Gerard · Accepted Answer · 2015-04-25 16:47:12Z

1

You could use a simple loop-based approach:

var foo={a:111,c:333, somePropertyThatShouldntBeAdded:'xxx'};
var myobj={x:1,y:2,z:3};

['a','b','c'].forEach(function(key) {
    if(key in foo) {
        myobj[key] = foo[key];
    }
});

Notice how I used the in keyword. Your current solution will not work if the value of a property is (e.g.) false or 0.

Additionaly, to get better solutions, provide some context: why are you conditionally copying properties? Perhaps you can avoid this to begin with.

answered Apr 25, 2015 at 16:47

Gerard

8517 silver badges15 bronze badges

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

1 Comment

user1032531 Over a year ago

Context provided to original post. Thanks for your reply.

skellertor · Accepted Answer · 2018-11-02 04:42:55Z

1

With the introduction of the spread operator in ES2018 you can do something like this.

const original = {
    first: null,
    second: 'truthy'
};

const conditionalObject = {
  ...( original.first && { first: original.first }),
  ...( original.second && { second: original.second })
};

In the conditionalObject we first check if the property we want to add from the original is truthy, if it is we spread that property with its value into the new object.

If the property from the original object is falsy, the && short circuits and the property is never spread into the new object.

You can read a more detailed explanation here

The new conditionalObject will look like this

{
    second: 'truthy'
}

answered Nov 2, 2018 at 4:42

skellertor

1,1532 gold badges13 silver badges35 bronze badges

Comments

Andrew Lavers · Accepted Answer · 2015-04-25 16:39:32Z

0

You can use the ternary operator like this:

myobj.a = foo.a ? foo.a : undefined;

Though its not exactly the same as the if statement you have, because you'll have {a: undefined} instead of {}. The difference would show up if you ever enumerated the keys of your object.

Edit:

@hindmost has a good suggestion in the comments. You could improve it further with underscore.js:

_.extend(myobj, _.pick(foo, ['a', 'b', 'c']));

answered Apr 25, 2015 at 16:39

Andrew Lavers

8,1711 gold badge37 silver badges50 bronze badges

1 Comment

Andreas Louv Over a year ago

Btw underscore also provides a function _.omit what will be the opposite of _.pick

CodingIntrigue · Accepted Answer · 2015-04-25 16:46:36Z

0

You could use jQuery's extend, then delete the properties you don't want:

function extendExcept(sourceObject, targetObject, except) {
    var target = $.extend(sourceObject, targetObject);
    except.forEach(function(key) {
        delete target[key];
    });
    return target;
}

You could call it like:

var foo={a:111,c:333, somePropertyThatShouldntBeAdded:'xxx'};
var myobj={x:1,y:2,z:3};
myobj = extendExcept(foo, myobj, ["somePropertyThatShouldntBeAdded"]);

Working Example

answered Apr 25, 2015 at 16:46

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

2 Comments

Andreas Louv Over a year ago

But what is the except property all ready exists on sourceObject?

CodingIntrigue Over a year ago

@dev-null Valid point. I guess this depends on the requirements

user2059983 · Accepted Answer · 2015-04-25 17:02:07Z

0

var foo = {
    a: 111, 
    c: 333, 
    somePropertyThatShouldntBeAdded: 'xxx'
}; 

var myObj = {
    x: 1, 
    y: 2, 
    z: 3
}; 

for(var key in foo) {
    if(key === 'somePropertyThatShouldntBeAdded') {
        continue; 
    }
    myObj[key] = foo[key]; 
}

answered Apr 25, 2015 at 17:02

user2059983

Collectives™ on Stack Overflow

Conditionally adding properties to JavaScript object

5 Answers 5

1 Comment

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related