How does this javascript object array work?

Question

I am trying to understand something very basic. If I have an object like this:

var topics = {}

And I do this:

topics[name] = ["chapter 1", "chapter 2", "chapter 3"];

When I log this object, I don't see the name attribute. What have I done exactly? Have I created a key called name with the value of an array?

Of course I know I can do that by just doing

topics.name =  ["chapter 1", "chapter 2", "chapter 3"];

But then what is this doing?

topics[name] = ["chapter 1", "chapter 2", "chapter 3"];

Could someone please clarify?

This doesn't answer you question but I believe you really want to ask the difference between topics[name] = ["chapter 1", "chapter 2", "chapter 3"]; and topics["name"] = ["chapter 1", "chapter 2", "chapter 3"];? — Matt Fellows
– Matt Fellows, Commented Oct 21, 2011 at 13:26

Gabriele Petrioli · Accepted Answer · 2011-10-21 13:26:37Z

3

When you use the [] notation it expects an expression in between, that translates to a string.

Using name not enclosed in quotes 'name' it assumes you are using a variable called name.

Which in your case is undefined.

The correct usage would be

topics["name"] = ["chapter 1", "chapter 2", "chapter 3"];

If you want to use a variable you can do things like

var prop = 'name';
var topics = {};

topics[prop] = ["chapter 1", "chapter 2", "chapter 3"];

this will create the name property on the object.. useful for dynamic/automatic creation/filling of objects..

answered Oct 21, 2011 at 13:26

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

2 Comments

Amit Erandole Over a year ago

Does that mean I can assign a function with expressions that evaluate to a string (like a topicName) or a number (like a topicID)?

Gabriele Petrioli Over a year ago

@Amit, yes you can do topics[func()] = '...'; if func() returns something that can be converted to string.. (if that is what you are asking..)

mck89 · Accepted Answer · 2011-10-21 13:26:01Z

3

Your are creating a property on the object with a name based on the value of the name variable. If you want to create a property called name in that way you need to do:

topics["name"] = ["chapter 1", "chapter 2", "chapter 3"];

answered Oct 21, 2011 at 13:26

mck89

19.3k17 gold badges93 silver badges111 bronze badges

Comments

Amadan · Accepted Answer · 2011-10-21 13:26:56Z

3

That should generate an error, unless you have variable name defined as a string or a number.

These three are equivalent:

var name = "key";
topics[name] = "value";

topics["key"] = "value";

topics.key = "value";

answered Oct 21, 2011 at 13:26

Amadan

200k23 gold badges252 silver badges321 bronze badges

Comments

pimvdb · Accepted Answer · 2011-10-21 13:28:01Z

2

There are generally three ways to distinguish:

topics.name
topics["name"]
topics[name]

The first two are equivalent. So .xxx represents the literal key xxx, as does ["xxx"].

The last one will use whatever the name variable contains. E.g.:

var name = "test";
topics[name] = 123; // topics["test"] now exists

answered Oct 21, 2011 at 13:28

pimvdb

155k80 gold badges313 silver badges358 bronze badges

Comments

Joseph Marikle · Accepted Answer · 2011-10-21 13:28:39Z

2

The resulting structure can be seen in the following screen capture. As stated by mck89, you probably want to use the "name" syntax

enter image description here

answered Oct 21, 2011 at 13:28

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

3 Comments

Amit Erandole Over a year ago

thanks for the comparative screenshots. That made things a lot clear

Dan D. Over a year ago

Don't use JPEG for screenshots. it makes them all fuzzy.

Joseph Marikle Over a year ago

@DanD. sorry about that... It usually outputs as a png... I wonder why it didn't that time.

Michael Berkowski · Accepted Answer · 2011-10-21 13:27:09Z

1

If your code did not result in a ReferenceError, you may have already had a variable in global scope named name, and created a new property of name's contents.

answered Oct 21, 2011 at 13:27

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Collectives™ on Stack Overflow

How does this javascript object array work?

6 Answers 6

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related