Difference between javascript object literal notation and adding to objects

Question

Can someone explain what is happening in the code below? I'd expect toString to get called for either both foo and bar, or neither. How is literal object notation different from adding fields to an object after it is created?

function Obj(v) {
    this.v = v;    
};

Obj.prototype.toString= function() {
    window.alert("to string called for " +
                this.v);
    return this.v.toString();
}        

var foo = new Obj('foo');
var bar = new Obj('bar');

// toString is not called here.
var map = {foo : 'blah'};
// toString is called here.
map[bar] = "blah2";

Why do object literals not use toString() while adding to an existing object does use toString()?

http://jsfiddle.net/pByGJ/2/

You're misunderstanding prototypes if you're adding them every time the Obj constructor is called. You just add it once outside the constructor, and objects created from the constructor will have automatic access to it. — I Hate Lazy
– I Hate Lazy, Commented Oct 26, 2012 at 18:26
...the object created using object literal syntax will clearly not inherit anything from the Obj constructor's prototype. It only inherits from Object.prototype, not every other custom constructor you defined. — I Hate Lazy
– I Hate Lazy, Commented Oct 26, 2012 at 18:26
@user1689607 I believe you're misunderstanding the question. — NullUserException
– NullUserException, Commented Oct 26, 2012 at 18:30
@will Replace the declarations of foo and bar with var foo = 'var_foo'; var bar = 'var_bar'; (instead of new Obj('...')), rerun the code and you'll understand what's happening here. — NullUserException
– NullUserException, Commented Oct 26, 2012 at 18:31
okay changed the question so I don't keep changing the prototype, but the root of the question renames the same. — will
– will, Commented Oct 26, 2012 at 18:34

Ruan Mendes · Accepted Answer · 2012-10-26 19:16:18Z

3

The main reason that object literals don't evaluate the identifier to the left of the colon is so you're not force to quote all literal names (as you do in JSON).

Bracket notation forces you to quote property names, if you don't, it will be evaluated as a variable.

The reason toString() does get called in the second example is because bar has to be converted to a string to be used as a property name.

In your first example, you're just creating a literal object (that is the exactly the same as {"foo" : 'blah'}). So that is never using the variable foo

If you want to create an object using a variable name, you can't use literal object notation, you have to use [] which is what forces it to call toString()

Here's a function to create objects with variable names in one expression.

function obj(key, value /*, key, value, ... */) {
    var obj = {};
    for (var i = 0, ln = arguments.length ; i < ln; i+=2) {
        obj[arguments[i]] = arguments[i+1];
    }
    return obj;
}

Clearer Example

The fact that your variable names and values are the same doesn't help understanding the problem. Let me suggest this code

var foo = new Obj('fooValue');
var bar = new Obj('barValue');

var map = {foo : 'blah'};
map[bar] = "blah2";

// You expect map to be {fooValue: 'blah', barValue: 'blah2'}
// But it's {foo: 'blah', barValue: 'blah2'}

To do what you need, use my obj function

// Almost as clear as literal notation ???
var map = obj(
    foo, 'blah',
    bar, 'blah2'
);
// map = {fooValue: 'blah', barValue: 'blah2'} Yay!!

edited Oct 26, 2012 at 19:16

answered Oct 26, 2012 at 18:34

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

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

2 Comments

will Over a year ago

Thanks for the answer. Editing my question so it is more clear. I'm curious why object literals don't use toString(), but [] forces toString()

Ruan Mendes Over a year ago

@will Updated the answer to make it clear that literal property names don't get evaluated so you don't have to quote them.

jbabey · Accepted Answer · 2012-10-26 18:45:34Z

2

keys in an object literal are taken as strings, not interpreted as variables. This:

var map = {foo : 'blah'};

is equivalent to this:

var map = {"foo" : 'blah'};

and this:

var map = {};
map["foo"] = "blah";

but is completely different than this:

var map = {};
map[foo] = "blah";

answered Oct 26, 2012 at 18:45

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

Collectives™ on Stack Overflow

Difference between javascript object literal notation and adding to objects

2 Answers 2

Clearer Example

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Clearer Example

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related