- Use `for in` to Loop Through an Object's Properties 4:31
- Loop Through an Object's Properties 2 objectives
- Useful JavaScript Object Methods
- Store Objects in Arrays 3:45
- Create an Array of Objects 2 objectives
- Build an Object Challenge 1:17
- Build an Object Challenge – One Solution 3:09
- Display an Array of Objects on the Page – One Solution 7:14
- Review `for in` and Arrays of Objects 6 questions
Preview
Video Player
00:00
00:00
Use `for in` to Loop Through an Object's Properties
4:31Use a for...in loop to access each key (or property name) in an object.
[MUSIC]
0:00
Hi again, there are lots of similarities
between arrays and objects.
0:05
Mainly they both provide a way
to store multiple values.
0:09
Arrays store each value in a specific
numeric position called an index, and
0:12
objects store multiple values that can be
accessed using a key or property name.
0:16
Because array elements have numeric index,
a for
0:21
loop is one quick way to access
each element in the array.
0:24
To access data that's inside an object,
0:26
you use a special type of
loop called a for in loop.
0:29
For in iterates or loops over each key or
property name in the object.
0:34
The structure looks like this.
0:38
The object here refers to
the name you gave the object.
0:41
For example,
let's say you had a student object.
0:44
If the object's name is student,
then the for in loop will look like this.
0:47
The variable key represents
a property name inside the object.
0:52
A different property name gets assigned to
this variable each time through the loop.
0:55
For example, let's say you log
the value of key to the console.
1:01
This would log all the property names to
the console, in this case name and grades.
1:04
The word key here is only a variable name,
so that means you can change this to
1:09
property, propName, or
whatever you'd like.
1:13
Now this gives you access
to the key names only, so
1:16
how do you get to the actual
values associated with each key?
1:19
Well, you can't use dot
notation in this case.
1:22
For example this will not work,
1:25
because this would try to access a
property that's literally named propName.
1:27
The only way to access
an object's properties using for
1:31
in this with JavaScript's bracket notation.
1:35
Include a set of square
brackets after the object name,
1:38
holding the variable name you used.
1:40
This dynamically accesses
each property value.
1:42
Let's create a for in loop.
1:45
To follow along,
open the file for-in.js, and
1:47
make sure to update the script
tagged in index.html, so
1:51
that the source attribute
points to js/for-in.js.
1:55
The file has the same person object
you've worked with all along.
2:01
Now we'll use for in to iterate over
the properties of this object and
2:05
display them in the console.
2:09
I'll start by writing the for
in statement.
2:11
The name of the object is person, and
2:20
prop represents the name of
a property in the object.
2:23
A different property name in the object
gets assigned to the prop variable
2:28
on each iteration.
2:31
I named it prop, but again, since it's
a variable you can name it whatever you
2:32
want, key, property,
studentData, anything.
2:36
I'll log the value of prop to
the console on each iteration.
2:41
I'll save the file and
preview index.html in the browser.
2:47
The console displays the name of
each property in the person object.
2:52
Let's also access the value of a property
and display it in the console.
2:56
I'll change this to a template literal
3:01
that inserts the value
of prop into the string.
3:04
Then add a colon,
followed by the property's value.
3:07
I'll try person.prop.
3:11
Notice how the console outputs
undefined for each value.
3:17
This means that the property
doesn't exist, and it doesn't.
3:21
The JavaScript engine is
looking inside the object for
3:23
a property that's literally named prop.
3:27
Prop is just the name of this variable.
3:31
Remember, to access a value,
you use the square bracket notation.
3:33
I'll remove the period and add
the variable name between square brackets.
3:39
When using the bracket notation,
the JavaScript engine looks for
3:44
a string value to access
the property value.
3:47
For example, I'll type name as a string,
and let's see what that does.
3:50
Notice how it returns all
the different property names, but
3:56
the same property value,
the value of the name property.
4:00
Since I've explicitly specified the name
property between the square brackets,
4:04
it returns only the value of
name each time through the loop.
4:09
I'll replace this string with
the variable name prop, and
4:15
that dynamically outputs the keys and
their proper values.
4:18
So remember that when using a for in loop,
4:22
you have to use bracket notation
to access a property value.
4:25