Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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
215,372 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

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