Why does it return "Undefined" because it has an "if/Else"?

Question

I have this logical condition using the if/Else!

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

console.log(area(5, 5)) //retorna no console "25m2 undefined".

As far as I knew case the condition if were true, he did not read the condition of else. Yet in that instruction he is reading the else returning the result undefined. Why does this happen?

Answer 1

He doesn’t get into the else at any time, and that’s the problem, in the else returns something, when it enters the if he returned nothing, which is undefined, and that is what needs truth.

I think that’s what you want, otherwise the problem is not well defined and the whole code is wrong.

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

let resultado = area(5, 5);
if (resultado != undefined) console.log(resultado);
console.log(area(5, 5) + 1);
resultado = area(4, 5);
if (resultado != undefined) console.log(resultado);

I put in the Github for future reference.

The if is used to validate the parameter, so if it is outside the given criteria it displays a message from log and terminates the function by returning nothing, and that part is very important, as he did not calculate anything the result of the function is an undefined value. I imagine that is what you want, if not, the code is completely wrong and we have no way to solve the problem because we do not know what to do, we can only help what is in the question.

So this is a function that may or may not give a result, if the parameter is ok it returns a valid result, if the parameter passed is not adequate it generates a bad value and does not return a valid result, therefore it returns a undefined.

What to do to use the function if it can return an invalid value? You must test if the value is valid before using it. This is a design pattern of the best known and used.

Then stores the result in a variable and makes a if to see if the value is valid, and only if it is can you use the variable somewhere, like printing it for example.

But if you don’t want to return an invalid value then you would have to take the condition and accept any past value. Of course, there are alternatives, but it is not common to be used, especially in Javascript. You could make an exception, which luckily isn’t in the JS culture, and you’d have to deal with it in the call, it just changes the way you treat it. Or it would have to return a valid value even if invalid, which would make the code unreliable, would not make sense.

Note that if making an account with the undefined result gives an invalid result and this is obvious, you will have to do something to deal with it.

Keep the undefined

Why is the answer not good? See below that in an account it gives a result wrong silently, if you do not take care causes a huge damage. My solution gives a clear and obvious error, can not continue with that value.

function area(largura, altura) {
    const area = largura * altura;
    if (area > 20) {
       // Ou retornas false ou null
       console.log(`O valor acima do permitido: ${area}m2.`);
       return false;
    } else {
       return area;
    }
}

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

I put in the Github for future reference.

Answer 2

This happens because when you run a function with console.log(myFunction()) he expects some return of its function.

Your if occurs correctly, and executes your console.log(), but you perform the function through the console.log() he expects some return and returns nothing.

With that the JS showcase undefined.

To solve this, you could change the console.log() by a return, would look like this:

function area(largura, altura) {
    const area = largura * altura;
    if (area > 20) {
       return false;
    } else {
       return area;
    }
}

var valor = area(4, 5);

if(!valor)
{
  console.log("Os valores informados são altos demais.");
}else{
  console.log(valor);
}

Answer 3

Quite simply the code is not reading the condition else.

The code is not returning any results within the condition if, so when the function has just been executed the returned value is undefined, because no value has been defined. When the value log is done this is exactly what it will write.

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

// Aqui faz print de undefined porque não é retornado nenhum valor da função
console.log(area(5, 5)) 

MDN web Docs

The overall value undefined represents an undefined value. It is one of the primitive types of Javascript.

A function returns undefined if a value is not returned.

Note

I edited the answer and removed the code proposal considering the comments left and the question asked.

Return undefined, false, null, 0, etc. is subjective to the intention of the programmer and application of the code. It should always be considered who will use the code and what is considered a normal or exceptional behavior.

Initially this response suggested an approach with return false. You can find arguments for and against in the comments.