Beginners Guide to Understanding javaScript Functions Parameters/Arguments

What the Functions?!
The goal of this blog is to leave the reader with a clear understanding of how parameters/arguments work within functions in javaScript.
If you're struggling to understand the difference between a parameter and an argument and when the text in parentheses is subjective and when it isn't; read on.

A Quick(ish) Review of Functions
In JavaScript, a function is a reusable block of code that performs a specific task or calculates a value. Functions are an essential part of JavaScript programming as they help in organizing code, promoting reusability, and making it easier to manage the code.

Below is the basic syntax for how a function is written in javaScript. Like many things in programming, there are other ways to write a function, but don't worry about that now.

function functionName(parameterName){
console.log(parameterName) 
};

Neat, right? Now here is an example of the syntax for, and what happens, when we 'call' (or 'invoke') the above function.

functionName('argument')
// => argument
// => undefined

In the next section, we'll unpack what's going on here step by step.

A Deeper Dive Into a Basic Function

Let's pause for a moment and thoroughly review the code we just wrote and the reasons behind it.

function functionName(parameterName){
console.log(parameterName) 
};

1. We declare that we're writing a function by starting off with the declaration function. This is not subjective, function is a keyword that lets javaScript know we're writing a function.

2. We name our function. In the above code we chose "functionName". What you name your function is subjective, but best practice says it should have something to do with what the function does and be camelCased.

3. We put a set of () after the function name. This is not subjective and must be done, even if they remain empty.

4. We specified our parameter inside the (). Much like the functions name, the specific word you choose is subjective. However, best practice dictates it should have something to do with what the expected argument is (you'll understand what I mean by argument in a bit).

5. We open/close a pair of {}. Everything inside this set of {} is the functions body. Lots of code can be included in a functions body, but we won't go into that here. For our purposes, we simply console.log() our parameter.

We made it through the function! In the next section, let's take the same approach to breakdown what happens when we call our function.

A Deeper Dive Into a Basic Function Call

Before getting started with our deep dive, I want to point out that 'call' and 'invoke' are used interchangeably with functions. They both mean to run the function, causing the code inside the function to be executed. When you call/invoke a function, the program jumps to the function's body, executes the code within it, and then returns to the point where the function was called/invoked.

OK, on to our function call.

functionName('argument')

1. We simply type the functions name, in our case it's functionName followed by ().

2. We pass an argument inside the (). Here we passed the string 'argument'.

That's it. We called our function and passed the string 'argument' as an argument.

If you're following along in replit you'll see
// => argument
// => undefined
in your console.

When we call a function the code inside the function's body is executed. Whatever we pass as an argument when the function is called, becomes the value of it's parameter. So here, the string 'argument' becomes the value of the parameter parameterName.
The console.log(parameterName) in the body of the function is executed as console.log('argument'). If we called functionName('with a different argument') we would see

// => with a different argument
// => undefined

in our console, because the string we passed, once again, became the value of parameterName.

Before we conclude this blog post, there are a few important points that should be clarified. While our discussion has centered on functions with a single parameter, it's worth noting that there can be functions that take no parameters or multiple parameters. Although the logic we cover here will help with understanding these variations, they are not the focus of this blog.

Also, when we called our functionName, we noticed that in addition to the argument we console.loged, we also received the value 'undefined'. This happened because of the fact that functions have the ability to return values. However, since we haven't explored the concept of returns in this blog, our code did not include any. Naturally, the absence of a defined return value resulted in an output of 'undefined'. Lets worry about all that another day, and return our attention to the topic at hand – parameters and arguments.

Putting It Together

Alright, now that we've dived into some complex stuff, let's switch gears and explore another function. It's going to be pretty similar to the functionName we've been tinkering with, but this time let's ditch the boring literal naming and get creative with some metaphors that I've found super useful!

Consider the function;

function aPitcher(aCup){
console.log(aCup)
};

We can call it several times, passing a different argument to the parameter aCup each time.

aPitcher('orange juice')
// => orange juice
// => undefined

aPitcher('coffee')
// => coffee
// => undefined

aPitcher('beer')
// => beer
// => undefined

Hopefully this makes as much sense to you as it did to me. When we call a function and pass an argument to its parameter, it's like filling up a container with that specific value. Then, within the function's code, wherever the parameter is used or referred to, the corresponding value that we passed gets inserted or used in its place. This is incredibly useful. Just like we can use one pitcher and one cup for any number of bevys, we can use one function and one parameter to execute a block of code on many different values.

Thanks so much for reading my blog! I hope it helps make functions a little more approachable. Happy coding!!