CODEWITHSUNDEEP
javascriptreactjsjsx
pheromix
pheromix

Reputation: 19307

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

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

Upvotes: 3

Views: 368

Answers (4)

Rashid Naveed CH
Rashid Naveed CH

Reputation: 31

No, these are not the same. The first one is a template literal, which is used to embed a JavaScript variable inside a string.

For Example

let name = "Rashid";
let age = 20;
console.log(`My Name is ${name} and i'm ${age} years old`);

image example

The second one is to use JavaScript variables in JSX which is mixture of JavaScript and html used in React.

For Example

import "./styles.css";
let name = "Rashid";
let age = 22;
export default function App() {
  return (
    <div className="App">
      <h1>Hello {name}</h1>
      <h2>I think you are {age} years old.</h2>
    </div>
  );
}

image example

CodeSandBox Link

Upvotes: 3

kaan_atakan
kaan_atakan

Reputation: 4047

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 a JSX file:

import ReactDOMServer from 'react-dom/server';

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

Which Babel will convert to:

"use strict";

var _server = _interopRequireDefault(require("react-dom/server"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

And, when run, will output:

<ul>
  <li>A string</li>
  <li>34</li>
</ul>

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}

Upvotes: 2

Dilshan
Dilshan

Reputation: 3001

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.

Upvotes: 5

Henry Le
Henry Le

Reputation: 451

${variableName} Used when concatenating the string:

let my_name = 'abc';
console.log(`my name is ${yourname}. Bye`)
console.log('my name is ' + yourname + '. Bye')

Upvotes: 1

Related Questions