Activity: Parameters

In the previous lesson, the parentheses () in function definitions were skimmed over. These are used to indicate the Parameters for the ||functions:function||.

Parameters are variables that can be passed (given) to the ||functions:function||. This allows for functions that can react appropriately to different conditions and settings.

Concept: Functions with Parameters

Functions can be provided with parameters by including them between the parentheses in the function definition.

function name(parameter: parameterType) {
    // function contents
}
name(value);

There are three new elements added to this snippet since the previous lesson:

• parameter: the name of the parameter variable
• parameterType: the type the parameter must be
• value: a variable (or value) that is being passed to name

value must be of type parameterType, or else the code will not be able to run.

parameter can be handled like any other variable within the scope of the function ||functions:name|| - however, the value it is initially assigned will be whatever value is provided when the function is called.

Example #1: Reducing Redundancy with Parameters

Parameters can be used to reduce redundancy between different functions.

1. Review the two code snippets below
2. Verify that the two snippets produce the same results
3. Identify how ||functions:printMessage|| uses parameters to reduce the redundancy between ||functions:printHello|| and ||functions:printWorld||

function printHello() {
    console.log("Hello");
}

function printWorld() {
    console.log("World");
}
printHello();
printWorld();

function printMessage(message: string) {
    console.log(message);
}

printMessage("Hello");
printMessage("World");

Beyond just reducing redundancy, this allows for the code to be more flexible: if the developer chooses to start all messages by printing “Hey Listen!” before the message, this can be changed in a single place, rather than in every method that prints to the console.

Student Task #1: Hey, You!

1. Create a function named ||functions:greet||
2. Add a parameter firstName that is of type ||text:string||
3. In the function, ||game:game.splash|| a greeting that includes firstName (if “You” is passed, it might ||game:splash|| “Hey, You!”)
4. Call the function with three different names

Concept: Multiple Parameters

Functions are not limited to a single parameter; more than one parameter can be passed, with each separated by a comma (,).

function name(parameterOne: parameterOneType, parameterTwo: parameterTwoType) {
    // function contents
}
name(valueOne, valueTwo);

Notice that when calling the function, the order the parameters are passed must match the order the parameters were defined in; in this case, parameterOne will store valueOne, and parameterTwo will store valueTwo.

Example #2: Choose for Me

1. Review the code below
2. Identify how the two parameters are being used
3. Identify what the ||math:Math.percentChance(50)|| evaluates to

function choose(choice1: string, choice2: string) {
    if (Math.percentChance(50)) {
        console.log("I think " + choice1 + " is the better choice");
    } else {
        console.log("I think " + choice2 + " is the better choice");
    }

}
choose("cats", "dogs");
choose("pizza", "tacos");
choose("Summer", "Winter");

Student Task #2: Extended Greeting

1. Start with the your solution to task #1
2. Modify the function so that it accepts two ||text:strings||: firstName and lastName
3. Make use of both parameters in the greeting (for example, ||functions:greeting("You", "Friend")|| could result in “Hey You Friend!”)

Example #3: Non String Parameters

1. Review the code below
2. Identify the types of the two parameters
3. Identify how those two parameters are used in the function

function changeByFive(value: number, add: boolean) {
    if (add) {
        value += 5;
    } else {
        value -= 5;
    }
    game.splash("" + value);
}

changeByFive(2, true);
changeByFive(15, false);

Student Task #3: Move the Sprite

1. Create a function named ||functions:horizontalMovement||
2. Add two parameters to the function: player of type ||sprites:Sprite||, and left of type ||logic:boolean||
3. ||logic:if|| left is true, move player 10 pixels to the left
4. ||logic:if|| left is false, move player 10 pixels to the right

What did we learn?

1. How do parameters allow for more flexible code?
2. Review the functions you have learned, like ||game:game.splash|| and console.log, and identify which ones have parameters.

/**
 * Set up the state of the game
 */
namespace status {
    initialize(4, 0);

    function initialize(life: number, score: number) {
        info.setLife(life);
        info.setScore(score);
    }
}

/**
 * Creates and controls the enemies in the game
 */
namespace enemy {
    createEnemy();

    function createEnemy() {
        let enemy = sprites.create(spritesheet.enemy, SpriteKind.Enemy);
        setPosition(enemy, 10);
        enemy.vy = 10;
    }

    function setPosition(sprite: Sprite, edge: number) {
        sprite.x = randint(edge, screen.width - edge);
        sprite.y = 0;
    }
}