While exploring your browser’s console during your coding sessions, you might have come across this situation many times wherein you get an extra output named ‘undefined’ along with your desired output.Something like this:
We just wished for Hello World to be printed.
Why are we getting this extra undefined all of a sudden?
Well, fret not!
Before understanding why all of this happens, we must first understand something called REPL.
REPL
REPL (say it, “REP-UL”) is an interactive way to talk to our computer. Like how we talk to our friends in the English language! So now how does the computer understand our talking? Well, it mainly does four things:
- Read the user input (our commands).
- Evaluate our code (to work out what we mean).
- Print any results (so we can see the computer’s response).
- Loop back to step 1 (to continue the conversation).
So, “REPL” is an acronym for Read, Evaluate, Print and Loop because that’s precisely what the computer does!
The computer tells us it’s waiting for instructions by presenting us with the two chevrons (>>). We just type our commands and hit return for the computer to evaluate them.
Node.js REPL
Now that we got a basic understanding of REPL, let’s return to our main dilemma of the ‘undefined’ example.
Let’s break it down along with the 4 things of REPL mentioned above.
- R – It reads our command console.log(“Hello World!”) as JavaScript.
- E – Now it will look to evaluate parts of our command. This step will ALWAYS return something, like the sum of 2 + 2 or a modified array, but in our case, there is nothing to evaluate! Therefore it returns undefined. An aha moment!
- P – Now we need to print any result available. Since we told it to print Hello World!, it does the same and prints it out.
- L – And now it loops back to a state where it can take a new set of instructions by presenting us with the two chevrons (>>).
Easy, isn’t it?
Let’s check a few more examples!
Here,
step 1 reads our command 24 * 5
step 2 evaluates our code which it does so by multiplying 24 with 5 hence we do not get any undefined here
step 3 prints the result which we have in this case of 120
step 4 loops back to accept a new set of instructions.
This comprises two scenarios. Let’s go over them one by one!
- First Scenario:
step 1 reads our command of App function definition
step 2 evaluates our code but there is nothing to evaluate as we haven’t called the function yet! hence we are getting undefined here
step 3 prints the result but there is nothing to print!
step 4 loops back to accept a new set of instructions. - Second Scenario:
step 1 reads our command of App() function calling
step 2 evaluates our code where it runs the function App defined earlier which is returning the string Niharika hence we are not getting undefined here!
step 3 prints the result which is Niharika
step 4 loops back to accept a new set of instructions.
Conclusion
Hope this gave an understanding as to why we get undefined in some cases and some we don’t. We also learned about REPL which helps in predicting whether we’ll get undefined or not!
Let me know in the comments what you think about it!
Source: hashnode.com