JavaScript objects - [] vs dot

Question

What is the difference, if any, between these two assignments:

var foo = {};
foo['bar'] = "some value";
foo.baz = "some other value";

console.log(foo.bar)
=> "some value"
console.log(foo.baz)
=> "some other value"

Are they synonymous? I've noticed you can add keys with the [] syntax that are not valid property names.

foo['a space'] = "does not work";
console.log(foo.a space);
=> SyntaxError: Unexpected identifier

My reason for asking is that I've cooked up a little JS library for pseudo namespacing. It is written on the assumption that the above assignments are identical (ignoring the superset allowed when using [] syntax)

No technical difference for the first example. And as you stated the `[]` syntax allows for what would be invalid identifiers. — , Jul 05 '13 at 23:15
...note that all JavaScript properties are strings, so whatever expression is given to `[]`, it will ultimately get the `toString()` treatment. — , Jul 05 '13 at 23:20

score 7 · Accepted Answer · answered Jul 05 '13 at 23:19

foo["bar"] is equivalent to foo.bar, although foo.bar is easier to read in my opinion. As you already noticed the former syntax (foo["bar"]) allows you to use property names that are not valid identifiers. It also allows you to use dynamic property names:

var name = "bar";

foo[name] = 1;

console.log(foo["bar"]);

will output 1.

score 2 · Answer 2 · answered Jul 05 '13 at 23:19

When you use ., the property name is a literal identifier. When you use this in a program, you have to hard-code the property name.

When you use [], the property name is an expression that is evaluated. It's not normally used with simple strings in quotes, because that's what . notation is for. But it's useful when you need to calculate the property, e.g.

console.log(foo["item"+i]);

This latter notation is also the only way to access properties that aren't identifiers. You can use any string as the property name this way.

score 2 · Answer 3 · answered Jul 05 '13 at 23:19

2

They are absolutely equivalents except that you can more possibilities with [] syntax for example

var bar = 'text';
foo[bar] = 'baz';

answered Jul 05 '13 at 23:19

RiaD

46,822
11
79
123

Andy G · Answer 4 · 2013-07-05T23:28:08.903

1

They are equivalent, but you cannot use the dot notation when the attribute-name contains a space (or other non-alphanumeric characters):

foo.a space // doesn't work
foo['a space'] // does

edited Jul 05 '13 at 23:28

answered Jul 05 '13 at 23:21

Andy G

19,232
5
47
69

score 1 · Answer 5 · answered Jul 05 '13 at 23:23

The only difference is you can use variables in the second example however it's is always better to use dot notation like this

someObject.hello = ' hello john';

And the only time i use the other way is if i need to use a variable like this

var msg = 'goodbye';

someObject[msg] = 'goodbye john';

This would be the result

// someObject.hello => 'hello john'
// someObject.goodbye => 'goodbye john'

so use dot notation like obj.some and use obj[myVar] for variables

So the difference is you can use variables in the 2nd example

also if i done this

var myVar = 'test';

someObj.myVar = ' Hello Test ';

then this would be the result

// someObj.test => doesnt work - undefined
// someObj.myVar => ' Hello Test '

JavaScript objects - [] vs dot

5 Answers5