The Basics of Functions in JavaScript

Functions are the workhorses of programming. They allow you to create on on demand set of actions that you can use as many times as you need. Any time you do anything on the internet, chances are, a function is being used.

Making a function

There are multiple ways to declare a function. We will focus on the form of declaration that is the easiest to understand. You can declare a function in JavaScript with the following syntax.

function theFunctionsName(parameters) {
   //the code the function executes here
}

First you simply use the word function to indicate that what follows will be a function. The name of your function follows next. There can not be any spaces in the name and it is standard to use Camel Case for multiple words. Next you use a set of (). Inside the parenthesis you place any parameters you want to be able to use. Your function does not have to have any parameters if you don’t need them. After that you use a set of {} brackets to indicate the beginning and end of the code that is to be executed when the function is called. It is standard to indent your code for readability.

Examples of Use

Functions allow you time many things from the simple to extremely complex. You can do basic math or make the characters in a game move. We will use some math as an example.

Lets say I had an array of numbers and I want to multiply them all by 2. If I don’t know exactly when I am going to need to do this or what set of numbers I am going to end up using until later this becomes a problem. What I need is a function that I can call on later that will do this.

function multiplyByTwo(arrayOfNumbers){
   for (let i = 0; i < arrayOfNumbers.length; i++) {
      arrayOfNumbers[i] * 2
   }
}

In the above function we can multiply every number in our array by 2 using a for loop. Since it is inside of a function, we can call on this for loop any time we want using the following syntax.

multiplyByTwo(myArray) //or
multiplyByTwo([1, 2, 3]) 

By simply typing in the name of function and then the variables that you want to use inside of (), you can call back the code that you had previously written up in the function. Our function above does have some flaws if you were to try and use it though. While the above function will multiply the numbers it will not actually send the outcome outside the function. If you call it as it you will just get undefined. This can be fixed with a few changes.

function multiplyByTwo(arrayOfNumbers){
   const array = [] //a container
   for (let i = 0; i < arrayOfNumbers.length; i++) {
      array.push(arrayOfNumbers[i] * 2)
   }
   return array //a command to send the new value back
}

As you can see I have added two more lines of code to my function and put my math equation into a .push method. The first thing I added is a new array that will serve as a container to store the outcome of my multiplication. The new array is declared inside of the function and as such it can not be used outside of the function. Adding the new array alone just means we have the same problem as before. As such I also added a return command to the end of my function. This will tell JavaScript that after it is done executing the rest of the code that it should send this information back. I also added the .push so that it will update the new array with the values of my math equation.

multiplyByTwo([1, 2, 3]) // would now return [2, 4, 6]

Functions can also take multiple parameters so you could make a function that multiples an array by the value a value you choose at the time you call the function. With multiple parameters when calling the function you must put your parameters in the order they are listed in the function’s parameters.

function multiply(array, value) {
   let newArray = []
   for (let i = 0; i < array.length; i++) {
      newArray.push(array[i] * value)
   }
   return newArray
}
multiply([1, 2, 3], 4) //would return [4, 8, 12]