使用[]表示法访问javaScript对象

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?

Answer 1

Check the specs

PropertyDefinition : PropertyName : AssignmentExpression

1. 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
};

Answer 2

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

A property name can only be an identifier name (ie 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

Answer 3

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