Understanding The ‘return’ Operator in JavaScript

• return must be used inside of a function.
• return immediately stops a function from running.
• return can replace some unnecessary if...else statements.

The return operator is typically one of the first things people are introduced to when learning JavaScript. It certainly seems straight forward – add it to a function and get the final value back.

const foo = function(num) {
    return `This is my number: ${num}`;
};
foo(2+2); // This is my number: 4Code language: JavaScript (javascript)

The problem is, a lot of beginners seem to just take return at face-value and move on to more exciting things – like building yet another cringe-worthy car = {...} object model. But, much like everything else in JS, there’s a bit more nuance to it than just returning the value of a function.

return ends a function wherever it is called

The return operator is essentially the same thing as saying “end.” Meaning it will stop the process of a function where it’s called, and return the value at that instance. Here’s an example:

const numbers = function() {
    const num = 2;
    return num;
// -----------------------------------
// Nothing below "return" can be used!
    alert('Some message!');
    console.log('Some more messages');
    return 2 + 2;
};
numbers(); // 2Code language: JavaScript (javascript)

As you can see, return is ‘ending’ the function where it’s called. Because it was placed near the top of numbers(), over half of the function can’t even execute! While this can trip up beginners, it’s actually quite useful as a way to prevent unnecessary scripts from running if a certain criterion isn’t met.

const numbers = function(doFunc) {
    if (!doFunc) return;
    const moreNumbers = function() {
        console.log(2+2);
    }
    moreNumbers();
};
numbers(); 
// No parameters were given, so it doesn't execute.
numbers('Gimmie some numbers'); 
// The necessary parameters were met, so it returns 4!Code language: JavaScript (javascript)

In a “real world” example, this could be used to check if a page element exists, and if so, run a function that modifies it in some way.

const setFont = function (el) {
	if (!el) return;
	el.classList.add('newFont');
};Code language: JavaScript (javascript)

return can be used in place of simple if...else statements.

Since return acts as an end-point inside functions, you can use it to simplify any if...else statements that are returning a boolean value (true or false).

const lessThan = function(num) {
    if (num < 5) {
        return true;
    } else {
        return false;
    }
};
// Because return will end the function when its
// value is true (or false), you can omit the 'else' statement.
const lessThan = function(num) {
    if (num < 5) {
        return true;
    }
    return false;
};
// If you really want to simplify things,
// you can use ES6 arrow functions and ternary operators.
const lessThan = (num) => { 
    return (num < 5 ? true : false);
};Code language: JavaScript (javascript)

Though return may be simple, it never hurts to fully understand the fundamentals of JavaScript!