JavaScript Functions - return vs. console.log()

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 use return.

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 the num 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. ๐Ÿ”…

ย