For...In with custom object in javascript

Question

function doIt()
{
    var person={firstname:"John", lastname:"Smith", age:"25"};
    var x;
    var txt="";
    for (x in person)
    {
        txt=txt+person[x] +"<br>";
    }
    document.getElementById("showtext").innerHTML=txt;
}

My question is: Why when I replace

txt=txt+person[x]+"<br>";

with:

txt=txt+person.x+"<br>";

the value of person.x is returned as undefined? In the first iteration of the loop, x should be 'firstname'. So person.x should be equal to person.firstname, and thus return the value John. I would love to understand why it returns 'undefined' instead.

Because of javascript.

DanC
– DanC

2013-02-26 15:12:23 +00:00
Commented Feb 26, 2013 at 15:12 — DanC
– DanC, Commented Feb 26, 2013 at 15:12

Graham · Accepted Answer · 2013-02-26 15:13:44Z

3

In the first case you're using 'bracket notation', where the value of the variable x is used to determine the property name.

In the second case you're using 'dot notation', where the property looked for is literally called x.

answered Feb 26, 2013 at 15:13

Graham

6,5822 gold badges39 silver badges39 bronze badges

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

Comments

winner_joiner · Accepted Answer · 2015-10-09 16:17:00Z

3

The Answer is:

Since x ist not the property name and the object doesnt have a property with the name/key x.

person.x

is undefined.

This would be equivalent to

person["x"] (the subtle difference lies in the double quotes)

what is also undefined.

For it to work with the dot-notation, you would have to write :

 eval("person." + x); // but this is evil 
 // Tested on win7 with chrome 45+

so expression eval("person." + x) would expand in the first run to eval("person.firstname" ) which returns "John"
...

What I don't recommend, because eval can introduce may security issues.

Update 1

Disclaimer: With this answer i only answered the initial question, and tried to explain the problem. With "// but this is evil " i am suggesting not to use this approche.

edited Oct 9, 2015 at 16:17

answered Feb 26, 2013 at 15:12

winner_joiner

15.3k4 gold badges42 silver badges71 bronze badges

3 Comments

Niko Over a year ago

Not only eval but also completely unnecessary.

winner_joiner Over a year ago

It is just to make a point, that x is a String and not the name of the parameter, and mainly to answer the question to the full extend. :)

winner_joiner Over a year ago

It is not unnecessary it was an answer to the question, an explanation why the things are how they are(what the initial question was). I was trying to teach fishing, not just hand over a fish.

Xymostech · Accepted Answer · 2013-02-26 15:13:16Z

2

When you write person[x], it means "look up the value of x, and then find that element in person". When you write person.x it means "look up the value of x inside of person".

person doesn't have an x element, so you're getting undefined. You really do just want person[x].

answered Feb 26, 2013 at 15:13

Xymostech

9,8803 gold badges36 silver badges45 bronze badges

Comments

QuentinUK · Accepted Answer · 2013-02-26 15:13:30Z

0

x will be a string. eg "person" so you have to use [] brackets

answered Feb 26, 2013 at 15:13

QuentinUK

3,06723 silver badges20 bronze badges

Comments

Andrew Kirkegaard · Accepted Answer · 2013-02-26 15:13:35Z

0

You can't use dot notation with a variable key. It will look up the property "x" which is undefined. person[x] is the right way.

answered Feb 26, 2013 at 15:13

Andrew Kirkegaard

1,68411 silver badges14 bronze badges

Comments

DanC · Accepted Answer · 2013-02-26 15:16:17Z

0

Javascript will allow you to access an object's property using a variable if you use the square brackets syntax. Thus, person[x] will do what you are trying to do as long as x contains a string representing the property name. The syntax construction person.x is equivalent to person["x"].

answered Feb 26, 2013 at 15:16

DanC

8,8559 gold badges48 silver badges64 bronze badges

1 Comment

frrlod Over a year ago

Thank you all for your quick answers!

Collectives™ on Stack Overflow

For...In with custom object in javascript

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related