CODEWITHSUNDEEP
javascriptarraysoopobjectloops
Codist
Codist

Reputation: 1208

Simple theory behind getting the property name from a for-in loop?

First of all, I want to say that I'm huge on theory. I don't like abstraction. I want to know how things work before trying to use them. I have been searching everywhere for a simple theory behind getting the property name (not the value) for a for-in loop. I will demonstrate it in code so hopefully someone can potentially explain how it works exactly...

var obj = { one: 1, two: 2, three: 3 }; // A basic object instantiated with 3 public properties.

for (var prop in obj) {
    console.log(prop); // logs "one", "two" and "three" ???
}

I figured it would evaluate prop variable as 1, 2 and 3 but it logs out the actual property name. I know obj[prop] is what evaluates to the actual value of those properties but this is like an inception to me. prop is a reference that stores another reference?

I'm trying to think about this in terms of how variable i in a for loop is kinda like the index of an array.

Also what is this and is it similar to what I'm asking?

var obj = { "one": 1, "two": 2, "three": 3 };

How are the property names strings?... You can't say var "string" = "Hello, World!"; as thats illegal.

Upvotes: 5

Views: 128

Answers (4)

Esailija
Esailija

Reputation: 140230

The names of object properties are strings, obj.prop is just syntactic sugar for obj["prop"] when prop is a valid identifier. You can't for instance say obj.my property, you have to write obj["my property"]

for..in enumerates the enumerable keys in an object and its prototype chain, assigning the current string key to the left side. So you can do this:

var a = [], i = 0;
for( a[i++] in obj );

//a is an array: ["one", "two", "three"]

As the loop progresses, the left side is evaluated to a reference (i increments as a side effect of this) and assigned the current key. So it looks like a[0] = key, a[1] = key2 and so on.

If you want all the details, see the specification for:

Upvotes: 3

JohnB
JohnB

Reputation: 13713

A JavaScript object is a dictionary, with the keys being arbitrary strings, not necessarily valid JavaScript identifiers. Hence there are things you can use as property names (namely, any valid string), but not as variable names.

For/in is defined to loop over the (enumerable) property names (i.e. the keys), which is also true for arrays, such that

for (var i in [10,20,30]) document.write (i);

will print "012", rather than "102030".

A property can be defined to be non-enumerable, in which case for/in will skip it. In ECMAScript 5, you can define non-enumerable properties yourself. Enumeration order is undefined. Note that for/in also considers the properties of the prototype (which is the reason for the fact that you will frequently see a hasOwnProperty condition immediately inside the loop).

Upvotes: 1

Lightness Races in Orbit
Lightness Races in Orbit

Reputation: 385174

prop is a reference that stores another reference?

No, prop is the key of the element you've reached in your iteration. A string.

That's it. Nothing more complicated than that.

You can't say var "string" = "Hello, World!"; as thats illegal

It's also a completely different language feature...

Arguably, objects were provided at least in part to workaround the very restriction you've identified.

Upvotes: 1

jAndy
jAndy

Reputation: 236022

I have to admit I don't fully understand the question, but I try to answer as best as I can nonetheless. An object is pretty much comparable a hash (-table). As you know, that consist out of an identifier and a value which is stored behind that identifier.

In ECMAscript, that identifier is the key within an object.

For an Array, there is only one interesting thing you want to receive when looping over it, since its "keys", are just indexed numbers (which in reality are also Strings here, but that just as a sidenote). But, since object keys can be anything, there is a conflict when looping them. Do you want to get the key or the value ?

Thats why there is the for-in loop. You're looping over the keys and with that key you might also be access the value behind.

However - you are not fully alone with the confusion. That is why ECMAscript Next will introduce the for-of loop for objects, which inverts this logic. Instead of keys you will directly loop over the values.

var obj = { one: 1, two: 2, three: 3 };

for(var value of obj) {
    console.log(value); // 1, 2, 3
}

Upvotes: 4

Related Questions