Using the variable "name" doesn't work with a JS object

Question

The behaviour can be seen in this little snippet (execute it as a global script):

var name = {};
name.FirstName = 'Tom';
alert(name.FirstName);

The alert yields undefined in Chrome but works in IE and Firefox. I also get a weird value when I do

alert(name);

language attribute is deprecated, use only the type attribute. It's also better to use console.log instead of the alert and use the Chrome Dev. Tools (or FireBug) to read them. And finaly you need to have a doctype on line 1 of your code, a doctype is: <!doctype html> — Wouter J
– Wouter J, Commented May 9, 2012 at 20:37
AFAIK it's more common to use the var name = {} syntax too. — Hamish
– Hamish, Commented May 9, 2012 at 20:39
It was just typo ... I entered 'Object' not object. it still throws error in chrome. try the new code in chrome. — Pialy Tapaswi
– Pialy Tapaswi, Commented May 9, 2012 at 20:56
name is a special global variable in browsers, you can't alter it too much... — dandavis
– dandavis, Commented Jan 28, 2014 at 2:53
window.name is a special global variable in browsers. See developer.mozilla.org/en-US/docs/Web/API/Window.name it assumes the type is a string. If you use typeof to check nString, it is an object. You can run it in a nodejs console and the results is correct then. So it is not a javascript problem. — Chris Li
– Chris Li, Commented Jan 28, 2014 at 3:03

Bergi · Accepted Answer · 2015-12-02 14:58:01Z

52

window.name has a special purpose, and is supposed to be a string. Chrome seems to explicitly cast it to a string, so var name = {}; actually ends up giving the global variable name (i.e. window.name) a value of "[object Object]". Since it's a primitive, properties (name.FirstName) won't "stick."

To get around this issue, don't use name as a global variable.

edited Dec 2, 2015 at 14:58

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

answered May 9, 2012 at 21:04

Dagg Nabbit

77k19 gold badges115 silver badges142 bronze badges

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

3 Comments

Dagg Nabbit Over a year ago

@FelixKling I almost treat name like a reserved word, since some hosts give functions a name property also (I've been bitten by that before), closure won't minify it, etc.

Felix Kling Over a year ago

Yeah, there have been a couple of questions with that problem as far as I can remember...

evolutionxbox Over a year ago

fyi, the link is broken

Ry- · Accepted Answer · 2017-02-28 04:30:36Z

16

Your name variable is actually window.name, because top-level variables declared with var are attached to the global object.

The HTML5 spec requires that window.name is a DOMString. This means that the value of window.name can only be a sequence of characters, not an object.

In Chrome, an attempt to use window.name to store anything except a primitive string will coerce the value to a primitive string. For example:

window.name = {};
window.name === "[object Object]"; // true

You can avoid this problem by using a name variable that is not in the top-level scope:

(function() {
    var name = {};
    // this `name` is not `window.name`
    // because we're not in the top-level scope

    console.log(name);
})();

edited Feb 28, 2017 at 4:30

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

answered Jan 28, 2014 at 3:29

apsillers

116k18 gold badges248 silver badges249 bronze badges

Comments

maazadeeb · Accepted Answer · 2019-05-12 06:08:29Z

6

With ES6+, you could write your code as let name or const name. This won't assign it or try to override window.name. More on that here.

let name = {};
name.FirstName = 'Tom';
alert(name.FirstName);

edited May 12, 2019 at 6:08

answered May 12, 2019 at 5:09

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

Comments

st-boost · Accepted Answer · 2012-05-09 21:21:14Z

2

window.name is used to set the name of the window, and since the window name can only be a string, anything you set to window.name is converted to a string. And strings, as primitive values, cannot have properties. The solution is to use a different variable name or a different scope.

Alternatively, you can use window.name as you like if you have this code first. I don't recommend this at all, but, just as a proof of concept:

(function () {
    var _name;
    window.__defineGetter__('name', function () {
        return _name;
    });
    window.__defineSetter__('name', function (v) {
        _name = v;
    });
})();

Additionally, you should use {} in place of new Object. Besides being more concise, it is also more efficient and more explicit.

edited May 9, 2012 at 21:21

answered May 9, 2012 at 21:05

st-boost

1,9071 gold badge14 silver badges18 bronze badges

2 Comments

Oriol Over a year ago

Or just delete name;

Sebastian Simon Over a year ago

Note that __defineGetter__ and __defineSetter__ are both deprecated. Use defineProperty instead.

Collectives™ on Stack Overflow

Using the variable "name" doesn't work with a JS object

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related