Undefined at beginning of list?

var html;
var students = [
    {
      name: "Sean Flanagan",
      track: "Beginner JavaScript",
      achievements: 252,
      points: 21829
    },
    {
      name: "Richard Johnson",
      track: "Web Design",
      achievements: 15,
      points: 1400
    },
    {
      name: "Robert Walker",
      track: "Learn HTML",
      achievements: 35,
      points: 500
    },
    {
      name: "Joanne Maxwell",
      track: "Front End Web Development",
      achievements: 50,
      points: 3500
    },
    {
      name: "Christine Robinson",
      track: "Learn Java",
      achievements: 72,
      points: 5000
    }
  ]

function print() {
    document.querySelector('body').innerHTML = html;
    }

for (var i = 0; i < students.length; i += 1) {
    html += `<p><strong>Student ${i + 1} Info:</strong></p>`;
    name = students[i].name;
    html += `<p>Name: ${name}</p>`;
    }

print()