Different methods of adding properties to javascript object

Question

The following 3 methods i had come across by which properties can be added to an object.

> collection = {key0: 'value0'}
{ key0: 'value0' }

> collection.key1 = 'value1';
'value1'

> collection['key2'] = 'value2';
'value2'

> collection
{ key0: 'value0',
  key1: 'value1',
  key2: 'value2' }

Are there other methods exist by which properties can be added to the object.

Does all the 3 methods do the exact same job ?

You're not really adding a property in the first case. You're replacing whatever collection contained with an object that contains one property. That's not the same as "adding" a property to an already existing object. — Michael Todd
– Michael Todd, Commented Sep 2, 2014 at 14:46
You need to read this: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… — CodingIntrigue
– CodingIntrigue, Commented Sep 2, 2014 at 14:46
Object.defineProperty and Object.defineProperties. Note that obj.foo is just syntactic sugar for obj['foo']. — Felix Kling
– Felix Kling, Commented Sep 2, 2014 at 14:53

Jean-Karim Bockstael · Accepted Answer · 2014-09-02 14:53:04Z

1

There is an important difference here: the first example creates a new object (this is called an "object literal"), the other two change an already existing object.

The second and third examples change the collection object in the same way, the difference lies in the inability to use a variable property name in the dot notation:

// Let's say we have an object
var collection = { key0 : "value0" };

// Let's say for some reason we want to use a variable as a property name
var keyName = "key1";

// This won't assign "someValue" to the property "key1" as you would expect
// instead it will assign it to the property "keyName" (the string, not the variable)
collection.keyName = "someValue"; // OOPS

// With bracket notation you can use a variable (or any expression) as a property name
collection[keyName] = "value1"; // Sweet

answered Sep 2, 2014 at 14:53

Jean-Karim Bockstael

1,41510 silver badges18 bronze badges

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

Comments

apsillers · Accepted Answer · 2014-09-02 15:53:45Z

The first statement defines a new object with a single property named key0.

The second statement assigns a value to the object's property named key1. Since the object doesn't have its own property named key1, the property is created.

The third statement is identical in effect to the second statement. The main reasons to use bracket notation instead of dot notation are:

properties with special characters, e.g., collection["foo-bar"] refers to a property called foo-bar, but collection.foo-bar performs a subtraction operation on collection.foo and bar.
variable property names, e.g., you can do var propName = "key0"; collection[propName] = ...

The only other way to define properties is with Object.defineProperty (and the multiple variant Object.defineProperties). This allows you to define properties that behave in special ways.

Object.defineProperty(collection, "key3", {
    enumerable: false,    // property will not show up in for-in loops
    configurable: false,  // property cannot be changed
    set: function(val) {
        alert("we tried to set key3 to " + val);
    },
    get: function() {
        alert("this code runs when we get collection.key3");
        return "value3";
    }
});

collection.key3 = 6;  // alerts "we tried to set key3 to 6"
collection.key3;      // alerts "this code runs when we get collection.key3"
                      // and returns the string "value3"

Collectives™ on Stack Overflow

Different methods of adding properties to javascript object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related