If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Defining a procedure

We can do some pretty neat things with programming, like computing complicated math expressions and manipulating strings in all sorts of ways. Sometimes we come up with a bit of code that's so neat that we want to reuse it multiple times.
That's why all programming languages let you make your own procedures, also known as subroutines, functions, or methods. A procedure is a reusable collection of statements.
In the JavaScript language, there are multiple ways to define procedures. One way is create a function definition with statements inside:
function singBingo() {
   println("B!");
   println("I!");
   println("N!");
   println("G!");
   println("O!");
}
Once we've defined that function, we can call it whenever we'd like, and the computer will execute the statements that are inside the function block (between the curly brackets).
To call a function in JavaScript, we write the name of the function, two parenthesis, and a semi-colon. Let's call it three times, for good measure:
singBingo();
singBingo();
singBingo();
📝 See similar code in: App Lab | Snap | Python
This likely looks familiar, as we've already been calling built-in functions like println() and Math.sin(). Now we can call our own functions too, and build up a useful library of procedures to suit our needs.
To give you another example, here's a program that tells my favorite knock-knock joke, with the help of a few procedures and a bit of ASCII art:
📝 See similar code in: App Lab | Snap | Python
Imagine how painfully long we could make that joke, now that we have those three functions! That's the power of procedures.
When we call a procedure in our program, we are saving ourselves the time and space of typing the same code repeatedly. We're also reducing our chance of introducing new bugs, since we don't need to re-type all the code inside the function.

Inside the computer

When a computer sees a call to a procedure in a program, it looks it up by its name, finds the statements inside the procedure, and executes those statements. The computer is still doing all the work of executing those statements, even if it looks like less code to us.
In some ways, it's doing more work, since it has an additional step of looking up the procedure name. That's a quick check, though.
Recall the code before that called singBingo() three times:
singBingo();
singBingo();
singBingo();
Behind the scenes, the computer still executed all these lines:
println("B!");
println("I!");
println("N!");
println("G!");
println("O!");
println("B!");
println("I!");
println("N!");
println("G!");
println("O!");
println("B!");
println("I!");
println("N!");
println("G!");
println("O!");
Procedures don't make it easier for computers to run a program, but they do make it much easier for humans to make complicated programs.
We'll explore ways to make our procedures even more powerful soon, by using parameters and return values.

Procedures in pseudo-code

This pseudocode represents a procedure called name:
PROCEDURE name ()
{
     <instructions>
}
Here's pseudocode for the singBingo procedure and calls:
PROCEDURE singBingo () {
  DISPLAY ("B!")
  DISPLAY ("I!")
  DISPLAY ("N!")
  DISPLAY ("G!")
  DISPLAY ("O!")
}

singBingo ()
singBingo ()
singBingo ()

🙋🏽🙋🏻‍♀️🙋🏿‍♂️Do you have any questions about this topic? We'd love to answer— just ask in the questions area below!

Want to join the conversation?