Accessing javaScript object using [ ] notation

Question

What is difference between below:

var ourDog = {
    "name": "Camper"
};

and

var ourDog = {
    name: "Camper",
};

And how it is able to return Camper for ourDog["name"] in both cases.

Is there any conversion happening behind the scene, when we access object properties with [] notation?

If the property name has a space then `var ourDog = { "first name": "Camper" };` then it won't work without quotes — gurvinder372, Jul 14 '16 at 11:41
I'm clear with it's usage, my doubt is how it yields same result for both object; I mean with quotes and without quotes. — blueMoon, Jul 14 '16 at 11:43
Anything in the square brackets is converted to a string. So when you give it a string, there should be no conversion needed. Some older version of Safari I think had some performance issues with the brackets, but that was quite a while back. In the literal notation, it's just alternate syntax. This is resolved before the code runs. — , Jul 14 '16 at 11:45
As to how it's able to return the same value with both syntax, it's simply because that's how they designed the language. — , Jul 14 '16 at 11:47

score 1 · Answer 1 · answered Jul 14 '16 at 12:47

Check the specs

PropertyDefinition : PropertyName : AssignmentExpression

Return PropName of PropertyName.

This part of spec suggests the formal syntax of the property name with its value.

Also, before that this part of the spec suggest that propertyName could be literalPropertyName which need not be described as a string.

PropertyName[Yield] :

LiteralPropertyName

ComputedPropertyName[?Yield]

LiteralPropertyName :

IdentifierName

StringLiteral

NumericLiteral

This is why you will get same result for both name and "name".

However, if the property name is first name, then you need to use the string otherwise you will get a compilation error since after the property name a colon : is expected.

//correct syntax
var ourDog = {
    "first name": "Camper"
};

//incorrect syntax
var ourDog = {
    first name: "Camper" //since after first there is no colon so there will be  compilation error
};

Thanks Gurvinder +1! It will be very helpful if you could further describe in simple language, found it bit difficult to understand as newbie. — blueMoon, Jul 15 '16 at 05:48
In simple words, JS engine expects a literal property name without quotes if the value is valid primitive value, else it needs to be in quotes. — gurvinder372, Jul 15 '16 at 06:26

score 0 · Answer 2 · answered Jul 14 '16 at 11:53

http://ecma-international.org/ecma-262/6.0/#sec-object-initializer

A property name can only be an identifier name (i.e. identifiers + reserved words), a string literal, or a numeric literal.

you cant use a numeric literal with dot notation but bracket notation works:

var ourDog = {
    123: "Camper",
};

Output

ourDog[123] // Camper

but

ourDog.123 // SyntaxError

for more information take a look into this

score 0 · Answer 3 · answered Jul 14 '16 at 12:05

Property names must be strings. This means that non-string objects cannot be used as keys in the object. Any non-string object, including a number, is typecasted into a string via the toString method

var object = {};
object['1'] = 'value';
console.log(object[1]);

This outputs "value", since 1 is type-casted into '1'.

Example is from MDN

Accessing javaScript object using [ ] notation

3 Answers3