Main content
Procedures with parameters
When programming, we use procedures to make our code more reusable and to better organize our code. Often-times, we pass parameters to a procedure so that we can change the output of the code.
The need for parameters
Consider this JavaScript code:
var greeting1 = "Hello, Jackson, how are you?";
println(greeting1);
var greeting2 = "Hello, Mr. H, how are you?";
println(greeting2);
var greeting3 = "Hello, Stranger, how are you?";
println(greeting3);There's a lot of repetition in that code: it continually stores a string inside a variable that greets someone and then displays it on the screen. However, there is also variance in the code: the name changes each time.
We can create a procedure with parameters to handle both the repetition and the variance.
To specify parameters in JavaScript, we write the name of the parameter (or parameters) inside the parentheses that come after the function name. We then reference that parameter name inside the function.
function sayHello(person) {
var greeting = "Hello," + person + ", how are you?";
println(greeting);
}Now we can call that function and pass our desired value for the parameter:
sayHello("Jackson");
sayHello("Mr. H");
sayHello("Stranger");That syntax should look familiar, since we've been calling a function with parameters since the very beginning:
println()!println("Hello");
println("World");Now we can start using parameters in our own user defined functions and make them much more customizable.
✏️ The program below generates funny names using a function that takes a single parameter. Try calling the function more times and modifying the code inside the function to see what changes.
Multiple parameters
What if one parameter isn't enough to customize our procedure the way we want it? That's no problem, we can just specify more parameters!
In JavaScript, we can specify multiple parameters with a comma-separated list inside the parentheses, making sure to give each parameter a unique name.
In the code below, the
reportGrade function accepts two parameters, and uses them to report the score of a student on a 30-question test:function reportGrade(studentName, numCorrect) {
var score = (numCorrect/30) * 100;
var report = studentName + " earned: " + score;
println(report);
}
reportGrade("Sally", 27);
reportGrade("Wilbur", 24);Whenever you're writing procedures with parameters, pay careful attention to your parameter names, since you need to reference those names exactly inside the procedure. It helps to make the names very descriptive.
✏️ Ever played Mad Libs? The following program uses a procedure with eleven parameters to generate a story. Ask a classmate for parameter values and see what story comes out!
Passing variables as parameters
In the examples above, we've been passing literal strings and number values as the parameters, like "Sally" and 27. We can actually pass any programatic expression that evaluates to a value, like a variable.
This procedure displays the result of multiplying two numbers:
function showMathFact(num1, num2) {
var multiplied = num1 * num2;
println(num1 + " x " + num2 + " = " + multiplied);
}I can easily show just the multiples of a particular number by storing the first number in a variable, and always passing that as the first parameter:
var firstNum = 9;
showMathFact(firstNum, 1);
showMathFact(firstNum, 2);
showMathFact(firstNum, 3);✏️ Try changing the value of the
firstNum variable in the program below, and notice how that affects every function call below it.Parameters in pseudocode
This pseudocode represents a procedure that takes two parameters named
parameter1 and parameter2:PROCEDURE name (parameter1, parameter2)
{
<instructions>
}Here's pseudocode for the
reportGrade procedure and calls:PROCEDURE reportGrade (studentName, numCorrect) {
score ← ( numCorrect / 30 ) * 100
report ← CONCAT(CONCAT(studentName, " earned: "), score)
DISPLAY(report))
}
reportGrade("Sally", 27)
reportGrade("Wilbur", 24)
🙋🏽🙋🏻♀️🙋🏿♂️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?
why did they make this this is harder then its need to be(29 votes)- I think base on what we have learned until now we definition like this. But in the future when we learn the loop and etc. we can use a loop instead of this long code. (I mean about the Example: "multiple 9" )(0 votes)
I don't understand the difference between the parameter and the variable. Isn't the parameter a variable too?(4 votes)
From the author:Great question! A parameter is a value that is passed into a procedure. Once it is passed into the procedure, it is stored in a local variable in the procedure. So when a procedure has parameters, it means that you can pass values to the procedure that will become variables inside the procedure.
In terms of passing values, note that you can pass either literal values, variables, or expressions - anything that evaluates to a value eventually:
Consider these three JS examples:showPoint(50, 25);var x = 50;
var y = 25;
showPoint(x, y);var x = 20;
var y = 25;
showPoint(x + 30, y);
They all pass 50 and 25 to the function, and they will become available in the function as variables. However, their names will be whatever they are called in the function header. For example:function showPoint(xPos, yPos) {
fill(BLACK);
ellipse(xPos, yPos);
}
If that is how the function is defined, then the values passed in will be stored in the local variables xPos and yPos, regardless of what their variable names were outside of the function.
Does that make sense? Let me know where I can clarify further.(16 votes)
What is "programatic" under "Passing Variables as parameters" Is that a typo? Do they mean "pragmatic" or "programmatic?"(1 vote)
I believe they meant "programmatic".(2 votes)
- do procedures always call for an output? Like will the end result always be returned?(1 vote)
- it could have been made this simple.
function showMathFact(firstNum, num2) {
println(firstNum*num2);
}
var v=9;
showMathFact(v, 1);
showMathFact(v, 2);
showMathFact(v, 3);
showMathFact(v, 4);
showMathFact(v, 5);
showMathFact(v, 6);
showMathFact(v, 7);
showMathFact(v, 8);
showMathFact(v, 9);
showMathFact(v, 10);(0 votes)- It doesn’t show the equation like the example shows(2 votes)
how do you do this when it's so hard? (I'm not a programmer!)(0 votes)- In the example of sayHello function, don’t v need to define 'person' as a var first?(0 votes)
When we name or specify the parameter in the function
declaration, it will become a variable in that function or procedure scope.function sayHello(person)
So there is no need to declare it separately. Some languages that have different types needs to have the type also when the parameter is specified.
For example a function declaration in C:int sum(int a, int b);(0 votes)
function reportGrade(studentName, numCorrect) {
var score = (numCorrect/30) * 100;
var report = studentName + " earned: " + score;
println(report);
}
reportGrade("Sally", 27);
reportGrade("Wilbur", 24);
In the var score = (numCorrect/30) * 100;
why is it showing the number they got correct instead of the
percentage. If they got 27 correct then it looks like it is dividing 27 by 30 and multiplying it by 100 which, on my calculator gives me 90. Since it looks like it is printing the report which shows the persons name and their score.(0 votes)- reportGrade is showing how you call the function. The result isn't displayed. When you call the function you have to give it the name of the student and how many correct answers (which you can see inside brackets on the first line which reads:
function reportGrade(studentName, numCorrect)
If you called the function then it would show the percentage, which resolves to 90 for Sally as you've noticed. Hope this was helpful for someone.(0 votes)
Hi! I made a Quiz and a procedure to calculate the score (on a different website). The procedure provides a certain amount of points for each correct answer. Is the procedure adding up all the points considered a parameter? In other words, are the points a parameter?(0 votes)
It mostly depends on your definition of the program you are writing. Without the source code it's hard to tell what the problem is.(0 votes)
- When it says for CSP that "Each call must pass a different argument(s)," does that mean that something completely different must be passed into the function? Would passing in the same variable that has been greatly changed (for example a list that has more or changed elements) count as passing in a different argument? Thanks!(0 votes)
- In fact, any type of value can be passed into the function as a parameter, and there is no need to distinguish whether the type of the value and whether the value has changed or not.(0 votes)
