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

AP.CSP:
AAP‑3 (EU)
,
AAP‑3.A (LO)
,
AAP‑3.A.1 (EK)
,
AAP‑3.A.2 (EK)
,
AAP‑3.C.1 (EK)
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?

  • female robot ada style avatar for user Sanya
    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.
    (8 votes)
    Default Khan Academy avatar avatar for user
    • hopper jumping style avatar for user pamela ❤
      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).
      (7 votes)
  • blobby green style avatar for user Rick Kreutzkamp
    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() {...};
    (1 vote)
    Default Khan Academy avatar avatar for user
    • hopper jumping style avatar for user pamela ❤
      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).
      (6 votes)
  • blobby green style avatar for user a.nizomxonov
    () { } why need to put empty parentheses?
    (0 votes)
    Default Khan Academy avatar avatar for user
  • hopper happy style avatar for user Fredrick Nganga
    Do I need to have javascript or any of the programming languages in my computer in order to do programming in Khan academy community?
    (0 votes)
    Default Khan Academy avatar avatar for user