Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects Using `for in` to Loop Through an Object's Properties

Kevin Faust
Kevin Faust
15,353 Points

difference with array?

when would one use objects instead of arrays? because they both have like the exact same function

3 Answers

rydavim
rydavim
18,813 Points

I wouldn't categorize myself as a javascript expert, but I can offer some general observations.

Arrays are great for storing lists of ordered things, while objects are better for organizational structures that care more about properties than order.

Do you need to preserve or care about order? Use an array. Are you more interested in key --> value pairs, or properties? Use an object.

If you're interested in a bit more information, I found this great article by Slavko Pesic pretty informative. He's also got a second part on iteration and structure.

Hopefully that helps!

Kevin Faust
Kevin Faust
15,353 Points

Hey rydavim, Thanks for the information. I looked through both the articles and I have a better sense of objects now. The other thing I'm confused about is the for-in loop. in this video Dave created a object stored in the variable 'person'. And this was the loop that was written:

for (var prop in person) {
  console.log(prop, ': ', person[prop]);
}

This is my understand of how it is set up: So 'for(in) { }', is always the basic set up for this loop. To the left of the 'in' is just any random variable which will represent the entire left side of the ':' in the object variable. and to the right of the 'in' is the name of the object variable. And I believe the inside of the console.log works like this: 'prop' first selects the first row of the left side and then person[prop] selects the first row of the right side and then it displays it to the console. However it can also be written as person[name] to display the name or etc. And this is a loop so it's done for every single row of the object variable.

Sorry if my explanation is hard to understand but basically Im just wondering how the for-in loop is broken down. I watched the video several times and read online but I can't seem to fully grasp this concept. Any help would be appreciated.

rydavim
rydavim
18,813 Points

I always thought of for in loops very colloquially. You have an object, and the object has properties. For each of the properties in the object, you want to do something.

It's basically just a convenient way to enumerate the properties of an object, because you're going to do that all the time.

It's worth noting that the order isn't strictly defined like it is in an array.

So you know how to iterate over an array using for loops. In that case, you're just going by index number, starting with zero, right? So for the items in array ["foo", 42, true] you would just loop over them using those index values.

// Array Example
[0] --> "foo"
[1] --> 42
[2] --> true

Using a for in loop on an object is doing a similar thing, but instead of index numbers, you're using keys. So for example, you might have a song object which has properties associated with it.

So say we wanted to print out a playlist to a webpage using the information from the song object(s). We could use a for in loop to say for each property in this song object, print out the value.

// Object Example
"songName" --> "Money"
"artist" --> "Pink Floyd"
"album" --> "Dark Side of the Moon"
"trackTime" --> "6:22"

From your description, you seem to already have a pretty good idea of how it works. Hopefully this clarifies things at least a little bit. I'm not really an expert, but please let me know if you still have questions.

Kevin Faust
Kevin Faust
15,353 Points

One more thing. In the for-in loop, you use a variable inside it to represent the properties. Dave said you can use any variable but wouldn't you always use "var prop"? Because that variable will always represent the properties in the object.

rydavim
rydavim
18,813 Points

I tend to just call it prop, yes.

I suppose if you had a particular object that had some logical grouping of properties then another, more specific, name might make sense.

Jamie Perlmutter
Jamie Perlmutter
10,955 Points

You would use an object for more information, so states and their capitals. Arrays can hold things more like a list. You can match the array to another array for reference however in an object you can put arrays as part of your object. It's pretty cool. If I remember right that is.

aufbasfd