Author: Daniel

In ES6 the templated literals were added in Javascript. They are used to interpolate values in a string.

const name = 'Tom'
const age = 20;
const myString = `The name is ${name} and the age is ${age}.`;
/* 
myString is now "The name is Tom and the age is 20."
before  ES6 the templated literals we had to write:
myString = "The name is " + name + " and the age is " + age "."
*/

So, this made things a bit more elegant when concatenating strings.

But we can do more than this. We can define tagged template literals. Basically, they are a combination of a tag function and a string template literal. What's returned from the tag function will determine the final format of the string.

Let's say we want to show a string like this one in the below picture.

The basic string literal will just alow use to write this:

const text = `${p.name} is ${p.age} years old.`;

However, with the tagged template literals we can say:

const text = setHighlightTags `${p.name} is ${p.age} years old.`;

We can name the tag function however we want. In our example the setHighlightTags is defined as:

function setHighlightTags(strings, ...values) {
   let str = '';
   strings.forEach((string, i) => {
       str += string;
       if(values[i]) 
          str += `<span class='hl'>${values[i]} </span>`;
   });
   return str;
}

And the .hl CSS class has just some simple rules:

.hl {
    background-color: yellow;
    padding: 2px 10px;
}

And that's pretty much all we need. We can get more creative when we need it. There are libraries, like styled-components (React) or chalk (for colorful logs) that take this feature to the next level.

If you want you can read more about it here. Also, check out below the full codepen for this example:

See the Pen
tagged-template-literals by JS Craft (@js-craft)
on CodePen.

The fact that JavaScript is such a flexible language makes it maybe the easiest language to start with and the hardest to master. I’ve been working with JavaScript for more than 10 years now and I still stumble upon some hidden syntax or tricks that I never knew existed.

So let's see some JS mysteries that I've recently discovered.

1. There is a function constructor. You will give it the parameters and the body of the function and it will return back the actual function :

const diff = new Function('a', 'b', 'return a - b');
diff(20,13) // 7

2. We have a with statement in Javascript. It takes as a parameter an object and binds the properties of that object to the scope of the contained code block.

const book = {
    author: 'Ernest Hemingway',
    title: 'The Sun Also Rises'
}
with(book) {
    console.log(author); // Ernest Hemingway
    console.log(title); // The Sun Also Rises
}

3. we can use the + operator to convert a string to a number. No more the need to use functions like parseInt() or parseFloat(), unless you want to parse to that specific numerical type.

const nr = +'1.5';
nr + 1; // 2.5

4. we can assign properties to functions. We can make configurable functions by assigning specific properties to that function.

function sayHello() {
    if (sayHello.country = 'US') {
        return alert('Hi there!');
    }
    if (sayHello.country = 'FR') {
        return alert('Bonjour !');
    }
    if (sayHello.country = 'GR') {
            return alert('Guten Tag !');
        }
    return alert('Hi');
}
sayHello.country =  'FR';
sayHello(); // alert('Bonjour !');

Also, we can use these function properties as counters or "static variables".

5. we can use the arguments.callee.caller to see what function invoked the current function. The arguments var is a default of any js function. But we have the arguments.callee.caller that will tell us who called that function. Something like a console.trace() but just one level deep.

function sayHello() {
    alert(arguments.callee.caller); //start
}

function start() {
    sayHello();
}()

Also the arguments.callee refers to the currently running function.

6. we have a void operator. You give it anything and it returns back undefined.

void(1); // undefined
void(true); // undefined
void(false); // undefined
void({}); // undefined

You may ask yourself why you would want an operator like this one? Well because before ES5 you could actually assign a new value to the original undefined:

undefined = "abc";
x = undefined;
alert(x); // "abc"
// this will not work anymore
// but it explains why we have the void operator 

So ... Javascript the language where surprises never end!

I find myself sometimes using the console.trace() to check from where a method was called. That is when I am too lazy to set breakpoints in the Javascript debugger.

I think it can be useful and made this short video about it. Enjoy, and please write to me at js.craft.hq@gmail.com if you want a video about a specific JS or CSS subject.