Lodash _.templateSettings.variable

What You’ll Learn

By the end of this tutorial, you’ll know how to rename the data parameter Lodash injects into _.template() expressions—making templates clearer and avoiding naming conflicts.

What Is _.templateSettings.variable?

_.templateSettings.variable is a string that names the data object parameter available inside compiled template expressions. When you write <%= obj.name %>, the obj part comes from this setting—Lodash default is literally the identifier obj.

Teams rename the variable when obj feels cryptic, when designers expect data or viewModel, or when template helpers from imports make short names like obj easy to confuse with other symbols.

📝 Syntax

Assign a valid JavaScript identifier string to the global settings object (or pass it per compile):

_.templateSettings.variable = "customName";

// Default Lodash value:
// "obj"

Syntax Rules

• Type — must be a string identifier, not a RegExp or function.
• Default — "obj" unless you override it globally or per compile.
• Template source — every expression in interpolate, escape, and evaluate tags must use the chosen name.
• Render call — unchanged; pass a plain object: render({ name: 'Ada' }).
• Compile time — Lodash reads variable when _.template() runs.

import template from "lodash/template";

_.templateSettings.variable = "data";

const tpl = template("<%= data.name %> is <%= data.age %> years old.");
const output = tpl({ name: "John", age: 30 });
// -> "John is 30 years old."

Examples Gallery

Practical variable patterns with copy-ready code, sample output, and interactive Try It Yourself labs.

_.templateSettings.variable = "data";

const tpl = _.template("<%= data.name %> is <%= data.age %> years old.");
const rendered = tpl({ name: "John", age: 30 });

console.log(rendered);
// -> "John is 30 years old."

John is 30 years old.

// _.templateSettings.variable === "obj" by default

const tpl = _.template("Hello, <%= obj.name %>!");
console.log(tpl({ name: "Ada" }));
// -> "Hello, Ada!"

// Writing data.name here would fail unless you set variable = "data"

Hello, Ada!

_.templateSettings.variable = "viewModel";

const cardTpl = _.template(
  "<article><h2><%= viewModel.title %></h2>" +
  "<p><%= viewModel.summary %></p></article>"
);

console.log(cardTpl({
  title: "Release notes",
  summary: "Version 2.0 ships today."
}));

<article><h2>Release notes</h2><p>Version 2.0 ships today.</p></article>

const reportTpl = _.template(
  "Report #<%= ctx.id %>: <%= ctx.status %>",
  { variable: "ctx" }
);

const defaultTpl = _.template("User: <%= obj.name %>");

console.log(reportTpl({ id: 42, status: "complete" }));
// -> "Report #42: complete"

Report #42: complete

_.templateSettings.variable = "data";

const tpl = _.template(
  "<% if (data.premium) { %>" +
  "Welcome, <%= data.name %> (Premium member)" +
  "<% } else { %>" +
  "Hello, <%= data.name %>." +
  "<% } %>"
);

console.log(tpl({ name: "Alex", premium: true }));
// -> "Welcome, Alex (Premium member)"

Welcome, Alex (Premium member)

_.templateSettings.variable = "data";
_.templateSettings.imports._ = _;

const summaryTpl = _.template(
  "Items: <%= data.items.length %> | Total: <%= _.sum(data.items) %>"
);

console.log(summaryTpl({ items: [10, 20, 5] }));
// -> "Items: 3 | Total: 35"

Items: 3 | Total: 35

📝 Notes

• variable is a string identifier, not a RegExp like interpolate.
• Default name is obj—template source and setting must agree.
• Changes apply at compile time; re-run _.template() after renaming.
• All tag types (interpolate, escape, evaluate) share the same variable name.
• Pick a valid JavaScript identifier—no spaces or reserved words.
• Renaming does not change the shape of the object you pass to the render function.

💡 Best Practices