Why Does The Browser's Console Return Undefined While Using Functions like console.log()?

You must have really enjoyed it when you used the console.log() function on your browser's console for the first time. I used it the first time to print "Hello World" on the console and felt very proud of myself.

It is probably your first-ever function that you use while learning javascript. But have you noticed something strange in the output?

Observe the code below.

console.log(`Hello World`);

//Output
Hello World
undefined

Just below the "Hello World", that we wanted the function to print, you will see another output saying "undefined". We never told javascript to do that, then who did it?

Understanding the return value of functions

Let us try to understand one concept of functions in javascript to understand this behavior. Below is an example of a regular function.

function cat() {
    console.log(`Meow`);
}

What do you think the output will be in a browser's console after calling this function?

function cat() {
    console.log(`Meow`);
}
cat();

//Output
Meow
undefined

Here, you can again notice the undefined right below the value you wanted to print. Now let's understand why this happened.

A function in javascript needs some value to return after executing the function. In the example above, we did not specify any value to return using the "return" keyword. But the function does need a return value, so by default, a javascript function will return an undefined value if no return value is specified.

Let's try to specify a return value in the above example and observe the output.

function cat() {
    console.log(`Meow`);
    return `Feed me milk`;
}
cat();

//Output
Meow
`Feed me milk`

Did you notice? The undefined is no more visible in our output, instead of undefined now we can see `Feed me milk`. This is because we defined a value to return in our function using the "return" keyword and hence the value is no more "undefined".

So in simple terms, if you define something to return for a function, then it will return the value you defined. Otherwise, it will say undefined as we did not define any value for it to return.

The console.log function

So now that we understand how a function returns a value, we can easily understand why the console.log function returns undefined.

Just like any other function in javascript, console.log is a function as well. The block of code written for this function must not be having any specified return value and hence it returns undefined by default.

So going back to our first example,

console.log(`Hello World`);

//Output
Hello World
undefined

The console.log function printed undefined because it has no return value set.

The behavior of the browser's console

Now that you have understood why there is an undefined in the output of the browser's console, you must be wondering why we don't see multiple "undefined" values when we use nested functions without specifying a return value.

Observe the code below.

function cat(){
    console.log(`Meow`);
}

Here, console.log is a function that is nested inside the function cat. From what we have understood till now, every function returns undefined if no return value is specified.

So, the function console.log must return an undefined value and the function cat must return an undefined value as well. But we are just getting one undefined in the output.

So why is that?

This is because, as soon as you press the enter key to run the program, the browser's console will only return one value for every enter key pressed.

Let's look at an example.

function cat(){
    function dog(){
        return `Bark`;
    }
    dog();
    return `Meow`;
}
cat();

//Output
'Meow'

Here, you can see that we have two return values, but only one gets displayed. This is because the console considers the function cat as one block of code and looks for the return value of only that block of the code, which in this case, is meow.

Now let's again look at our example of the cat function and the console.log function.

function cat(){
    console.log(`Meow`);
}

Now, look at the code below. It is just for understanding the above code and only focusing on the return values.

function catFunction(){
    function consoleLogFunction(){
        return undefined1;
    }
return undefined2;
}
//Output
undefined2

Here, the console considers only one return value from the whole block of code and hence returns the undefined2 value.

So, both the cat function and the console.log function return the undefined value but only the value from the cat function gets displayed as it is the last return value obtained from the whole block of code after pressing the enter key.

Conclusion

This behavior might seem a little confusing but that's how the browser's console work.

Let's summarise what we learned.

Every function returns an undefined value as a default value unless another value is assigned to it using the return keyword.

Every time an enter key is pressed, the browser's console considers all the code with it as one block of code and looks for only one return value for one block of code.

Therefore, using the console.log function alone returns an undefined value that gets displayed. But if this function is nested into another function that has no return value assigned, then too both the functions will return an undefined value.

But the browser's console will only consider one return value to display as both the functions were passed with one press of enter key and hence are considered as one piece of block.