2

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)

Improve this question
2
  • 5
    No technical difference for the first example. And as you stated the [] syntax allows for what would be invalid identifiers. Commented Jul 5, 2013 at 23:15
  • ...note that all JavaScript properties are strings, so whatever expression is given to [], it will ultimately get the toString() treatment. Commented Jul 5, 2013 at 23:20

5 Answers 5

Reset to default
7

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.

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

Comments

2

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.

Improve this answer

Comments

2

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

var bar = 'text'; foo[bar] = 'baz';
Improve this answer

Comments

1

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 '
Improve this answer

Comments

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
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.