How to add common property to all Object's properties (shorthand)

Question

Each one of my Object's properties has the common property (called: selected), is there a short way to inject this property to each one of the properties without explicitly write each one?

note that I've already looked through this answer but its only talking about arrays

var myObject = {
    propery1: {
        selected: function () {
            return this.value === someVariable;
        },                    
        value: 1,                    
    },
    propery2: {
        selected: function () {
            return this.value === someVariable;
        },                    
        value: 2,                    
    },
    propery3: {
        selected: function () {
            return this.value === someVariable;
        },                    
        value: 3,                    
    },

    //...

    propery10: {
        selected: function () {
            return this.value === someVariable;
        },
        value: 10,
    },
};

For example:

var someVariable = 1;

OUTPUT:

myObject = {
    propery1: {
        selected: true,                    
        value: 1,                    
    },
    propery2: {
        selected: false,
        value: 2,                    
    },
    propery3: {
        selected: false,
        value: 3,                    
    },

    //...

    propery10: {
        selected: false,
        value: 10,
    },
};

What is the expected output? – gurvinder372 Feb 07 '18 at 14:17 — gurvinder372, Feb 07 '18 at 14:17
@gurvinder372 updated the question – Shahar Shokrani Feb 07 '18 at 14:21 — Shahar Shokrani, Feb 07 '18 at 14:21

Striped · Answer 1 · 2018-02-07T15:23:03.687

1

You can create a map of every key of your object to then be able to set a specific property for each of them according to a unique condition.

var myObj = {prop1: {...}, prop2: {...}};
Object.keys(myObj).map(k => k).forEach(k => myObj[k].selected = ...);

edited Feb 07 '18 at 15:23

answered Feb 07 '18 at 14:19

Striped

2,544
3
25
31

Event though your answer might solve the question, a lack of explanations puts it at risk of being moderated. – Stphane Feb 07 '18 at 14:56
1

Object.keys, map, forEach, nothing hard to understand if someone wants to learn something new. – Striped Feb 07 '18 at 14:59
Sure, nothing fancy here, but some stackoverflow users flagged your answer as a "poor quality answer". Which puts it in a moderation queue so that more users vote for a potential deletion. I told your answer was okey, but this might not be the case of every moderator. Simply consider adding comments like why you did it this way, etc.. This is nothing more than an advice. – Stphane Feb 07 '18 at 15:06
Ok, I will in my futur answers. Thanks. – Striped Feb 07 '18 at 15:20

score 1 · Answer 2 · answered Feb 07 '18 at 14:26

One solution is to implement some sort mixin. It could look like this:

var someVariable = 1

var selected = {
  selected: function() {
    return this.value === someVariable;
  }
}

var myObject = {
  property1: Object.assign({
    value: 1,
  }, selected),
  property2: Object.assign({
    value: 2,
  }, selected),
};

console.log(myObject.property1.selected(), myObject.property2.selected())

It can look nicer with ES2015 spread syntax:

var someVariable = 1

var selected = {
  selected: function() {
    return this.value === someVariable;
  }
}

var myObject = {
  property1: {
    ...selected,
    value: 1,
  },
  property2: {
    ...selected,
    value: 2,
  },
};

console.log(myObject.property1.selected(), myObject.property2.selected())

score 1 · Answer 3 · answered Feb 07 '18 at 14:37

There are already some answers describing how to do this stuff. Another way is you can also use Object.create() to do this also.Object.create add the selected property in __ proto __. So to make it accessible in for..in loop you have to make use of property descriptor to set enumerable property to true.

var obj = {
            selected: function () {
              return this.value === someVariable;
            }
          }

var myObject = {
    propery1: Object.create(obj,{                    
        value: {
           value : 1,
           enumerable : true
        }       
    }),
    propery2: Object.create(obj,{

        value: {
           value : 2,
           enumerable : true
        }                
    })
};

score 1 · Accepted Answer · answered Feb 07 '18 at 14:39

You could bind the inner object, call the function and assign the value.

var object = { propery1: { selected: function () { return this.value === someVariable; }, value: 1 }, propery2: { selected: function () { return this.value === someVariable; }, value: 2 }, propery3: { selected: function () { return this.value === someVariable; }, value: 3 }, propery10: { selected: function () { return this.value === someVariable; }, value: 10 } },
    someVariable = 1;

Object.keys(object).forEach(k => object[k].selected = object[k].selected.call(object[k]));

console.log(object);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 1 · Answer 5 · answered Feb 07 '18 at 15:03

Writing a reusable function might come in handy for future purpose !

function addKeys(object, properties) {
    var key,        // To loop the object
        index,      // To loop the properties array
        property,   // To store each property
        subObject;  // To store each object

    // Loop through the object
    for(key in object) {
        // Store the current object for easy access
        subObject = object[key];
        // Loop through the properties array
        for(index = 0; index < properties.length; index++) {
            // Store the current property for easy access
            property = properties[index];
            // Assign the new property to the current object
            subObject[property.key] = property.value;
        }
    }
}

var someVariable = 1;
var myObject = {
    property1: {
        value: 1,                    
    },
    property2: {
        value: 2,                    
    },
    property3: {
        value: 3,                    
    },
    property10: {
        value: 10,
    },
};

var keysToBeAdded = [{
    key: 'selected',
    value: function() {
        return this.value === someVariable;
    }
}, {
    key: 'someOtherKey',
    value: 'someOtherValue'
}];

// Add new keys to your object
addKeys(myObject, keysToBeAdded);

console.log(myObject);

I have used basic loops to make the function execute faster. You can use Object.keys to get all object keys and process on that and use array.forEach instead of for loop.

How to add common property to all Object's properties (shorthand)

For example:

OUTPUT:

5 Answers5

Writing a reusable function might come in handy for future purpose !