Logging variables via an ES6 tagged template

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