Why do we get undefined in the browser console?

As developers, we all are familiar with browser console. It's a Command Line Interface (CLI) built into the web browser. It helps in debugging our code without any hassle.

Usually, the browser console returns the same results as in other environment consoles such as Replit or VS code but in certain conditions, it gives unexpected results.

For example, it gives undefined when we try to console log any string.

console.log("Hello World"); 
//Hello World 
//undefined

We are getting two values first is Hello World and second is undefined . Why is it so? Also, some other cases would be when we define a function or variable.

const example = () => {
    return 1 + 2;
}
//undefined

const a = 10;
//undefined

Here too we are getting undefined. So the question arises why is it happening?

Normally, the condition of getting undefined are:

• When a function or statement doesn't have a return value explicitly specified.

const example = (name) => {
console.log("Hello, " + name);
}

When you call this function example("Jonas") it will log Hello, Jonas but the function doesn't have a return value so it will return undefined by default.

When a function is called the browser will execute its code and look for a value to return. If there is no value to return then it will return undefined by default.

• In general, the undefined value is used as the default value for uninitialized variables, missing function arguments, or missing object properties.

//uninitialized variable
let num;

//missing function argument
const example = (name) => {
    return name;
}

//missing object properties
let person ={
    name: "Jonas",
    age: 34
}
person.city;

All these three conditions returns undefined .

console.log()

The purpose of console.log is to display messages in the console, and not to return a value.

When you call console.log() it displays the specified message to the console and returns undefined to indicate that there is no meaningful value to return.

console.log("Hello");

This code will log the string Hello and the return value will be undefined but you won't see it as it's not displayed in the console environment of Replit, VScode, or any other editor. But it does display undefined in the Browser console.

// Other consoles
console.log("Hello");
//Hello

//Browser console
console.log("Hello");
//Hello
//undefined

You'll ask why is it so in the case of a browser console and not so for others.

• One would be because the browser console is similar to REPL(Read Evaluate Print Loop) it allows us to execute code in an interactive environment.

  It reads our code, then evaluates the input to get results, then prints it, and then loops back to read once again to take the next set of instructions.

• Another cause of this behavior could be because they are implemented by different vendors and hence implementations can vary.

  For example browser console provides additional functionality beyond logging into the console such as network inspection and debugging tools, while the console of Replit provides integration with their IDE and collaborative coding features.

Conclusion

• When a function is called the browser will execute its code and look for a value to return. If there is no value to return then it will return undefined by default.

• The console.log() method is primarily designed to display messages to the console for debugging purposes and its return value is not generally useful for other purposes that's why it returns undefined.