🏹 Arrow Functions & Template Literals

Why ES6 Changed Everything

Languages evolve the way natural languages do — new words and shorthands appear, and eventually everyone talks that way. ES6 (ECMAScript 2015) was JavaScript's dictionary-doubling moment. It landed let/const, classes, modules, promises, destructuring, and the two features we focus on today. Since then, the language ships a smaller update every year, but ES6 remains the dividing line between "old" and "modern" JavaScript.

Everything in this lesson is universally supported in every current browser and in Node.js — no build step required. Let's start with the feature you'll type most often.

Arrow Function Syntax

An arrow function is a shorter way to write a function expression. Think of it as the compact car of functions: same job, less bodywork. The name comes from the => ("fat arrow") that sits between the parameters and the body.

Here is the same function written four ways, from most verbose to most terse:

// 1. Traditional function declaration
function add(a, b) {
    return a + b;
}

// 2. Arrow function with a block body — needs an explicit `return`
const add = (a, b) => {
    return a + b;
};

// 3. Arrow with an "implicit return" — one expression, no braces, no `return`
const add = (a, b) => a + b;

// 4. A single parameter can drop its parentheses
const double = n => n * 2;

// No parameters? Use empty parentheses:
const sayHello = () => "Hello!";

const makeUser = (name, age) => ({ name, age });   // ✅ returns an object
const broken   = (name, age) => { name, age };     // ❌ returns undefined

The this Superpower

Beyond looking nicer, arrow functions behave differently in one crucial way: they do not create their own this. Instead they capture this from the surrounding ("lexical") scope where they were written. A regular function is a chameleon — its this changes color depending on how it's called. An arrow function is a polar bear — it stays the same wherever you take it.

This solves the classic bug where this is lost inside a callback:

// ❌ The classic problem with a traditional callback
const button = {
    text: "Click me",
    onClick() {
        console.log(this.text);          // "Click me" — `this` is `button`
        setTimeout(function () {
            console.log(this.text);      // undefined! `this` is now the global object
        }, 1000);
    }
};

// ✅ The arrow function inherits `this` from onClick
const betterButton = {
    text: "Click me",
    onClick() {
        console.log(this.text);          // "Click me"
        setTimeout(() => {
            console.log(this.text);      // "Click me" — arrow keeps the outer `this`
        }, 1000);
    }
};

The same fix makes class event handlers painless. Because the arrow captures the instance's this, this.count refers to the object, not the DOM element that fired the event:

class Counter {
    constructor() {
        this.count = 0;
        this.button = document.createElement('button');
        this.button.textContent = 'Count: 0';

        // The arrow preserves `this`, so `this.count` is the instance's count
        this.button.addEventListener('click', () => {
            this.count++;
            this.button.textContent = `Count: ${this.count}`;
        });

        // A traditional callback here would break: `this` would be the button,
        // and `this.count` would be undefined.
    }
}

When (Not) to Use Arrows

Arrow functions are the default for short callbacks, but that same lexical this makes them the wrong choice in a few places. Use this decision tree:

const timer = {
    seconds: 0,
    // ❌ arrow method: `this` is NOT `timer`, it's the outer scope
    tick: () => { this.seconds++; }
};
timer.tick();
console.log(timer.seconds);   // 0 — the arrow never touched `timer`

Arrows in Array Methods

This is where arrow functions truly shine. Passed to map, filter, and reduce, they read almost like plain English and keep the transformation front-and-center.

const numbers = [1, 2, 3, 4, 5];

// Verbose, pre-ES6
const doubled = numbers.map(function (num) {
    return num * 2;
});

// Concise, modern
const doubledArrow = numbers.map(num => num * 2);   // [2, 4, 6, 8, 10]

const users = [
    { name: 'Alice',   age: 25 },
    { name: 'Bob',     age: 30 },
    { name: 'Charlie', age: 35 }
];

// Chain transforms: keep users over 28, then take their names
const olderUsers = users
    .filter(user => user.age > 28)
    .map(user => user.name);
console.log(olderUsers);   // ['Bob', 'Charlie']

// reduce boils a list down to a single value
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
console.log(totalAge);     // 90

doubledArrow → [2, 4, 6, 8, 10]
olderUsers   → ['Bob', 'Charlie']
totalAge     → 90

Template Literals

Before ES6, building a string from variables meant gluing pieces together with + — error-prone and hard to read. Template literals use backticks (`) and ${ } placeholders so you can drop values (and any expression) straight into the text, Mad-Libs style.

const name = "Alice";
const age  = 25;

// Old way — concatenation
const message = "Hello, my name is " + name + " and I am " + age + " years old.";

// New way — interpolation
const better = `Hello, my name is ${name} and I am ${age} years old.`;

// Any expression works inside ${ }
const a = 10, b = 20;
console.log(`The sum of ${a} and ${b} is ${a + b}`);   // ...is 30

// Function calls and ternaries too
const score = 85;
console.log(`You ${score >= 60 ? 'passed' : 'failed'} the exam!`);

Template literals also preserve line breaks, which makes multiline strings (and generated HTML) far cleaner:

// Multiline the old way
const oldMultiline = "Line 1\n" +
                     "Line 2\n" +
                     "Line 3";

// Multiline with a template literal — the newlines are literal
const newMultiline = `Line 1
Line 2
Line 3`;

Generating HTML

A very common real-world use is building markup from data. Nesting .map(...).join('') inside a template literal lets you render a list without any framework:

const createCard = user => `
    <div class="user-card">
        <h3>${user.name}</h3>
        <p>${user.bio}</p>
        <button>${user.isFollowing ? 'Unfollow' : 'Follow'}</button>
    </div>`;

const createTable = (headers, rows) => `
    <table>
        <thead>
            <tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr>
        </thead>
        <tbody>
            ${rows.map(row => `<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`).join('')}
        </tbody>
    </table>`;

Tagged Templates

A tagged template lets a function intercept a template literal before the final string is built. You put a function name directly in front of the backticks; it receives the static string pieces as its first argument and each interpolated value as the rest.

function highlight(strings, ...values) {
    // `strings` is the static text; `values` are the ${...} results
    return strings.reduce((result, str, i) => {
        const value = values[i] !== undefined ? `<mark>${values[i]}</mark>` : '';
        return `${result}${str}${value}`;
    }, '');
}

const lang = "JavaScript";
const year = 2015;
const out = highlight`${lang} was significantly updated in ${year}.`;
console.log(out);
// "<mark>JavaScript</mark> was significantly updated in <mark>2015</mark>."

Tagged templates power real tools: the css and gql tags in libraries like styled-components and GraphQL, and safe-SQL builders that separate the query text from its parameters:

// A tiny parameterized-query builder — values never touch the SQL text
function sql(strings, ...values) {
    return { text: strings.join('?'), values };
}

const userId = 123, status = 'active';
const query = sql`SELECT * FROM users WHERE id = ${userId} AND status = ${status}`;
console.log(query);
// { text: "SELECT * FROM users WHERE id = ? AND status = ?", values: [123, "active"] }

Practice & Quiz

const products = [
    { name: 'Laptop', price: 999, category: 'Electronics' },
    { name: 'Book',   price: 20,  category: 'Education'    },
    { name: 'Phone',  price: 699, category: 'Electronics' }
];

// Rewrite this:
const expensive = products
    .filter(function (p) {
        return p.category === 'Electronics' && p.price > 500;
    })
    .map(function (p) {
        return p.name + ': $' + p.price;
    });
// Expected: ["Laptop: $999", "Phone: $699"]

const expensive = products
    .filter(p => p.category === 'Electronics' && p.price > 500)
    .map(p => `${p.name}: $${p.price}`);

console.log(expensive);   // ["Laptop: $999", "Phone: $699"]

const user = {
    name: 'John Doe',
    bio: 'Web developer',
    skills: ['JavaScript', 'React', 'Node.js']
};
// generateProfile(user) should include an <li> per skill

const generateProfile = user => `
    <article class="profile">
        <h3>${user.name}</h3>
        <p>${user.bio}</p>
        <ul>
            ${user.skills.map(skill => `<li>${skill}</li>`).join('')}
        </ul>
    </article>`;

console.log(generateProfile(user));

Best Practices & Pitfalls

✅ Do

• Use arrow functions for short callbacks and array-method transforms
• Wrap a returned object literal in parentheses: () => ({ ... })
• Reach for template literals whenever you're interpolating or writing multiline text
• Break a complex arrow into a block body with named intermediate variables when it stops being readable

❌ Don't

• Use an arrow for an object method or a class constructor that needs its own this
• Rely on arguments inside an arrow — use a rest parameter (...args) instead
• Use a template literal for a plain constant string (`Hello`) — a normal quote is fine
• Inject untrusted user input into an HTML template literal

// Hard to scan on one line:
const r = data => data.filter(x => x > 0).map(x => x * 2).reduce((a, b) => a + b);

// Clearer with a block body and named steps:
const r = data => {
    const positives = data.filter(x => x > 0);
    const doubled   = positives.map(x => x * 2);
    return doubled.reduce((a, b) => a + b, 0);
};

Summary

📚 Additional Resources

• MDN — Arrow function expressions
• MDN — Template literals (template strings)
• MDN — this and how it's determined

🚀 What's Next?

Now that you can write tidy functions and strings, the next lesson unpacks two more ES6 workhorses that appear everywhere in React and Node code: Destructuring and the Spread Operator — pulling values out of objects and arrays, and spreading them back in.