Confusion on Javascript Object's dot method

Question

In Javascript, all keys in a property are strings, right? So, in other word,

this code:

var object = {
car: 'tesla'
};

and this code are same:

var object = {
'car': 'tesla'
};

But why is it so that I can access the key car using : object["car"] but not using this: object[car]

In other words, why do I need to put the key named car around quotes if the key named car has already been turned into a string?

I read this thread but couldn't manage to get a clear answer on this particular issue. Hope someone helps.

Presumably, it's a typo since the OP means to compare dot notation with bracket notation. — canon, Mar 23 '20 at 16:27
You want to know why you have to use quotes in bracket notation and not in dot notation? — epascarello, Mar 23 '20 at 16:27
Because in bracket notation `car` is a variable `"car"` is a string. `var foo = 'car'; var data = object[foo]` — epascarello, Mar 23 '20 at 16:28
Related questions: [What is the difference between object keys with quotes and without quotes?](https://stackoverflow.com/q/4348478/215552), [JavaScript property access: dot notation vs. brackets?](https://stackoverflow.com/q/4968406/215552) — Heretic Monkey, Mar 23 '20 at 16:32
Why? Because the language specification defines it in that way. According to the specification `car` in `object[car]` refers to a variable and its value is used for the lookup. And if you want to use the value of a variable as key in an object literal you have to write it that way `{[car]: 'tesla'}`. And what the reason for this has to be asked the person(s) that did that decision. — t.niese, Mar 23 '20 at 16:52

score 4 · Accepted Answer · answered Mar 23 '20 at 16:27

4

Inside an object initializer, an identifier is treated as a property name.

The value used in bracket notation property accessors is an expression.

If you use an identifier in an expression, it is treated as a variable name.

Since you can use any expression in bracket notation, you can dynamically generate the value:

object[function_that_returns_car(argument_from_local_scope)]

object[`string with ${interpolated} value`]

object[i_from_for_loop]

… which is what makes bracket notation useful.

Compare to dot notation where you must use an identifier and that identifier is treated as the property name directly:

object.car

answered Mar 23 '20 at 16:27

Quentin

I lacked the knowledge that identifiers are treated as variable when they are placed inside a property accessor. Thanks for enlightening me. Will you please have a look at this snap: https://snipboard.io/Tl4Sie.jpg In the above snap, 12 was treated as a property name inside the bracket notation, directly, whether if I used quotation or not; since 12 is not a valid identifier, correct? – slevin Mar 23 '20 at 16:51
@slevin — That's bracket notation, not dot notation, and no, `24` isn't an identifier, it is a number literal (which gets converted, implicitly, to the string `"24"` in string context) – Quentin Mar 23 '20 at 16:52
You are right. But since 12 gets converted to "12", implicitly, and then when I use the bracket notation i.e., object["12"], to call the key named 12, doesn't it look something like this: object[" " 12" "]? I mean, 12 just got converted to "12." So when you are using an additional quotation, doesn't it look like object[""12""] inside the bracket notation? – slevin Mar 23 '20 at 17:00
No. It gets converted from the number 12 to the string 12 and everything else is just syntax that only has meaning in *source code*. – Quentin Mar 23 '20 at 17:15

1 Answers1