Passing Arrow Functions vs Attaching Arrow Functions in JavaScript

While learning JavaScript arrow functions, I came across the terms passing an arrow function and attaching an arrow function.

At first, these concepts seemed similar, but they describe two different things:

1. Passing a function as a value to another function (callback)
2. Attaching a function to an object as a method

This article explains the difference with examples.

---

What are Arrow Functions?

Arrow functions were introduced in ES6 (ECMAScript 2015).

They provide a shorter syntax for writing functions.

The traditional way of writing a function:

function add(a, b) {
    return a + b;
}

The same function using an arrow function:

(a, b) => a + b;

Arrow functions are especially useful when working with callbacks because functions in JavaScript can be passed around as values.

---

Passing a Function (Callback Function)

Passing a function means giving a function as an argument to another function.

function add(a, b) {
    return a + b;
}

function executeFunction(result) {
    return result;
}

console.log(executeFunction(add(1, 2))); //Outputs 3

Here:

add(1, 2)

executes immediately and passes the returned value 3. However, if we want to pass the function itself, we remove the parentheses:

function executeFunction(callback) {
    return callback(1, 2);
}

console.log(executeFunction((a, b) => a + b)); //Outputs 3

The function add is now being passed as a value. This is called a callback function.

---

Passing an Arrow Function

The same idea can be written using an arrow function:

function executeFunction(callback) {
    return callback(1, 2);
}

console.log(executeFunction((a, b) => a + b)); //outputs 3

The arrow function is created and passed directly into another function. This pattern is commonly used in JavaScript methods such as:

• map()
• filter()
• reduce()
• event handlers

Example:

const numbers = [1, 2, 3];

const doubled = numbers.map(number => number * 2);

console.log(doubled); // Outputs [2, 4, 6]

The arrow function: number => number * 2javascript is passed to map().

---

Attaching a Function to an Object

Attaching a function means storing a function as a property of an object. Example:

function add(a, b) {
    return a + b;
}

const calculator = {
    add: add
};

console.log(calculator.add(1, 2)); //outputs 3

The add function is now a method of the calculator object. We can call it using: calculator.add()

---

Attaching an Arrow Function to an Object

The same thing can be written directly with an arrow function:

const calculatorArrow = {
    add: (a, b) => a + b
};

console.log(calculatorArrow.add(1, 2)); //outputs 3

Here the arrow function is attached to the object as the add property.

Passing vs Attaching

The difference: Passing The function is given to another function. Example:

button.addEventListener("click", () => {
    console.log("Button clicked");
});

The arrow function is passed to addEventListener. Attaching The function becomes part of an object. Example:

const calculator = {
    add: (a, b) => a + b
};

The arrow function is attached to the calculator object. Using Arrow Functions with the DOM A common use case is attaching an event listener to an HTML element.

<input id="inputValue" placeholder="Enter a number">

<input id="inputValue2" placeholder="Enter another number">

<button id="button">
    Add
</button>

<div id="addResult"></div>

JavaScript:

const button = document.getElementById("button");

button.addEventListener("click", () => {

    const inputNum = parseInt(
        document.getElementById("inputValue").value
    );

    const inputNum2 = parseInt(
        document.getElementById("inputValue2").value
    );

    const result = calculatorArrow.add(inputNum, inputNum2);

    console.log(result);

    document.getElementById("addResult").textContent = result;
});

When the button is clicked:

1. The arrow function is passed to addEventListener
2. The input values are retrieved
3. The calculator object's add method is called
4. The result is displayed on the page

Key Learning Points

• Functions in JavaScript are values and can be passed around.
• Passing a function means giving it to another function as an argument.
• Attaching a function means storing it as an object property.
• Arrow functions make callbacks shorter and easier to read.
• Event listeners commonly use arrow functions as callbacks.

My Understanding

The main thing I learned is that: add and add() are different. add refers to the function itself. add() executes the function immediately. Understanding this difference makes callbacks, event handlers, and object methods much easier to understand.