Portrait Dr. Axel Rauschmayer
Dr. Axel Rauschmayer
Homepage | Twitter
Cover of book “Exploring ES6”
Book, exercises, quizzes
(free to read online)
Logo of newsletter “ES.next news”
Newsletter (free)
Cover of book “JavaScript for impatient programmers”
Book (free online)

Logging variables via an ES6 tagged template

(Ad, please don’t block)

This blog post shows how you can use a tagged template to log variables more efficiently.

In order to understand it, you should be familiar with ECMAScript 6 template literals and tagged templates. For an introduction, consult chapter “Template literals and tagged templates” of “Exploring ES6”.

The problem: redundancy  

If you want to log both name and value of a variable in a traditional manner, there is redundancy:

let tmp = 123;
console.log('tmp='+tmp);
// Output:
// tmp=123

Even a template literal doesn’t help:

console.log(`tmp=${tmp}`);

The solution: a tagged template  

The solution is to implement a custom tag function called vars. A template tagged with that function eliminates the redundancy:

console.log(vars`${{tmp}}`);

The object literal {tmp} inside the substitution ${} is an abbreviation for (a so-called “property value shorthand”):

{tmp: tmp}

Accordingly, the tag function vars expects its substitutions to be objects:

function vars(templateStrings, ...substitutions) {
    let result = templateStrings[0];
    for (let [i, obj] of substitutions.entries()) {
        let propKeys = Object.keys(obj);
        for (let [j, propKey] of propKeys.entries()) {
            if (j > 0) {
                result += ', ';
            }
            result += propKey+'='+obj[propKey];
        }
        result += templateStrings[i+1];
    }
    return result;
}

You can put multiple variable names inside a substitution:

let foo = 123;
let bar = 'abc';
let baz = true;
console.log(vars`Variables: ${{foo, bar, baz}}`);

// Output:
// Variables: foo=123, bar=abc, baz=true