1

Below is the coding exercise from code academy whose objective is to print out name property. Can you please explain the error and how do i fix it. My code looks like:

 // Our Person constructor
 function Person(name, age) {
 this.name = name;
 this.age = age;
 }

var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
family[3] = new Person("timmy", 6);

for (var i = 0; i <= family.length; i++) {
console.log (family[i].name);
};  
// Now we can make an array of people

// loop through our new array

OUTPUT :
alice
bob
michelle
timmy

---
We're running a test below to make sure your code works.
alicebobmichelletimmy
TypeError: Cannot read property 'name' of undefined

------------------------------------------
Many thanks. 
5
  • 1
    Check that you aren't running outside the bounds of the array. Commented Jun 26, 2016 at 2:25
  • @mparnisari: Yes, OP is running out of the bounds. i < family.length. Commented Jun 26, 2016 at 2:26
  • 3
    I know, I wanted him/her to notice that :) Commented Jun 26, 2016 at 2:26
  • Jup, just remove that equal (=) Commented Jun 26, 2016 at 2:31
  • Possible duplicate of Javascript While Looping Through Array And Outputting in .innerhtml — it’s hard to find a good dupe target for this. Commented Jun 26, 2016 at 3:18

3 Answers 3

1

In the loop, you are running out of the bounds of the array. Consider the following.

I have an array of 3 items, indices are 0, 1, 2. If I use the <= operator for the loop conditional, it will yield this result: 0, 1, 2, 3. Since 3 doesn't exist, it's undefined and it can't find the property name.

Arrays are 0-based which means that indices start at zero. If we have an array with 3 elements, the length is 3, but the largest index is 2 (0, 1, 2). If the for loop continues looping even if the index is equal the length, it will return undefined because that element in the array doesn't exist.

In your case, you have 4 elements in an array, all Person objects. They are accessed by the indices 0, 1, 2, and 3. If the loop continues after 3 and checks if i is equal to the length (4), it will try to check for the 4th element of the array, which doesn't exist because the array length is only 4 with elements, not five.

Rewrite the for loop like this:

for (var i = 0; i < family.length; i++) {
    console.log (family[i].name);
}; 

This will prevent the loop from iterating to an unknown index. It stops the loop when all elements have been loop through.

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

Comments

1

as in the comments, but to explain the error (so that you learn from the mistake and understand why its causing an error): - you are running a loop that has :

for (var i = 0; i <= family.length; i++) {

This is causing the issue since arrays are zero indexed - meaning that if you have

family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
family[3] = new Person("timmy", 6);

then you will have the family array of length 4 but its indexed 0 -3.

This means that when you have i <= family.length, you are attempting to find an element with an index of 4 - which doesn't exist and so throws the error.

As mentioned you simply need to remove the = in the for loop and all will be well since i will never get to 4 and will stop at 3 - the highest index in the array.

 for (var i = 0; i < family.length; i++) {

Comments

1

Your line that says: for (var i = 0; i <= family.length; i++) {

Should say: for (var i = 0; i < family.length; i++) {

Here is the corrected code:

 // Our Person constructor
 function Person(name, age) {
 this.name = name;
 this.age = age;
 }

var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
family[3] = new Person("timmy", 6);

for (var i = 0; i < family.length; i++) {
console.log (family[i].name);
};  

2 Comments

Thanks all of you guyz. Missed it totally, made an error where expected the least :)
No worries, that's why StackOverflow is here! Happy coding!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.