Day 10 — Default Parameters & Arrow Functions in JavaScript

Today you’ll learn how to write functions that are safer (default params) and cleaner (arrow functions), plus when not to use arrows.

---

🧩 Default Parameters

Default parameters let you give a function argument a fallback value when the caller doesn’t supply it (or passes undefined).

function greet(name = "stranger") {
  return `Hello, ${name}!`;
}

greet();            // "Hello, stranger!"
greet("Gift");      // "Hello, Gift!"

Notes & Gotchas

• Defaults are used only when the argument is missing or undefined (not null or 0).

• Defaults can depend on previous parameters:

function power(base, exp = 2) {
  return base ** exp; // square by default
}

• Defaults are evaluated at call time (so you can call functions inside):

const now = () => new Date().toISOString();
function stamp(msg, ts = now()) {
  return `[${ts}] ${msg}`;
}

---

⚡ Arrow Functions (ES6)

Arrow functions are a concise syntax for function expressions.

// Regular function expression
const add = function (a, b) { return a + b; };

// Arrow equivalent
const addArrow = (a, b) => a + b;

Forms

• Concise body (implicit return):

const double = x => x * 2;  // no return keyword needed

• Block body (explicit return):

const sum = (a, b) => {
  const s = a + b;
  return s;                 // must use return
};

• Returning objects (wrap in parentheses):

const makeUser = (name) => ({ name, active: true });

• No params / one param:

const ping = () => "pong";
const square = n => n * n;

this Behavior (Important!)

Arrow functions don’t have their own this; they adopt this from the surrounding scope (lexical this). Great for callbacks where you want the outer this.

const counter = {
  n: 0,
  tick() {
    setInterval(() => {       // arrow keeps "this" pointing to counter
      this.n++;
    }, 1000);
  }
};

Avoid arrows for methods that need their own this, constructors, and prototype methods.

• ❌ Not constructors:

const Person = (name) => { this.name = name; }; // TypeError with new Person()

---

🧠 Default Params + Arrow Functions Together

const greet = (name = "friend") => `Hi, ${name}!`;
const range = (n, start = 0) =>
  Array.from({ length: n }, (_, i) => i + start);

greet();             // "Hi, friend!"
range(3);            // [0,1,2]
range(3, 5);         // [5,6,7]

---

✅ When to Use What

• Use default parameters to avoid guard code:

    // Before
    function join(items, sep) {
      sep = sep === undefined ? ", " : sep;
      return items.join(sep);
    }
  
    // After
    const join = (items, sep = ", ") => items.join(sep);
  

• Use arrow functions for:

  • Short utilities and callbacks.

  • Preserving outer this in asynchronous code.

• Use regular functions for:

  • Object methods that need their own this.

  • Constructors (with new).

---

🧪 Practice (Easy → Hard) with Solutions

1) Easy — Friendly Greeter

Task: Write welcome(name = "developer") that returns "Welcome, <name>!" using an arrow function.

Solution

const welcome = (name = "developer") => `Welcome, ${name}!`;

---

2) Intermediate — Safe Divide

Task: Create divide(a, b = 1) as an arrow function. If b is 0, return "Infinity" (as a string). Otherwise return the numeric result.

Solution

const divide = (a, b = 1) => (b === 0 ? "Infinity" : a / b);

divide(10);     // 10
divide(10, 2);  // 5
divide(10, 0);  // "Infinity"

---

3) Hard — Timer with Lexical this

Task: Build an object timer with:

• property count (starts at 0)

• method start(step = 1) that uses setInterval to increase count by step every 200ms using an arrow inside so this points to timer

• method stop() to clear the interval

Solution

const timer = {
  count: 0,
  _id: null,
  start(step = 1) {
    if (this._id) return;
    this._id = setInterval(() => {   // arrow -> lexical this
      this.count += step;
    }, 200);
  },
  stop() {
    clearInterval(this._id);
    this._id = null;
  }
};

// Example:
// timer.start(2); setTimeout(() => { timer.stop(); console.log(timer.count); }, 1200);

---

📌 Recap

• Default params make functions safer and cleaner.

• Arrow functions offer concise syntax and lexical this.

• Avoid arrows for constructors and methods that require their own this.

#CodeWithGift #30DaysOfJavaScript #JavaScriptSeries