Introduction to Functions in JavaScript

This blog is meant to demystify the concepts of functions in JS as well as connect coding concepts to real-world experiences.

5 min readApr 12, 2023

Introduction

For people who are just starting out on their programming career, a lot of the fundamental concepts you have learned thus far can start to blend together leaving you wondering what are the most important parts and what should you be walking away with. This blog is meant to highlight the important parts and demystify some of the questions you might have about functions in JavaScript.

Learning Goals

In this blog, we will become more familiar with:

Declaring a function that receives a parameter.
Calling a function.
Parameters vs. Arguments.
Passing an argument to a function.

Key Vocabulary:

Function Declaration
Function Invocation
Parameters
Arguments

NOTE: I recommend that you follow along with replit. Reading ain’t half as good as doing!

Declaring a function that receives a parameter

The function declaration is the function itself or the place where we build the function. For example:

function myFunction(){
  // this is the code body
  // this is where would put the code that we want the function to execute
  // this function does nothing... so far!
}

Here we built a function called myFunction. myFunction is the function and the code above is the declaration. The code starts with the function constructor (the word function), followed by the name of the function, in this case, myFunction, and then a set of parenthesis followed by a pair of curly braces. The code inside of the curly braces is what we call the code body. Now, let’s add a parameter to the mix!

function myFunction(parameter){
  console.log("This is our parameter: ", parameter)
}

In the code above we added a parameter inside the parenthesis of the function and then console logged it with a little message inside of the code body of the function. The parameter is a placeholder for some other information, more on that later! Just have one question though… How do we run this code?

Calling a function

Before we jump into calling functions, I just want to ask you a real-world question that I think is going to really knock the concept of declaring and calling functions out of the park. Would you agree that there is a difference between building a car and driving a car? Absolutely! When we are building a car, we are designing the car to our specific needs, but it doesn’t mean we are also driving the car. When we drive the car, we are no longer building it, we are using the car the way it was designed. In this analogy, the car is the function. Building the car means we are building the function while driving the car means we are calling or invoking the function.

Back to business! In order to call a function we need to type the name of the function followed by a set of parentheses. This needs to happen after the function declaration.

// This is the function delcaration
function myFunction(parameter){
  console.log("This is our parameter: ", parameter)
}

// after the function delcaration
// type the name of the function followed by a set of parentheses
myFunction() // this is the function invocation

Add this code to your replit and hit the green play button. You should see:

Let’s break this down. We added the code to the file (left side of the replit window) and after we hit run, we got our message logged to the console (right side of the replit window). It reads: “This is our parameter: undefined”

Why is our parameter undefined?

Parameters vs. Arguments

Parameters and Arguments are a 1 to 1 exchange. If we have one parameter, we need to have one argument. If we have two parameters, we need two arguments, and so on. When we designed myFunction to receive a parameter, we wrote parameter inside of the parentheses of the function. When we do this we are saying that in order for myFunction to do its job correctly, it needs to receive one argument.

Going back to the car example, in order for the car to run we need to supply it with gas. In this example, the gas would be a parameter. But just because the car needs gas doesn’t mean we are at the pump filling it up with gas. We have to drive to the gas station, pay for the gas, grab the pump handle, and then we can start filling it up. The act of us physically supplying the car with gas is the same as supplying an argument to a function. So when and where do we pass an argument to the function?

Passing an argument to a function

We pass the argument when it is time to call the function. On line 8 of the previous code example, we are calling myFunction. Inside the parentheses, add your name in string format inside of the parentheses like this:

Now, when we hit run and check the console we see “This is our parameter: Luis”. Instead of undefined, we got Luis! Before it was undefined because we weren’t passing it in, but now that we are passing something in, we get the thing that we passed in, in this case, the name Luis!

The parameter can be anything you can think of, like a number:

it can even be an array of numbers:

Conclusion

Functions are integral to creating dope applications using JavaScript. You can program your function to do anything you can think of. With the knowledge that you gain from this article, you are one step closer to becoming a JavaScript engineer!