Why, in addition to printing the expected result, console.log also prints Undefined?

Question

I am following an example of a course and I was left with the doubt of why, in this code:

function area(largura, altura) {
    const area = largura * altura;
    if(area > 20) {
        console.log(`Valor acima do permitido: ${area}m2.`);
    } else {
        return area;
    }
};

console.log(area(5, 5));

After executed the result will also give undefined?

Valor acima do permitido: 25m2.
undefined

I know you have other better ways of doing this code, but I want to understand why undefined.

Answer 1

This happens because the browser Console (or some REPL - like the one in Node.js) displays the evaluation result of the code that will be evaluated in it.

We assume you insert the expression 4 + 4 on the Console. The Runtime evaluate the expression and return its result. In this example, it will be 8.

In the case of functions, the Console will print the result of the function evaluation which is ultimately the function’s own return value.

More specifically, in relation to console.log, is a function that returns the value undefined. Thus, although the console.log also print the messages in the Console, finally, will be printed the function return value itself, which in the case of console.log, is undefined.

---

You can check the return value of console.log:

const result = console.log('Foo!'); // Irá imprimir "Foo!", mas o valor retornado é `undefined`.

console.log('Resultado:', result); //=> Resultado: undefined
console.log('Igual a undefined?', result === undefined); //=> true

Answer 2

As commented by other colleagues, its function has a point at which no value returns, and as the function console.log() validates an expression, when the area is greater than 20, will not return anything to the console.log validate.

With this in mind, you could solve this using an auxiliary variable to receive the result from the area, for example return the value of the area when allowed, or "-1" when not allowed, and then treat this return in your program.

function area(largura, altura) {
    const area = largura * altura;
    if(area > 20) {
        console.log(`Valor acima do permitido: ${area}m2.`);
        // Primeira possibilidade de retorno da sua função
        return -1;
    } else {
        // Segunda possibilidade de retorno da sua função
        return area;
    }
};

const resultado = area(5, 2);

// Caso o resultado seja -1, a própria função irá exibir que a area é maior que a permitida
if(resultado > 0){
  console.log("Área:", resultado);
}