JavaScript for..of loop with .includes() method - beginner having trouble

Question

I am just starting to learn JavaScript and so this is probably a simple mistake on my part, but where I am having trouble, is that I am supposed to print different instructions to the console for each string within each array and when I run what I have now, it repeats the same elements each time and adds the next string to them with each iteration instead of having instructions for each individual string in the new array.

Here is my code:

const coffees = [ 
    "light colombian roast", "hawaiian dark roast", "guatemalan blend medium roast",
    "madagascar espresso roast", "jamaican dark blue", "jamaican medium roast",
    "salvador robusto light", "bali espresso roast"]

let lightRoast = []
let medRoast = []
let darkOrEspresso = []

for (const roast of coffees) 
{
    if (roast.includes("light") )
    {
        lightRoast.push(roast)
        console.log(`I'll have the ${lightRoast} and drink it black`)
    }
    else if (roast.includes("medium"))
    {
        medRoast.push(roast)
        console.log(`I'll have the ${medRoast} and add cream only`)
    }
    else if (roast.includes("dark") || roast.includes("espresso"))
    {
        darkOrEspresso.push(roast)
        console.log(`I'll have the ${darkOrEspresso} and add cream and sugar`)
    }
}

I am trying to make the console print these instructions for each individual string in the new arrays like this depending on if its in the light, med, or dark array:

"I'll have the xxx and drink it black" 
"I'll have the xxx and add cream only"
"I'll have the xxx and add cream and sugar"

but instead, I am getting results like this where the strings are in the correct array, but are being added on top of each other instead of each having their own line:

I'll have the light colombian roast,salvador robusto light and drink it black
I'll have the guatemalan blend medium roast,jamaican medium roast and add cream only
I'll have the hawaiian dark roast,madagascar espresso roast,jamaican dark blue,bali espresso roast and add cream and sugar

Would anyone mind trying to see what I am doing wrong? Hopefully my instruction make sense.

Answer 1

Precise variable names help prevent bugs. Here, your lightRoast variable is an array of the coffee names so far which have been identified to be light. Consider renaming to something like lightRoastNames (plural), and renaming roast to roastName (singlular). Then, the problem should be obvious - you're using

console.log(`I'll have the ${lightRoastNames} and drink it black`)

when you should be using

console.log(`I'll have the ${roastName} and drink it black`)

const coffees = [
  "light colombian roast", "hawaiian dark roast", "guatemalan blend medium roast",
  "madagascar espresso roast", "jamaican dark blue", "jamaican medium roast",
  "salvador robusto light", "bali espresso roast"
]

const lightRoastNames = [];
const medRoastNames = [];
const darkOrExpressoRoastNames = [];

for (const roastName of coffees) {
  if (roastName.includes("light")) {
    lightRoastNames.push(roastName)
    console.log(`I'll have the ${roastName} and drink it black`)
  } else if (roastName.includes("medium")) {
    medRoastNames.push(roastName)
    console.log(`I'll have the ${roastName} and add cream only`)
  } else if (roastName.includes("dark") || roastName.includes("espresso")) {
    darkOrExpressoRoastNames.push(roastName)
    console.log(`I'll have the ${roastName} and add cream and sugar`)
  }
}

Though, since you don't appear to be using the arrays anywhere, you could remove them entirely and make the code much simpler:

const coffees = [
  "light colombian roast", "hawaiian dark roast", "guatemalan blend medium roast",
  "madagascar espresso roast", "jamaican dark blue", "jamaican medium roast",
  "salvador robusto light", "bali espresso roast"
]

for (const roastName of coffees) {
  if (roastName.includes("light")) {
    console.log(`I'll have the ${roastName} and drink it black`)
  } else if (roastName.includes("medium")) {
    console.log(`I'll have the ${roastName} and add cream only`)
  } else if (roastName.includes("dark") || roastName.includes("espresso")) {
    console.log(`I'll have the ${roastName} and add cream and sugar`)
  }
}