Please enable JavaScript to use CodeHS

Basic Functions in JavaScript

By Ryan Hart

Functions are one of the most important topics to master when programming in JavaScript. They help us organize our code, make it easier to understand, avoid repeating code, and make our program run more efficiently. That’s a lot of benefits! Up to this point, without functions, our program runs like a long morning to do list:

Morning List

Functions allow us to break the long list into conceptual blocks of tasks, where each block would be a specific function:

Grouped Activities

When we use these morning functions, our code is much easier to read and understand:
Breakfast Functions

And if your brother wakes up and wants toast and eggs as well, you can call those functions again with only 2 lines instead of the original 11:

Breakfast Functions

Functions in JavaScript

The same logic above applies to using functions in JavaScript. Functions complete a specific job that may require a series of tasks. When we want to run the function, all we have to do is define the function, specifying the desired tasks or commands, and then call the function to run through those tasks. We can even give the function inputs, called parameters, that provide extra information for the function to use – like the number of eggs desired for the Make Eggs function above.

Take a look at the following slides to see an example in Javascript:


As you can see from the last slide, using the tripleNumber() function makes our program much more efficient.
Function

Here are a few important points when making functions in your program:

  • Functions should only do one thing. That is, the tripleNumber() should not triple a number AND add 10. That would be confusing.
  • The function’s name follows the same naming convention as variables – lowerCamelCase and identifies the job the function is doing.
  • Variables created inside a function, including parameter variables, can only be used inside the function.

Take a look at this example in the code editor below.

  • Try calling the function with the numbers 11 and 15. See how easy it is once the function has been defined?
  • What happens if you try using the parameter variable num outside of the function? Try writing println(num); outside of the function.
  • Try deleting the word function when you are defining the tripleNumber() function. What happens?

More function examples

This next example takes in two parameters in order to calculate the area and perimeter of a rectangle.

  • Add a couple more call statements with new numbers.
  • These functions require two parameters in order to run. See what happens when you only have one or zero in the call statements or function definitions.
  • Notice the parameters are defined as w for width and then l for length, in that order. What happens if you reverse the numbers in a call statement?


In the next example, we have a function that draws a circle in the canvas. The required parameters include the circle radius, the circle color, the x position of the center, and the y position of the center.

  • Imagine how much code we’d have to repeat if we didn’t use this function!
  • Change some of the values in the function call statements and see what happens!
  • Create a similar function named createRectangle() with parameters width, height, and color that adds a rectangle to the canvas with each call.

Now it’s your turn!

Use the editor below to try to build out some functions of your own. Remember, you need to both define the function and call it in order to see the results.

  • Write a function that takes in a person’s name as a parameter and prints out a greeting to that name.
  • Write a function that takes in the length, width, and height of a rectangular prism as parameters and calculates and prints the volume ( V = l * w * h) of the prism.
  • Write a function that takes in a number as a parameter and then prints a message that many times.