Why does this return statement in JavaScript return nothing?

Question

Before you mark this question as a duplicate please understand that I'm new to JS and always feared asking a question of stackoverflow.

I dont understand why calling this function returns nothing unless I enclose the function call in a console.log.

If I enclose the function call in a console.log I get the expected output "There are 3 elements in this array", however without the console.log, I dont get anything.

var counter = function (arr) {
    return 'There are ' + arr.length + ' elements in this array';
};

counter(["shaun", "sara", "jessica"])

What I want to know is how I can get the output of this function without using console,.log and the reason why it does not output anything without the console.log.

Answer 1

console.log() is a function used to print information to the console. return on the other hand is a call to pass some value back up to where the call was made.

Via - CodeCademy Forum

---

return terminates a function and possibly returns a value to the caller of that function (whereas) console.log() will not influence the flow of your code.

Via - Difference between console.log and return in javascript?

---

Check and run the following Code Snippet for a practical example of how the two works:

 var x = document.getElementById("first"); var y = document.getElementById("last"); var z = document.getElementById("output"); function printName(){ z.innerText = fullName(); } function fullName(){ console.log(x.value + " " + y.value); // this wont push the concatenated name to printName() return x.value + " " + y.value; // this will push the concatenated name to printName() alert("yu do dis?"); // this won't run anymore since the return statement above prevents the function from invoking anything else } document.getElementById("btn").addEventListener("click", printName)

 <input type="text" id ="first" /> <input type="text" id ="last" /> <button id="btn">Click Me</button> <br/> <div id="full">Hello <span id="output"></span>!!</div>

---

If the return statement above is removed, the console.log() alone won't return anything to printName() except display the concatenated name in your console.

Answer 2

var counter = function (arr) {
        return 'There are ' + arr.length + ' elements in this array';
    };

let functionResult = counter(["shaun", "sara", "jessica"]);

You need to return the result to a variable. Then you can use it as you want.

Answer 3

So, you are actually returning something, you just have no way to view it without console.log() if you're wanting to use the returns of this function in another function, or somewhere else, you can assign it to a variable like

const myCounter = counter(["shaun", "sara", "jessica"])
console.log(myCounter)

All return is doing is making the results of the function available to be used elsewhere. If you aren't displaying it via console.log, or some other method (putting it into an HTML element or something) then you'll never "see" it anywhere, and it'll looks like the function isn't doing anything, even though it is.