Is es6 string template updated when variable inside it updates

Question

Suppose I have a snippet as follows:

var temp='';
var template=`I am a ${temp}`;
var temp='developer';

So when I access template after second assignment of temp what will be the result? Does es6 string template is a dynamic template or static as it is created?

Yeah though to that, but good for documentation to be in here. — Mehrdad Shokri, Aug 05 '16 at 22:04
@Xufox: Because that tells one how one's specific (and possibly flawed) experiment worked, not how the technology is meant to work. — T.J. Crowder, Aug 05 '16 at 22:04
Ask yourself the question, in the code `var a = 1; var b = a + 1; a = 2;`, do you think `b` is automatically updated when the value of `a` is reset? — , Aug 06 '16 at 03:43

score 3 · Accepted Answer · edited Aug 05 '16 at 22:04

3

It's static. You can think of it like a string.format from another language. In order for it to be dynamic it would need to be watching variables which would cost a great deal in terms of performance and flexibility.

If you're looking for string binding in HTML, look in to a framework like AngularJS or ReactJS or KnockoutJS or VueJS or RivetsJS or a dozen others.

edited Aug 05 '16 at 22:04

T.J. Crowder

1,031,962
187
1,923
1,875

answered Aug 05 '16 at 22:02

Jack Guy

8,346
8
55
86

score 2 · Answer 2 · answered Aug 06 '16 at 00:29

Template strings are not live, but you can use tagged templates to fake it

function live(strings, ...values) {
  var arr = new Array(strings.length*2 - 1);
  strings.forEach((str,i) => arr[i*2] = str);
  return {toString() {
    values.forEach((obj,i) => arr[i*2+1] = obj.value);
    return arr.join('');
  }};
}
var temp = {value: ''};
var template = live`I am a ${temp}`;
console.log(template + ''); // 'I am a '
temp.value = 'developer';
console.log(template + ''); // 'I am a developer'

alex · Answer 3 · 2016-08-07T13:43:56.907

Your example

var template=`I am a ${temp}`;

is an example of a template literal, called as such since the update of ES2015 / ES6 (They were called template strings but this has been updated, see the docs).

From MDN

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 / ES6 specification.

Template literals are a function that take both the expressions inside the placeholders (such as in your example ${temp}) and the string literals as arguments into a function that concatenates them into a single string.

The same scoping rules that apply to javascript in general usage applies here. In your case the compiler will first run through the code and scope the LHS references var temp and var template, but assignment will happen at run time.

As the second assignment of the variable temp (here declared a second time using an anti-pattern var temp) occurs after the template literal runs to concatenate the string, the var template is assigned the string "I am a " because it uses the RHS assignment of var temp that is in scope at the time the template literal function runs i.e. var temp = ''.

The docs for template literals can be found here.

Back to your (modified) code This demonstrates the steps taken by the compiler both in the first pass and at run time, showing why the ES6 template literal is not updated and why.

First pass:

var temp='';
^^^^^^^^ compiler makes first pass LHS reference temp

var template=`I am a ${temp}`;
^^^^^^^^^^^^ compiler makes first pass LHS reference template

temp='developer';
^^^^ compiler recognises temp has already been allocated

Second pass:

var temp='';
^^^^^^^^^^^ compiler makes an RHS assignment to the variable temp
             // => temp === ''

var template=`I am a ${temp}`;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ compiler makes an RHS assignment to variable template
             // => template === "I am a "

temp='developer';
^^^^^^^^^^^^^^^^ compiler makes an RHS assignment to variable temp
             // => temp === "developer'

Is es6 string template updated when variable inside it updates

3 Answers3