Do Functions Always Need a return?

Two Type of Functions

Copyfunction add(a, b) {
    return a + b;  // Returns the result
}

const result = add(2, 3);  // result = 5
console.log(result);       // 5

Copy// ❌ WRONG - Can't use the result
function calculateTotal(price, tax) {
    price + (price * tax);
}
const total = calculateTotal(100, 0.08);  // total = undefined

// ✅ CORRECT
function calculateTotal(price, tax) {
    return price + (price * tax);
}
const total = calculateTotal(100, 0.08);  // total = 108

When You NEED return

Situation 1: You want to use function to show Result

Copy// ❌ WRONG - Can't use the result
function calculateTotal(price, tax) {
    price + (price * tax);
}
const total = calculateTotal(100, 0.08);  // total = undefined

// ✅ CORRECT
function calculateTotal(price, tax) {
    return price + (price * tax);
}
const total = calculateTotal(100, 0.08);  // total = 108

When You DON'T NEED return

Situation 1: You want to use the function's result

Copy// ❌ WRONG - Can't use the result
function calculateTotal(price, tax) {
    price + (price * tax);
}
const total = calculateTotal(100, 0.08);  // total = undefined

// ✅ CORRECT
function calculateTotal(price, tax) {
    return price + (price * tax);
}
const total = calculateTotal(100, 0.08);  // total = 108

Examples: Return vs No Return

Example 1: Calculator Functions

Copy// ✅ With return (we want the result)
function add(a, b) {
    return a + b;
}
const sum = add(5, 3);  // sum = 8

// ❌ Without return (pointless)
function badAdd(a, b) {
    a + b;  // Calculates but doesn't return
}
const badSum = badAdd(5, 3);  // badSum = undefined

Example 2: DOM Manipulation

Copy// No return needed - modifies DOM directly
function changeText() {
    document.getElementById("title").textContent = "New Title";
}

// With return - gets element
function getElement() {
    return document.getElementById("title");
}
const titleElement = getElement();  // Can use this element later

Example 3: Array Processing

Copy// With return - creates new array
function doubleNumbers(arr) {
    return arr.map(num => num * 2);
}
const doubled = doubleNumbers([1, 2, 3]);  // [2, 4, 6]

// No return - modifies original array
function addNumberToArray(arr, num) {
    arr.push(num);
    console.log("Number added");
}
const myArray = [1, 2, 3];
addNumberToArray(myArray, 4);  // myArray is now [1, 2, 3, 4]

Arrow Function Special Case

Implicit Return (No curly braces needed)

Copy// Single expression = implicit return
const add = (a, b) => a + b;  // Returns a + b automatically
console.log(add(2, 3));  // 5

// With curly braces = needs explicit return
const add2 = (a, b) => {
    a + b;  // ❌ Doesn't return!
}

const add3 = (a, b) => {
    return a + b;  // ✅ Returns correctly
}

Practice: When to Use Return?

Exercise: Which need return?

Copy// 1. Function that calculates area of rectangle
function calculateArea(width, height) {
    // Does this need return?
}

// 2. Function that displays user profile
function showProfile(user) {
    console.log(`Name: ${user.name}`);
    console.log(`Email: ${user.email}`);
    // Does this need return?
}

// 3. Function that finds max number in array
function findMax(numbers) {
    let max = Math.max(...numbers);
    // Does this need return?
}

The Rule of Thumb

Ask yourself: "Will I need to use the result of this function?"

Special Cases

return Early

Copyfunction findTask(tasks, id) {
    for(let task of tasks) {
        if(task.id === id) {
            return task;  // Returns immediately
        }
    }
    return null;  // Returns if not found
}

Return multiple value

Copyfunction getMinMax(numbers) {
    return {
        min: Math.min(...numbers),
        max: Math.max(...numbers)
    };
}