Using Conditional Statements in Underscore.js Templates: A Practical Guide to Avoid "Undefined" Errors

Problem Background and Error Analysis

When using Underscore.js for front-end templating, developers often need to generate HTML content dynamically based on data model properties. A common scenario involves optional attributes, such as a date, which may be present in some models but not others. To conditionally display these attributes in templates, developers might attempt to use JavaScript if statements, as shown below:

<% if (date) { %><span class="date"><%= date %></span><% } %>

However, when the date property is undefined in the data model, this code throws a "date is not defined" error. This occurs because Underscore.js templates compile and execute by embedding JavaScript code snippets into a function. If the variable date is not passed into the template's context, referencing it directly causes a reference error, similar to accessing an undeclared variable in strict mode.

Core Solution: Using typeof Checks

To resolve this issue, the best practice is to use the typeof operator within conditional statements to check if a variable is defined. This avoids direct references to potentially non-existent variables, preventing runtime errors. The modified template code is as follows:

<% if (typeof(date) !== "undefined") { %>
    <span class="date"><%= date %></span>
<% } %>

The key advantage of this approach is that the typeof operator returns "undefined" for variables that are not defined, without throwing an error. By comparing typeof(date) to the string "undefined", it safely determines whether date exists in the current scope. If date is defined and has a truthy value (e.g., a non-empty string or number), the condition evaluates to true, rendering the date element; otherwise, it skips that part.

In-Depth Technical Principles

Underscore.js's template engine injects data using JavaScript's with statement or object property access. Template code is compiled into a function that accepts a data object as an argument. For example, for the template <%= date %>, the engine generates code similar to function(data) { return data.date; }. When using if statements, the engine directly embeds JavaScript code, so if (date) actually checks for the date variable in the global or local scope, not the property of the data object. If the data object lacks a date property, date is undefined, leading to an error.

In contrast, the typeof check is a defensive programming technique that leverages JavaScript's language features: typeof returns "undefined" for undeclared variables without raising exceptions. This ensures template robustness, especially when handling dynamic or optional data.

Extended Discussion and Best Practices

Beyond using typeof, developers can consider other methods to handle optional properties:

• Data Preprocessing: Ensure all optional properties have default values (e.g., null or empty strings) before passing data to the template. This allows direct use of if statements with truthy checks, eliminating the need for typeof. For instance, in Backbone.js models, default attributes can be set.
• Using Underscore.js's _.has Method: Although templates cannot directly call Underscore functions, a helper function can be added to the data object to check property existence. For example, pass a context object containing hasDate: function() { return _.has(this, 'date'); }, then use <% if (hasDate()) { %> in the template.
• Avoid Overcomplication: For simple conditional rendering, typeof checks are often the most concise and effective solution. Keeping template logic simple and moving complex business logic out of templates enhances maintainability.

In real-world projects, it is advisable to choose methods based on team coding standards and performance considerations. The typeof check strikes a good balance in most scenarios, requiring no additional dependencies or preprocessing steps.

Conclusion

When using conditional statements in Underscore.js templates, directly referencing potentially undefined variables leads to runtime errors. By employing typeof operator checks for safety, developers can gracefully handle optional properties, improving code robustness and readability. Understanding template engine mechanics and JavaScript scope enables the writing of more efficient, error-free template code. The solution presented in this article, based on community best practices, has been widely validated and is applicable across various front-end development contexts.