With the code below I have reached the same result with less code, what are the advantages of the approach in the video?

// the objects //

const pet = [
  {name: 'Jesse', type: 'dog', breed: 'aussie', age: 0, photo: 'img/aussie.jpg'},
  {name: 'Luna', type: 'dog', breed: 'dachshund', age: 10, photo: 'img/dachshund.jpg'},
  {name: 'Toby', type: 'dog', breed: 'golden retriever', age: 5, photo: 'img/golden.jpg'},
  {name: 'Bickie', type: 'cat', breed: 'persian', age: 40, photo: 'img/persian.jpg'},
  {name: 'Tubby', type: 'rat', breed: 'tabby', age: 2, photo: 'img/tabby.jpg'}
]; 

// the code displaying the objects on the page // 

for (let i = 0; i < pet.length; i++) {
  document.write(`
      <h2>${pet[i].name}</h2>
      <h3>${pet[i].type} | ${pet[i].breed}</h3>
      <p>Age: ${pet[i].age}</p>
      <img src=${pet[i].photo} alt=${pet[i].breed}>
`)
  ;
}