Let’s Talk About Parameters, Arguments and Variables!

Carla Stickler
From the Stage to the (Computer) Screen
6 min readApr 17, 2020

So, you are a bit confused about the difference between parameters and arguments and when variables are thrown in the mix your brain explodes a bit. That’s ok, the concept is bit tricky to understand for a code newbie. Hopefully we can break it down and you can leave feeling like a champ!

Let’s start with parameters. When we write functions, we set up our functions with parameters. They are the things that go inside the parenthesis. Parameters are like placeholders in our code. We don’t know exactly what information will be passed into our function when it’s called, so we set up our functions with parameters.

function functionName(imAPlaceholderForAName){
return `${imAPlaceholderForAName} is a cool person`

This feels silly, but basically we’re setting up the possibility for any name to be placed into this function and then return a string with the added name to is a cool person. The name of my parameters can be anything I want. I could name it banana and it would still work the same as long as when I write my code, I’m consistent with the word banana.

function imAFunction(banana){
return `${banana} is a cool person`

This is confusing to read because looking at this function it’s hard to tell what banana is. We only assume it’s a name because of the behavior we see on the inside of the function. But we want to stick with naming conventions that tell who ever is reading our code, what kind of information this code takes in. If we aren’t consistent with our naming, we can end up with a bunch of undefined errors.

function imAFunction(banana) {
return `${name} is a cool person`

This would tell us name is undefined. Why? Because we haven’t defined a variable name anywhere is our code. We’ve told our code it takes in banana not name. More on variables in a sec.

Better yet, we also want to name our function something a little more specific.

function coolPerson(name){
return `${name} is a cool person`

Now, we have a function definition that tells us what this function does and what kind of parameters it requires to run the way we expect it to run.

If I want this function to work, I need to pass in a name. This is where arguments come into play. We’ve set up our coolPerson function with some parameters that say: this function will only run when the thing passed into it meets our parameters. That thing being passed into the function when we call it is our argument! This function takes one argument, a name. Because we’ve stuck with setting our parameter to name, this implies it should be a singular name, most likely a string.

If I had named my parameter something like names that would tell me a different story. It’s most likely this would take in an array of multiple names, if it was person maybe I’d think it takes in an object of a person. You’d have to look at the code to determine what the exact intake for this function is, however for our example, we can assume it’s a string, because it is.

So our argument being passed in can come in many forms. This is where code newbies tend to get a little confused. Each form has one thing in common. The thing that it points to must be a string.

I can directly pass a string in as an argument like so:

=> Elaine is a cool Person

I call the function and pass in one argument of a string with the name “Elaine” in it. This makes sense. When we start passing in variables is when things start to become confusing.

Same goes with arrays and other types of things we may want to pass into a function. On a small tangent here, say I have a function called coolPeople that takes in an array I can call it two different ways. One by passing in a variable that points to an array or by passing the array directly into the function like so:

let myArrayOfFriends = ["Elaine", "Jerry", "Kramer"]coolPeople(myArrayOfFriends)ORcoolPeople(["Elaine", "Jerry", "Kramer"])

The above will output the same response. Ok, tangent over, we will deal with arrays in another blog post. Back to our single string example!

What is a variable? Basically a variable is like a keyword that you create that points to something. You, the developer, get to decide what these keywords are. These are not special words, they can literally be banana, but that wouldn’t be helpful in this case. Here’s a variable definition:

let name1 = "Elaine"

I can call name1 anything, literally anything.

let banana = "Jerry"
let aPersonILike = "Kramer"
let aPersonIThinkIsSuperCool = "Newman"

Literally anything! However, when you pass in the variable, it must be in the same form as we write it. So, if we want to return the same thing above using our variable we’d get something like this:

=> Elaine is a cool person
=> Jerry is a cool person
=> Kramer is a cool person
=> Newman is a cool person

While that last one is questionable… cuz is Newman really a cool person? This shows us how we pass in variables. We must define the variables and then they are passed in as arguments to our function. The variable points to a string which meets our function’s parameters.

What I see a lot when people are first trying to grasp these concepts are things like this:

function coolPerson("name"){
return `{"name"} is a cool person`

This is not correct, but I see the intention behind it. We know name is supposed to be a string, so we think, oh strings have quotations around them, I need to add quotations around name. Unfortunately, we will get a syntax error if we try this:

function coolPerson("name"){
SyntaxError: Unexpected string

We can’t set up our parameters this way. Javascript will yell at you. Most programming languages will throw you an error. Function parameters behave similarly to variables in this way. They are keywords that point to something, but they themselves, are not the thing they point to.

Another mistake I see a lot is this:

function coolPerson(name){
return `{"name"} is a cool person`

When I try to call this function by passing in name1 to coolPerson, what do we expect?

=> name is a cool person

Was that you thought would happen? We basically told our function to return a string called name interpolated with the rest of the sentence. We overwrote our parameter by making the word name into the string that we will return as part of our sentence.

So, our parameter variable, must be in the same form inside the body as we set up in the parenthesis.

Another mistake I sometimes see is resetting the parameter inside the body of the function:

function coolPerson(name){
name = "Kramer"
return `${name} is a cool person`

When I call this function and pass in name1 that points to the string “Elaine”, what do you think will happen?

=> Kramer is a cool person

We wanted Elaine to be the cool person, because, she is the coolest! However, we redefined our name parameter to be equal to “Kramer” so no matter who we pass into this function, “Kramer” will always be the cool person, and I really don’t think that’s fair to everyone else.

To wrap up, parameters are the way we set up our function’s behavior. They act like variables and need to be consistent throughout our code. While they can point to all sorts of things (objects, arrays, strings, numbers, etc) they, themselves, are not those things, they are just keywords that you, the developer get to make up.

Arguments are the things we pass into our functions when we invoke them (think Harry Potter here, we invoke a spell to make it happen, same with functions, we call them or invoke them to make the stuff inside the body happen). Our arguments can be passed in directly or as variables.

Variables are just keywords, that point to stuff. We get to decide what those variables are, but should stick with naming conventions if we want other developers to ever be able to read and understand our code.

I hope this blog post was helpful and now you feel like a champ! Good luck in your coding, and remember: be kind to the future person who reads your code and make it easy to understand.