So, you are learning JavaScript and want to know the difference between a console.log call and a return statement. Well, there is actually nothing in common between the two! However, for a beginner, they can be confusing to differentiate. How do I know? Well, because I remember being confused by them!
In this article, we are going to distinguish what each of these two statements is and how they are used in JavaScript. So let’s jump in.
What Is a console.log() Call in JavaScript?
The most important thing to remember about a console.log() call is that it is almost always used to provide more information to the developer. It is not used to create the program.
When I am working as a frontend developer, I use console.log() calls often. However, these uses are almost always because I want to see the inner working of the program and understand what is going on.
Simply put, console.log is used to aid in debugging your program.
Let’s look at an example below where we want to display the first name of a person. In our example, we know that the Person object exists, and we can see it, we know exactly what is available to us.
please note that using ‘document.write’ is generally bad practice in a real application, this is just for a better understanding of console.log() calls. Feel free to copy and past these one after the other in the console of a separate browser tab
let Person = { FirstName: "John", LastName: "Smith" };
document.write(`${Person.FirstName}`);This example makes it easy to see that our Person object has both a first name and a last name. However, what if we didn’t know what we had available to us and only saw the second line?
document.write(`${Person.FirstName}`);From this line, we can infer that there is a Person object with a property for a first name, but nothing else!
How would a professional JavaScript developer find out what he has available? Easy, with a console.log()!
document.write(`${Person.FirstName}`);
console.log(Person); // { FirstName: "John", LastName: "Smith" }With our console.log we are literally creating a log of what we want to see. Our object is no longer a black box and we can see what’s inside of it.
Note that our console.log did not do anything to actually change the program we wrote. It was simply used to for us as the developer to understand how the program was working!
What Is a return Statement In JavaScript?
In contrast, return statements are used in JavaScript to return a value within a function. These will directly impact our program.
Here is an example of a return statement with the object we used above.
let Person = { FirstName: "John", LastName: "Smith" };
const changePersonsName = (fName, lName) => {
return { FirstName: fName, LastName: lName }
}
Person = changePersonsName("Bill", "Gayer");The code above will actually change our code so that the person object no longer has “John” and “Smith” as first and last names. It now has “Bill” and “Gayer” as first and last names.
In this case, the return statement actually changed our code! How can we check to make sure? Well with a console.log() call!
let Person = { FirstName: "John", LastName: "Smith" };
const changePersonsName = (fName, lName) => {
return { FirstName: fName, LastName: lName }
}
Person = changePersonsName("Bill", "Gayer");
console.log(Person) // { FirstName: "Bill", LastName: "Gayer" }Doing so gives us as developers an inside look as to what is happening and we can be sure our code works as intended.
Summary: What Is The Difference Between a console.log Call and a return statement?
So, what is the difference between a console.log() call and a return statement?
Simply put, a return statement returns an execution to the caller with an optional result. The return statement will directly affect your code and allow your function to return a value to the rest of your program.
A console.log() call simply outputs a log of information within your console. It is used by developers to see what is happening in their program so they can either debug their code or better understand how it is working.
There is actually nothing in common between them!
Conclusion
Hopefully, this article has helped you see the difference between a console.log() call and a return statement. It can be tricky as a beginner to get a full understanding, but as time goes on it will get easier!
If you are new to JavaScript and want to become a pro, check out this best-selling course.
As always, happy coding!
