JavaScript Functions - return vs. console.log()
Learn the differences between printing a value with console.log() inside a function and returning a value from a function in JavaScript.
Hi! If you want to learn the differences between printing a value in the terminal with console.log() and returning a value from a function, then this article is for you.
๐น In this Article
You will learn:
What
console.log()
is used for.What happens if you try to assign the value returned by
console.log()
to a variable.The default return value in JavaScript.
How to return a value from a function.
When to use
console.log()
and when to usereturn
.
Sounds interesting, right?
Choosing the right approach can make all the difference in your program.
So... Let's begin! ๐
๐ธ console.log()
console.log()
is a method that you can use to print a value to the console (or terminal). It's very helpful when you just want to check the value of a variable or value returned from a function call.
Parameters
This method only has one required parameter: the value that you want to print. This could be the value itself or a variable.
Syntax
To call this method, you would write something like this:
console.log(myValue);
And the value of the variable would be printed.
Example
For example, this line of code:
console.log("Hello, World!");
Will generate this output:
Hello, World!
The console
Object
But you may ask: "where does the console
module come from?"
According to MDN Web Docs:
The
console
object provides access to the browser's debugging console.
So it's a built-in object that we can have access to in web browsers.
๐ก Tip: the console
object has other methods as well, such as .assert()
, .clear()
, .debug()
, and .info()
. You can learn more about them in MDN Web Docs.
The console
Module in Node.js
We can also use console.log()
outside the browser if we install Node.js because Node.js includes a module that simulates the functionality of this special object.
According to the Official Node.js Documentation:
The
node:console
module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
๐ก Tip: To run your JavaScript program with Node.js, you would write node <myProgram>.js
in the terminal.
๐น Default Return Value in JavaScript
Great. Now you know how to use console.log()
and where console
comes from, so let's start diving into the return
statement in JavaScript.
What do you think will happen if we try to store the return value of a function that does not have a return
statement?
Example
For example:
myFunction
below has one line of code that prints the value of thenum
parameter.In the line after the function definition, we call this function and we assign the value returned by the function call to a variable called
myVar
.Finally, we print the variable with
console.log()
.
Let's see what happens:
function myFunction(num) {
console.log(num);
}
let myVar = myFunction(3);
console.log(myVar);
๐ก Tip: Try to predict the output....
The output will be:
3
undefined
First, the value 3 is printed in the terminal and then we see another value: undefined
.
This looks like a strange value, right?
Why does the function return undefined
?
undefined
Let's talk a little bit more about undefined
. This is a primitive value in JavaScript.
According to MDN Web Docs:
undefined
is a primitive value automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments.
In this case, undefined
was assigned to the variable myVar
because the function does not have a return statement.
When we try to assign the value returned to the variable, we actually assign undefined
.
let myVar = myFunction(3);
Interesting, right? ๐ค
Great! Now let's talk about the return
statement and compare it with console.log()
.
๐ธ Returning a Value from a Function
Now let's focus on returning a value from a function instead of just printing it to the console (or terminal).
If we have this code:
function myFunction(num) {
return num;
}
let myVar = myFunction(3);
console.log(myVar);
This is the output:
3
Now we don't see undefined
. Why?
Because we are returning a value from the function.
In the function definition, we have a return
statement:
function myFunction(num) {
return num; // return statement
}
So, when we call the function and assign the return value to myVar
, the value 3 is assigned to the variable:
let myVar = myFunction(3);
And then, we print this value:
console.log(myVar);
This is the output that we see in the terminal.
๐น console.log()
vs. return
Awesome. Finally, now that you know how console.log()
and return
work, let's focus on their differences and when you should use them.
When to use console.log
You should use console.log()
when you only need to see the value of a variable in the console or terminal. This value will not be stored in the program, so you will not be able to work with it in your program.
This is very helpful when you are testing your code to check if the value of a variable is correct or not and to print descriptive messages for the user if you are developing an interactive application for the terminal.
When to use return
However, if you need to store the return value to use it in your program, you should use return
. You will be able to assign it to a variable.
These are the main differences and use cases for console.log()
and return
.
๐ป Thank you for reading my article. I hope you liked it and found it helpful.
If you would like to find more coding tutorials, follow me on YouTube (Coding with Estefania) and Twitter (EstefaniaCassN).
Have an awesome day. ๐