Why do functions return undefined?

Why do functions return undefined?

What are functions?

Functions are the 🧡 of Javascript. They are the building blocks and one of the most critical parts of Javascript. They may or may not take some input to produce output or return a value.

function lifeIsBeautiful(name){
    return `For ${name} Life is Beautiful✨`
}
console.log(lifeIsBeautiful("Naruto"))
// For Naruto Life is Beautiful✨

In the above example, the function lifeIsBeautiful takes input and returns desired output.

But what will happen if we don't give any input? Let's see...

function lifeIsBeautiful(){
    return `Life is Beautiful✨`
}
console.log(lifeIsBeautiful())
// Life is Beautiful✨

Even if we don't give any input, a function can return an output.

But can there be cases where a function does not return any output 🤔? Why don't we try that?

function shouldNotReturnAnything(){    
}
console.log(shouldNotReturnAnything())
// undefined

In the above example, the function shouldNotReturnAnything ideally should not return any value but to our surprise, it did return some value undefined.

undefined is a special placeholder which is being assigned to the variables who have not been assigned any value. It takes some memory space so it is not equal to empty.

Cases when functions return undefined

  1. When there is no return statement in the function.

     function removedReturn(){    
     }
     console.log(removedReturn())
     // undefined
    
  2. When a function has a return statement that does not have a value to return.

     function returnWithNoValue(){    
          return ;
     }
     console.log(returnWithNoValue())
     // undefined
    
  3. When a variable that has not been assigned a value is returned.

     function returnWithUnInitializedVariable(){   
         let someUnInitializedVariable; 
          return someUnInitializedVariable;
     }
     console.log(returnWithUnInitializedVariable())
     // undefined
    
  4. When we return undefined explicitly.

     function returnUndefined(){   
          return undefined;
     }
     console.log(returnUndefined())
     // undefined
    

Why does console.log() return undefined in the browser after every log?

If you have spent some time exploring the browser's console you should have noticed that whenever you use console.log() it gives you two values. First is the desired output and the second one is undefined.

Can you guess why is that?.... If you do not get it yet, don't worry I will tell you.

As we know any function which does not have a return statement or does not have a value to return returns undefined.

console.log() is a function in javascript which does not have a return statement. So whenever we call it in the console it logs the value and also returns undefined.

Final Words

Functions are the building blocks of Javascript. They return undefined when a return is missing or a value is unassigned to the returned variable. console.log() returns undefined because it doesn't have a return statement.

That's all. Thanks for reading 😊