What is difference between parameter with ' ' and parameter without ' ' in Template literals (js)

Question

What is the difference between parameter with quotation and parameter without quotation in Template literals in JavaScript

Why when I put quotation >> ('${key}') it does the function >> fun('${key}') while when I delete quotation >> (${key}) it doesn't do the function >> fun(${key}) what different between parameter with quotation and parameter without quotation in Template literals with JavaScript

for ( let key in states) { 
console.log(key);
var n =states[key].name;
var cur = states[key].currency;
console.log()

con.innerHTML += `<div> <span>name : "  ${n}
     " </span> <br> <span>cur : "  ${cur}
     " </span> </div><br> <span>cur : "  ${key}
     " </span>  <button onclick= fun('${key}')> select </button><hr> `
}

function fun(o) { 
alert(states[o].name);
alert(states[o].currency);
}

the code above run the function >> fun('${key}')

 for (let key in states) { console.log(key); var n = states[key].name; var cur = states[key].currency; console.log() con.innerHTML += `<div> <span>name: " ${n} " </span> <br> <span>cur: " ${cur} " </span> </div><br> <span>cur: " ${key} " </span> <button onclick= fun(${key})> select </button><hr> ` } function fun(o) { alert(states[o].name); alert(states[o].currency); }

Answer 1

It just adds ' in the final string.

The reason why this works in your example, but when you omit them it doesn't is because you are using that to generate js code inside an HTML handler.

Your keys are strings, so in js they need to be enclosed in either ' or " . When you omit them they are treated as variables and most likely you don't have variables (or constants) with that name(s).