JavaScript Function Return Keyword Explained For Absolute Beginners

in this article, I will try my best to explain the JavaScript return keyword in such a way an absolute beginner can easily understand.

just as the word implies; the return keyword returns a value, the value could be a number a string, or any other data type.

in most cases, you would usually want your function to return certain values based on what you are working on.

when a function does not explicitly return any value, it returns undefined. Consider the following function.

function example() {

};

console.log(example())

//undefined

from the above function, when we consol.log and invoke the function, we get undefined. this is because the function does not explicitly return anything (value).

Let's use the return keyword to specify a return value.

function example() {

    return "good"
};


console.log(example())

//good

Now when we save and check our console, what we get back is the string "good"

and this is because we specified that our function returns the String "good", in this case, the value we are returning is a string "good'.

Note: one thing to know about the return keyword is that whenever we use it the function execution stops and we exit the function code block.

for example; if we have the following function.

function example() {

    return "good"
    return "morning"
};

console.log(example());
//good

if we save and check the console, what we will get will be the first return keyword which is the string "good", and the second return keyword which is supposed to return the string "morning" will be ignored. in fact, if you hover on the second return keyword, you will get the " unreachable code detected" statement.

when you use the return keyword, you should understand that it needs to come last after all other code inside your function because once you write the line with the return keyword the code stops executing.

Although the return keyword can not be placed multiple times as seen in the above function, it can still be used multiple times when those return keywords are placed inside their own code blocks.

when we talk about code blocks, it simply means; codes enclosed in separate curly braces { every code written inside of this curly brace is considered to be in a separate code block. lets say this is code block 1} and { this is code block 2 }. two different code blocks.

To further explain, let's consider the following function expression with a parameter of gender; which is an example of using the return keyword more than once.

//function expression

let user = function (gender){

    if (gender === "male") {

        return "you are a boy"
    } else{

        return " you are not a boy"
    }
}

console.log(user());

in the function above we wrote an If statement telling our function to return the string "you are a boy " if the user is a male.

let user = function (gender){

    if (gender === "male") {

        return "you are a boy"
    } else{

        return " you are not a boy"
    }
}

console.log(user(male));
// you are a boy

But in the case where the user is not a male we want our function to return the string "you are not a boy.

let user0 = function (gender){

    if (gender === "male") {

        return "you are a boy"
    } else{

        return " you are not a boy"
    }
}

console.log(user(anythingelse));

// you are not a boy

We've seen that when we use multiple return keywords in our function, they must be in different code blocks, otherwise, all other return keywords after the first will be ignored and considered unreachable code.

if you've read to this point congratulations, you now have a better understanding of the jascript return keyword. Happy coding!