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.

## AP®︎/College Computer Science Principles

### Course: AP®︎/College Computer Science Principles>Unit 3

Lesson 7: Procedures

# 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 ()``````

## Want to join the conversation?

• When I looked at the Computer Programming topic on Khan Academy, I learnt that the function{} command repeats the same function for infinity. It was what I used to animate shapes. Why did that not happen here when we called the variable?
Thanks.
• Good question. That course is teaching JavaScript with the ProcessingJS library, an additional library for JavaScript that enables the creation of drawings and animations. We include ProcessingJS in every program you make on Khan Academy, so you don't see the library code.

When using the ProcessingJS library, we redefine the draw() function to tell it what code we want to be repeated. Inside its own code, the ProcessingJS library has a timer that repeatedly calls draw(). If we did not include the ProcessingJS library in every program, then draw() would not get called repeatedly.

If you'd like, you can even see the library code here:
https://github.com/Khan/processing-js/blob/66bec3a3ae88262fcb8e420f7fa581b46f91a052/processing.js#L8430
(It may not make sense though, just sharing for full disclosure).
• Why should you always declare a function with a variable? What will go wrong if you use just use: function knock() {...} instead of: var knock = function() {...};
• Declaring a function like that works as well. We have a limitation in our JavaScript environment on Khan Academy where we can only do the "var knock = function", otherwise I would have shown "function knock".

There are some tiny differences between them, but most programmers will never run into the consequences of those differences.
(We only ran into the difference on Khan Academy because we built a complicated real-time programming environment in the browser).
• Do I need to have javascript or any of the programming languages in my computer in order to do programming in Khan academy community?