1

i am watching currently a course and the teacher is using a lot of the $-sign:

var _ = require('underscore');

const weapons = ['candlestick', 'lead pipe', 'revolver'];

const makeBroken = function(item){
  return `broken ${item}`;
};

const brokenWeapons = _.map(weapons, makeBroken);

console.log(brokenWeapons);

I am using instead this variant:

var _ = require('underscore');

const weapons = ["candlestick", "lead pipe", "revovler"]

function makeBroken(item) {    
    return 'broken ' + item;   
}

const brokenWeapons = _.map(weapons, makeBroken)

console.log(brokenWeapons);

But when i try to modify my version to "her" style, it doesnt work:

var _ = require('underscore');
    
const weapons = ["candlestick", "lead pipe", "revovler"]
    
function makeBroken(item) {    
      return 'broken  ${item}';   
 }
    
 const brokenWeapons = _.map(weapons, makeBroken)

The first and second give me this out and is working: [ 'broken candlestick', 'broken lead pipe', 'broken revovler' ] The third give me this output and is not working: [ 'broken ${item}', 'broken ${item}', 'broken ${item}' ]

My questions: Is the variant of the teacher better with the ${}-method or it is only a matter of taste? Why is the modified variant (the third) not working?

Thanks a lot for the help of the stupid questions :D

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Sun23
  • 77
  • 8
  • 4
    You need to use backtick `\`` instead of single quote`'`. – Hassan Imam Jun 19 '21 at 14:08
  • You have to use the ` character in order to use variable interpolation in strings. – Pointy Jun 19 '21 at 14:08
  • 1
    Well, there’s a clear difference between `'` and `\`` and the [documentation](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#description) is pretty clear on this. – Sebastian Simon Jun 19 '21 at 14:08
  • 1
    [Duplicate](//google.com/search?q=site%3Astackoverflow.com+js+template+literal+not+working) of [ES6 / ECMA6 template literals - not working](/q/37245679/4642212). – Sebastian Simon Jun 19 '21 at 14:09
  • [What does this symbol mean in JavaScript? - Stack Overflow](https://stackoverflow.com/questions/9549780/what-does-this-symbol-mean-in-javascript) – Andreas Jun 19 '21 at 14:11
  • Also see the documentation on MDN about [expressions and operators](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) and [statements](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements). – Sebastian Simon Jun 19 '21 at 14:15

2 Answers2

2

The reason is because you are using ' instead of `

For example:

return 'broken  ${item}';

Is wrong because you are using '

Now the rigth way:

return `broken  ${item}`;

More info about template literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Alumno Cabreado
  • 191
  • 8
  • 1
    To clarify the difference between ' and `, since it might not be so clearly visible for some with e.g. vision loss, the first is a single-quote mark and the other is a backtick (aka grave accent). Here's a link to the MDN-docs on template literals to go with this answer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals – Emma Jun 19 '21 at 14:12
0
  • you need to use GRAVE ACCENT ` instead single or double quotes
JS_INF
  • 467
  • 3
  • 10