What is the difference between `${variableName}` and {variableName}?

Are these two syntaxes the same : `${variableName}` and {variableName}

50 thoughts on “What is the difference between `${variableName}` and {variableName}?”

  1. ${variableName} Used when concatenating the string:

    let my_name = 'abc';
    console.log(`my name is ${yourname}. Bye`)
    console.log('my name is ' + yourname + '. Bye')
    
    Reply
  2. No, they are not the same. One is a javascript template literal, ie: string interpolation and the other is an object or possibly an object decomposition. Or, as pointed out by Dilshan, a javascript expression embedded within JSX. So:

    let var1 = 15;
    let var2 = {prop: true};
    let var3 = 'text';
    
    console.log(`${var1} ${var2} ${var3}`);
    

    outputs the string: 15 [object Object] text

    and the following:

    let var1 = {prop: true};
    let {prop} = var1;
    let var2 = {var1};
    console.log(var1)
    console.log(prop)
    console.log(var2)
    

    will produce the output:

    { prop: true }
    true
    { var1: { prop: true } }
    

    as the first three statements are equal to:

    let var1 = {prop: true};
    let prop = var1.prop;
    let var2 = {var1: var1};
    

    Or in JSX:

    let var1 = "A string"
    let var2 = 34
    console.log(<ul><li>{ var1 }</li><li>{ var2 }</li></ul>);
    

    Which Babel will convert to:

    var var1 = "A string";
    var var2 = 34;
    console.log( /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, var1), /*#__PURE__*/React.createElement("li", null, var2)));
    

    And, when run, will output:

    {type: "ul", key: null, ref: null, props: Object, _owner: FiberNode…}
    

    Unless of course you meant to type:

    `{variableName}`
    

    In which case it’s just a regular string without any interpolation. If you printed it out like so:

    console.log(`{variableName}`);
    

    Your output would be:

    {variableName}
    
    Reply
  3. No. First one is JavaScript’s template literals

    According to the tags of the question I assume the context is about React js. So the second one is use to write javascript within JSX.

    For example, If you want to loop through an array in JSX, You can do something like,

    <div>
      {arr.map(item => <p>{item}</p>)}
    </div>
    

    But template literals is feature of pure javascript.

    Template literals are string literals allowing embedded expressions.
    You can use multi-line strings and string interpolation features with
    them.

    Reply
  4. Pingback: free speed dating

Leave a Comment