Create Strings using Template Literals: Did I do good?

Tell us what’s happening:
I have solved this project and I feel awesome!:joy::joy: but I just wanted to make sure if this is a valid, efficient solution for this. I cannot say that I fully understood what’s happening in my code and that’s kinda humiliating :sweat_smile::sweat_smile:
Any feedbacks are appreciated!

Your code so far


const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";

  // change code below this line
  const {failure : str} = result;
  var resultDisplayArray = [];
  for (let i = 0; i<result.failure.length; i++){
    resultDisplayArray.push(`<li class="text-warning">${str[i]}</li>`);
  }
  // change code above this line

  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ `<li class="text-warning">no-var</li>`,
 *   `<li class="text-warning">var-on-top</li>`, 
 *   `<li class="text-warning">linebreak</li>` ]
 **/
const resultDisplayArray = makeList(result.failure);

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

Valid, yes!
Efficient, yes!

The only feedback is, why destructuring and assign a new variable, but then looping on a different data source?
It can lead to unexpected bug…

const {failure : str} = result; // new variable
for (let i = 0; i<result.failure.length; i++) // loop on original data
`<li class="text-warning">${str[i]}</li>` // print from new variable

Besides that, you got the challenge :partying_face::clap:


Note: the same can be achieved using Array.map instead of a for loop. :wink: