JavaScript Functions - Parameters & Arguments Explained

Learn what parameters, arguments, and return statements are with videos and animations.

---

Let’s understand what is a JavaScript Parameter & Argument.
Also what the return statement is.
In the previous article, we learned about the general idea of a function, function definition & function invocation.
Visit to refresh your knowledge, if you want.
Let’s get a little more advanced with functions.

---

Table Of Contents:

1. JavaScript Variables in Functions
2. JavaScript Functions-Parameters & Arguments
3. JavaScript return statement

---

JavaScript Variables in functions

JavaScript functions can also contain variables.
Let's create a function called addNumbers() to demonstrate.

function addNumbers() {
const a = 5;
const b = 10;
const sum = a + b; // 5 + 10
return sum;
}
console.log(addNumbers());

Code Explanation:
In the function block {}, we have 3 variables a, b and sum, with values.
In the end, we have return keyword.
Followed by function call addNumbers();.

But we can change the above code, using parameters & arguments to replace variable declaration and assignment.

---

JavaScript Functions - Parameters & Arguments

JavaScript function parameters are the names (placeholders) for values.
JavaScript function arguments are the actual values of parameters.

Let me explain it to you like we are having a street conversation, or talk in an informal language.

1. Parameters are variable names. The word parameter is just a fancy word for saying variable name in JS.
2. Arguments are the actual values of those variables. The word argument is just another fancy word for saying variable value
3. So we use parameters(variable names) to refer to argument (variable values)

Makes sense? Let's see it in code, or better convert the above function's variables & their values to parameters & arguments.

function addNumbers(a, b) {
const sum = a + b; // 5 + 10
return sum;
}
console.log(addNumbers(5, 10));

Code Explanation:
Instead of writing variable names inside the function block {}.
We wrote them inside the parentheses ().
And we gave arguments (actual variable values) on function call addNumbers(5, 10).

Most people can’t see the relationship between parameters & arguments (including myself).
So I decided to make a video, animations, and pictures to help you visualize.

Notice, we don’t need to use a JavaScript keyword const, let or var to declare the variables a and b, inside the () parentheses.

---

JavaScript return statement

The JavaScript return statement as it sounds, it returns something.
When the JavaScript functions reaches the return statement, it will stop the function execution and returns the value to the caller.

---

Thanks for reading, follow me on my Youtube Channel (Deep Space).
And here on the dev community, too.
I love coffee, you can buy me one here "Buy me a coffee"

Comments

[Steven Mcleod]

Thanks for the info bro, once I get my gaming ecosystem up and running on Web3 will give your some free tokens, nft's, etc

[Deep Space]

Hey Steven, thank you!
You don't have to. I just wrote "buy me a coffee" and I meant if only you can support me then feel free to do so and buy a coffee.
If you are not able to do so, then don't feel guilty about it (And I'm sorry if I made you feel that way).
It's okay. I have been making tutorials for free and I'll be making them until I become a full time teacher. I didn't start it for money. the only reason I started doing it, because I was struggling with learning programming myself. My goal was&is to "make things as simple as possible" also in time I just felt in love with teaching.

If this somehow "helped you" understand "that's enough for me" to know that I finally explained to 1 person.
Thanks and see you around