Control of console.log for functions without return

Question

I am wondering how to make direct calls to a function that does not have a return and call it via console.log.

I learned that functions without return have different control over console.log.

But I do not know what this means.

I have written the example code below and wonder about the output value and undefined.

test code

> var bark = function() { return 1; };
undefined
> bark();
1
> console.log(bark());
1
undefined
> var bark2 = function() { console.log('a'); };
undefined
> bark2()
a
undefined
> console.log(bark2());
a
undefined
undefined
>

Answer 1

I'm pretty sure the confusion here is an artifact of the developer console, a combination of the following factors:

• the console displays the return value from every function in the same place that it displays the output of console.log()
• when a function has no return value, it returns undefined
• console.log is a function that has no return value

So the simple statement console.log(1) ends up displaying this in the console:

> 1
> undefined

The "1" is the output of the console.log statement. The "undefined" is the return value of the console.log() function. (Some browsers display them in a slightly different color or with tiny icons to help you differentiate between output and return values, but it's subtle and easy to confuse the two.)

So to go through your sample output:

> var bark = function() { return 1; };
undefined    // <-- return value from defining the function
> bark();    
1            // <-- return value from bark()
> console.log(bark());
1            // <-- return value from bark()
undefined    // <-- return value from console.log()
> var bark2 = function() { console.log('a'); };
undefined    // <-- return value from defining bark2
> bark2()
a            // <-- output of console.log
undefined    // <-- return value of bark2()
> console.log(bark2());
a            // <-- output of console.log inside bark2
undefined    // <-- return value of bark2
undefined    // <-- return value of the console.log wrapping bark2

Answer 2

var bark = function() { return 1; };
bark();

The above function is returning 1. console.log and see:

 var bark = function() { return 1; }; console.log(bark()); 

var bark2 = function() { console.log('a'); };
bark2();
console.log(bark2());

When the function is called, it prints a via its own console.log but when the function call is printed we get undefined because console.log will print the value returned from the function which is undefined because the function does not contain any return statement.

Answer 3

Take a look at the below answer:

If you're running console.log() from a JS file, this undefined line should not be appended.

If you're running console.log() from the console itself, it makes sense. This is why: In the console you can type a name of a variable (for example try typing window) and it prints info about it. When you run any void function (like console.log) from the console, it also prints out info about the return value, undefined in this case.

- https://stackoverflow.com/a/14634066/10984479

Void function meaning a function that doesn't return anything.

For easier debugging your console shows the output of all functions/expressions. console.log() returns undefined, so it shows undefined.

Here you run the bark function, which returns 1, so it outputs 1:

> bark();
1

Here you run the bark function, which returns 1, so it outputs 1. Console.log doesn't return anything, so its logs undefined:

> console.log(bark());
1
undefined