JavaScript Function Return Statement: A Complete Beginner's Guide

When you start learning JavaScript, you quickly realize that functions are everywhere. By adding a return, a function goes from just carrying out instructions to returning meaningful data.

In this guide, we’ll break down the JavaScript return statement, explain how it works, and explore practical examples you can use in your projects.

Let's dive in..

What is the return Statement in JavaScript?

In JavaScript, you use return to give a value from a function back to the code that called it.

Syntax:

function functionName() {
return value;
}

Example:

function add(a, b) {
return a + b;
}
let sum = add(6, 4);
console.log(sum); // Output:10

The statement return a + b; gives back the computed result, which we assign to the sum variable.

How the return Statement Works in Functions

Once JavaScript hits a return statement inside a function:

• It evaluates the value after return.
• It sends that value to the caller.
• It terminates the function, preventing further statements from running.

Example showing early stop:

function testReturn() {
return "A returned";
console.log("You will never see this");
}
console.log(testReturn());
// Output: "A returned"

Anything after return in the same function will not run.

Returning Values vs No Return

A function in JavaScript that omits a return statement will always send back undefined.

function noReturn() {
console.log("I something was log");
}
let result = noReturn();
console.log(result); // Output: undefined

Returning Multiple Values

JavaScript functions can’t return multiple separate values directly, but you can return arrays or objects to bundle data together.

Example with an array:

function getCoordinates() {
return [50.7128, -84.0060];
}
let [lat, lng] = getCoordinates();
console.log(lat, lng); // Output: 50.7128 -84.0060

Example with an object:

function getUser() {
return { name: "Wisdom", age: 30 };
}
let user = getUser();
console.log(user.name); // Output: Wisdo

Early Return Technique

An early return is when you exit a function before reaching the end, often used to handle invalid inputs or special cases.

function divide(a, b) {
if (b === 0) {
return "Error: Division by zero";
}
return a / b;
}
console.log(divide(20, 0)); // Output: Error: Division by zero

Common Mistakes with return

• Forgetting return in block-bodied arrow functions

// Wrong
const multiply = (a, b) => { a * b };
console.log(multiply(4, 3)); // undefined

// Correct
const multiply = (a, b) => { return a * b };

• Expecting code to run after return, it won’t.

Real-World Example: Calculating Discounts

function calculateDiscount(price, percentage) {
return price - (price * percentage / 100);
}
let finalPrice = calculateDiscount(100, 10);
console.log(finalPrice); // Output: 90

Frequently Asked Questions (FAQs)

Q1: What happens in JavaScript if you omit the return statement from a function?
Ans: It returns undefined by default.
Q2: Can a function return another function?
Ans: Yes, functions are first-class citizens in JavaScript.
Q3: Does return stop function execution?
Ans: Yes, any code after return is ignored.

Key Takeaways

• returnsends a value back from a function to the caller.
• Functions without return return undefined.
• You can return objects or arrays to simulate multiple values.
• Early returns help in clean, readable code.

Conclusion

Mastering the JavaScript return statement will make your functions more powerful, reusable, and easier to understand. Whether you’re calculating values, processing data, or even returning other functions, return is a fundamental concept you’ll use daily as a developer.

You can reach out to me via LinkedIn