0Pricing
Frontend Academy · Lesson

Template Literals and Optional Chaining

Embed expressions in strings with template literals, safely access nested properties with ?., and short-circuit with the nullish coalescing operator ??.

Template Literals: Backtick Strings

Template literals (backtick strings) support multi-line strings and embedded expressions. They replace string concatenation with + and make intent clearer.

// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';

// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;

Multi-line Template Literals

Template literals preserve newlines and indentation. No more \n or string concatenation across multiple lines.

const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${body}</p>
  </div>
`;

const sql = `
  SELECT *
  FROM users
  WHERE age > ${minAge}
  ORDER BY name
`;

All lessons in this course

  1. Array Methods: map filter reduce find
  2. Object Destructuring and Spread
  3. Template Literals and Optional Chaining
  4. Modules: import and export
← Back to Frontend Academy