Lecture 16: Arrow Functions & Callbacks

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-19

Lecture 16

Arrow Functions & Callbacks

Week 4 | Unit II: JavaScript Functions & Events
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

---

• Write concise arrow functions
• Understand callback fundamentals
• Use callbacks with array methods
• Recognize synchronous flow with callbacks
• Practice cleaner modern JavaScript

Arrow Function Syntax

---

const add = (a, b) => a + b;
const square = x => x * x;
const greet = () => "Hello";
const full = (first, last) => `${first} ${last}`;

Arrow functions are compact and readable for small logic.

Regular Function vs Arrow

---

function multiply(a, b) {
  return a * b;
}

const multiplyArrow = (a, b) => a * b;

Both work; arrow syntax is shorter in many cases.

What Is a Callback?

---

A callback is a function passed into another function.

function greetUser(name, callback) {
  const msg = `Hello, ${name}`;
  callback(msg);
}

greetUser("Anu", message => console.log(message));

Array Methods with Callbacks

---

const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const total = nums.reduce((acc, n) => acc + n, 0);

• map: transform
• filter: select
• reduce: combine

forEach with Arrow Function

---

const students = ["Asha", "Vikram", "Neha"];
students.forEach((name, index) => {
  console.log(index, name);
});

Useful for side effects like logging or UI updates.

Callback Flow Pattern

---

function process(data, callback) {
  const result = data.trim().toUpperCase();
  callback(result);
}

process("  web tech  ", output => {
  console.log(output); // WEB TECH
});

Common Mistakes

---

• Forgetting to return value from block-body arrow function
• Passing callback() instead of callback
• Overusing nested callbacks without structure
• Using arrow functions when this from method context is needed

Practice Task

---

Write a function transformNumbers(arr, callback) that:

1. accepts an array of numbers
2. applies callback to each number
3. returns transformed array

const result = transformNumbers([2, 4, 6], x => x / 2);

Questions?

Next: Week 5 - DOM Manipulation