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.

You need to set the returned value to something, so something like `const myFunctionValue = counter(["shaun", "sara", "jessica"]);` otherwise it just returns the string and does nothing with it. — Ryan Wilson, Feb 08 '19 at 19:35
It is returning something, you just aren't using the returned value. If you wrap it in a `log`, it logs the returned value. Without `log`, what are you wanting to do with the returned value? — Carcigenicate, Feb 08 '19 at 19:35
Are you expecting to see the return value of the function on the HTML page? — Teemu, Feb 08 '19 at 19:37
Well that is not how JavaScript works so you need to code it so it is displayed. The js engine can only do what it is told to do. It is not mind reading. So you need to do something with innerHTML, createElement, value, etc. — epascarello, Feb 08 '19 at 19:42

AndrewL64 · Answer 1 · 2019-02-08T19:59:01.547

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("y u 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.

score 0 · Answer 2 · answered Feb 08 '19 at 19:46

0

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.

answered Feb 08 '19 at 19:46

David Fried

1

score 0 · Answer 3 · answered Feb 08 '19 at 19:46

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.

Why does this return statement in JavaScript return nothing?

3 Answers3