Get list of properties/method from JS

1

I am studying JS and I got stuck in a chapter of A Smarter Way to Learn JavaScript.

If you want a list of an object’s properties you do this as written in the book:

1 var listOfProperties = [];
2 for (var prop in plan1) {
3 listOfProperties.push(prop);
4 }

I could understand line 1 but for rest not really. If you could explain this to me in plain English with links for further reading I will be grateful.

2

Here is a link to a bit of code showing it being used … its done in pythontutor … as your code dosent have a object plan1 i created a small one with two properties to show it work.

http://www.pythontutor.com/visualize.html#code=var%20plan1%20%3D%20{‘make’%3A%20’car’,%20’type’%3A%20’manual’}%3B var%20listOfProperties%20%3D%20[]%3B %20for%20(var%20prop%20in%20plan1)%20{ listOfProperties.push(prop)%3B } console.log(listOfProperties)&cumulative=false&curInstr=9&heapPrimitives=false&mode=display&origin=opt-frontend.js&py=js&rawInputLstJSON=[]&textReferences=true

1 Like
3

Thanks, but I could not grasp it yet.

Any idea about the use of prop?

4

If you’ve seen javascript objects before, you know they follow a certain form:
{property1: value1, property2: value2}

Imagine this was the object called “plan 1” :
var plan1 = {apple: 1, banana: 2, coconut: 3};
The properties of the “plan1” object are apple, banana, and coconut.

A “for…in” loop is used specifically for objects and it loops through the object.

for (var prop in plan1) {
The “for” and the “in” part should be clear. That’s just the syntax for a “for…in” loop.
The “var prop” part just declares a new variable called “prop” that’s to be used specifically for the loop.
You don’t have to call it prop, you can call it whatever you want.
The “plan1” part is the actual object that you want to loop through.

The loop will run once for each item in the object, so going back to our “plan1” example,
var plan1 = {apple: 1, banana: 2, coconut: 3};
In this case, because the object has 3 items, the loop will run three times.

Each time it runs, the variable you declared (in our case, the variable is “prop”) will have it’s value changed to the property of whichever item the loop is processing. In other words, the first time the loop runs, the variable “prop” will equal “apple”, the second time prop will equal “banana”, and the third time, “prop” will equal “coconut”.

This part should now make sense:
listOfProperties.push(prop);

It’s pushing each property name (“apple”, “banana”, and “coconut”) into the “listOfProperties” array.

At the end, the “listOfProperties” array should equal [“apple”, “banana”, “coconut”]

Hopefully that’s clear.

Here’s a resource on “for…in” loops:

2 Likes
5

Hey @FakhriAz,
what the second line does is iterate over the properties of the object named plan1 and adding it to the listOfProperties array.

To further explain, let’s say you have an object plan1 with the following properties:

let plan1 = {
     first : "nothing",
     second : "something",
     third : 3
};

Once you run the code you mentioned, the listOfProperties array will have the fields first, second and third since those are the properties of the plan1 object. You will NOT have the values of those properties.

Hope that clarifies things for you.