Undefined mystery of console.

what is undefined in JavaScript?

undefined is one of the 7 primitive data types in JS.
undefined does not mean empty. It means a variable is declared but still, there is no value assigned to it. In non-technical terms, you place a handkerchief on a seat to reserve that particular seat for your specific friend. Similarly, javascript uses undefined to hold a place for the variable which is yet to be assigned a value. Once a value is assigned to the variable it removes the undefined.

var a;
console.log(a)//undefined

a = 10;
console.log(a)//10

what is undefined in functions?

functions are the heart of javascript. One of the key properties of functions is that they always return something. In non-technical terms, they are the most generous person who always gives something back. But what if you don't define what to return? the function should give an error or it should return undefined? the answer is undefined, as they always return something.

function salman (){
   //nothing to return
}
salman()//undefined 

//========================

function salman (){
   return "deer"
}
salman()//deer

In the second example, function salman () returns deer as it is already defined as what to return.

Why does the console returns undefined every time we log something?

The answer is pretty simple. This is due to the nature of REPLs, which are command-line tools that scripting languages use.

What is a REPL?

You may be wondering what is a REPL? This acronym stands for Read, Evaluate, Print, Loop. REPLs are a coding environment tool that is a common feature among scripting languages. Whether you access it with ‘irb’ for Ruby, ‘node’ for JavaScript or ‘python’ for Python, entering into a REPL creates a sandbox environment for you to explore your code.

  • Read - First, they read whatever code you have entered in your current terminal expression using the language native to your version of the REPL. If you are using a Node.js REPL then your REPL will read the code as JavaScript.

  • Evaluate - This could include any arithmetic, loop structures, string, array or object manipulation or any other possible operations.

  • Print - print whatever the REPL was informed to print.

  • Loop - this doesn’t relate to a for or while loop. What we mean by the loop is that once all of your statements or code have been read and evaluated and any information printed, we loop back to a state in which the computer is ready for more input. Thus after every bit of code you enter in the REPL is read, evaluated and printed, the computer prepares itself to run more operations.

//The eval() function evaluates JavaScript code represented as a string and returns its completion value.
//E in REPL does this..

var a = 1;
//undefined

var valOfAVarStatement = eval('var x = 16;'); 
// valOfAVarStatement === undefined 

var valOfAnAssignment = eval('x = 16;'); 
// valOfAnAssignment === 16 

console.log("life is undefined")
//life is undefined
//undefined

When we are calling console.log() from our browser console or the terminal, we are calling it from a JavaScript REPL.

With our new understanding of what REPLs are and how they work we can work through the process of console.log(“life is undefined”). First, the REPL will read in our command as JavaScript. Then it will look to evaluate parts of our command. The evaluating step will always return something, like the sum of 2 + 2 or a modified array, but in this case, there is nothing to evaluate. Therefore it returns undefined. The same goes for the first and second examples.

CONCLUSION

  • undefined is assigned to a variable by javascript when we don't assign any value to it after it's declaration.

  • functions always return something and they return undefined when we don't define what to return.

  • Browser Console is also a REPL. It stands for Read, Evaluate, Print, Loop.

  • Evaluate step always returns something like 3 + 3= 6 but in the case of console.log("life is undefined"), there is nothing to evaluate.