Arrow Functions

Arrow functions, introduced in ES6, provide a concise syntax for writing functions. They shine for tiny utility functions, callbacks, and scenarios where you want to preserve the surrounding this context. Today you'll compare arrow functions with traditional declarations and learn when to reach for each.

Step 1: Basic Syntax

Traditional function expression:

const double = function (number) {
  return number * 2;
};

Arrow function equivalent:

const double = (number) => {
  return number * 2;
};

• function keyword disappears.
• Parameters go before the arrow (=>).
• Function body stays the same.

Step 2: Implicit Return

If the function body is a single expression, you can omit braces and return.

const double = (number) => number * 2;

• The expression after the arrow becomes the return value.
• Works only with single expressions (no additional statements).

Step 3: Parameter Variations

• Zero parameters: use empty parentheses.

  const getTimestamp = () => Date.now();

• One parameter: parentheses optional (but keep them for consistency).

  const cheer = name => `Keep going, ${name}!`;

• Multiple parameters: parentheses required.

  const sum = (a, b, c) => a + b + c;

Step 4: Arrow Functions as Callbacks

Arrow functions are great inline callbacks:

const learners = ["Ada", "Grace", "Kayra"];

learners.forEach((name, index) => {
  console.log(`${index + 1}. ${name}`);
});

• Shorter syntax keeps callbacks readable.
• Avoids naming temporary functions you'll only use once.

Step 5: this Behavior

Arrow functions do not have their own this. They capture this from the surrounding scope.

const tracker = {
  total: 0,
  add(points) {
    setTimeout(() => {
      this.total += points;
      console.log(`Total: ${this.total}`);
    }, 100);
  }
};

tracker.add(10);

• Inside the arrow function, this refers to tracker.
• Traditional functions would have their own this and require .bind(this) or storing const self = this.

Step 6: When Not to Use Arrow Functions

• As object methods that rely on their own this.

  const progress = {
    total: 0,
    add(points) {
      this.total += points; // needs its own this
    }
  };

• As constructors (new keyword). Arrow functions can't be used with new.
• In cases where you need the arguments object (arrow functions don't have it).

Step 7: Multi-line Arrow Functions

Use braces and return for multi-line logic:

const buildSummary = (day, topic) => {
  const status = day >= 4 ? "Advanced" : "Getting started";
  return `${topic} - ${status}`;
};

• Once you add braces, you must manually return the value.

Step 8: Combining with Default and Rest Parameters

Arrow functions work with the parameter features you’ve learned:

const assignBadge = (name = "Trailblazer", ...levels) => {
  const highest = Math.max(...levels);
  return `${name} reached level ${highest}`;
};

console.log(assignBadge("Kayra", 2, 3, 4));

• Default parameters provide fallback values.
• Rest parameters bundle extra arguments into an array.

Step 9: Practice Prompts

1. Convert function square(n) { return n * n; } into an arrow function with implicit return.
2. Create const buildGreeting = (name, role = "learner") => ... that returns a personalized greeting string.
3. Use setTimeout with an arrow function that logs "Break time!" after 500ms.
4. Write const totalProgress = (numbers) => numbers.reduce((sum, value) => sum + value, 0); and test it with [5, 10, 15].

Key Takeaways

• ✅ Arrow functions provide shorthand syntax especially suited for small functions and callbacks.
• ✅ Implicit returns keep simple expressions clean.
• ✅ Arrow functions inherit this from the surrounding scope, which is useful in many asynchronous scenarios.
• ✅ They are not ideal for methods needing their own this, constructors, or when arguments is required.

---

🎯 Quick Check

1. How do arrow functions differ from traditional functions in this handling?
2. When can you use implicit returns?
3. Why can't arrow functions be used as constructors?
4. Convert a two-parameter arrow function into one that uses default values and implicit return.

Next lesson: understanding scope and closures to manage variables across functions. 🧠