Main content
AP®︎/College Computer Science Principles
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();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:
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?
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.(12 votes)
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).(14 votes)
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() {...};(3 votes)- 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).(12 votes)
Do I need to have javascript or any of the programming languages in my computer in order to do programming in Khan academy community?(3 votes)- From the author:In our programming courses, we teach JavaScript along with the ProcessingJS library and we provide an online coding environment. The course is here:
https://www.khanacademy.org/computing/programming
The editor is here:
https://www.khanacademy.org/computer-programming/new/pjs
(If you want to program JavaScript without also using ProcessingJS, you can do that using your browser's JavaScript console.)(9 votes)
- () { } why need to put empty parentheses?(1 vote)
That's the programming syntax it allows the compiler (the program that translates the code into computer language) to understand what's happening.(6 votes)
why we add sing before Bingo(2 votes)
You don’t need to, it’s just for human readability(1 vote)
