Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Callback Functions in JavaScript Callbacks with Timers Using a Repeat Timer with setInterval

Posted by Unsubscribed User
Unsubscribed User
6,269 Points

What ${...} means?

Whats this dollar sign and curly brackets mean in code of this video? Why he did it like this:

return `${hh}:${mm}:${ss}`;

Not like this:

return hh + ":" + mm + ":" + ss;

Here is the full code from this video if you dont want to play it:

const clockSection = document.getElementById("clock");

function getTime() {
  function pad(number) {
    if (number < 10) {
      return "0" + number;
    } else {
      return number;
    }
  }

  const now = new Date();

  const hh = pad(now.getHours());
  const mm = pad(now.getMinutes());
  const ss = pad(now.getSeconds());

  return `${hh}:${mm}:${ss}`;
}

function tickClock() {
  clockSection.textContent = getTime();
}

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

When you enclose a string with accents (or "backticks" :point_right: ` ) instead of single or double quotes, the system will replace any terms enclosed by a dollar sign and curly brackets with the string representation of their value.

This process is called "interpolation" and the special string that it is performed on is called a "template literal".

So your first example and second example both do exactly the same thing, but the first form is a bit more compact.

Peter May
Peter May
16,376 Points
Peter May
Peter May
16,376 Points

What Steven said. here is a link to one of the treehouse videos explaining more about the "interpolation" and "template literal" or aka ${}.

https://teamtreehouse.com/library/introducing-template-literals