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!

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 The Build an Object Challenge, Part 2 Solution

Why is undefined printing at the top of my page?

When I preview the code, everything from the challenge works, but undefined is printed at the top of my page. I can't figure out why this is happening and what I can do to prevent it. Thanks for the help!

let students = [ // five students { name: 'Chandler', track: 'Front End Development', achievements: 222, points: 2100, }, { name: 'Tom', track: 'Web Design', achievements: 432, points: 2000, }, { name: 'Nick', track: 'Front End Development', achievements: 333, points: 3200, }, { name: 'Kevin', track: 'Ruby on Rails', achievements: 400, points: 5000, }, { name: 'Devin', track: 'PHP Development', achievements: 221, points: 1200, }, ];

let message; let student;

for (let i =0; i < students.length; i++) { student = students[i]; message += <h2>Student: ${student.name}</h2> <p>Track: ${student.track}</p> <p>Achievements: ${student.achievements}</p> <p>Points: ${student.points}</p> ; } document.getElementById('output').innerHTML = message;

1 Answer

By using message += the first time through the loop you are concatenating with the initial value of message . Since message is declared without a value the initial value is undefined. To fix use let message = ''.

Ah, thank you so much! Makes total sense.