© Pradeeka Seneviratne  2019
Pradeeka SeneviratneBBC micro:bit Recipeshttps://doi.org/10.1007/978-1-4842-4913-0_10

10. Functions and Arrays

Pradeeka Seneviratne1 
(1)
Udumulla, Mulleriyawa, Sri Lanka
 

First, this chapter presents how to create functions and use them in your code to reduce the coding time and debugging time. It also increases the readability of code and will make your code cleaner and more concise. Then it presents how to create different type of arrays and offer some useful functions that can be applied to arrays such as finding the number of items, replacing items, inserting items, removing items, finding the index of an item, traversing through arrays, and reversing arrays.

10-1. Creating a Function

Problem

You want to convert 12 inches to centimeters and display the result on the micro:bit screen.

Solution

  • In the Toolbox click Functions. Then click on the Make a Function … button (Figure 10-1 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig1_HTML.jpg
    Figure 10-1

    The Functions toolbox

  • In the New function name window, type inchesToCentimeters as the function name. Then click on the Ok button (Figure 10-2 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig2_HTML.jpg
    Figure 10-2

    Creating a function name

  • The function block for inchesToCentimeters will add to the code area (Figure 10-3 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig3_HTML.jpg
    Figure 10-3

    A function block

  • In the Toolbox, click Variables . Then click on the Make a Variable… button.

  • In the New variable name… window, type inches as the variable name. Then click on the Ok button.

  • Repeat the above two steps to create the variable centimeters.

  • In the Toolbox, click the Variables category. Then click and drag the set variable to block over, and place it inside the function block. Then choose the variable centimeters from the drop-down list (Figure 10-4 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig4_HTML.jpg
    Figure 10-4.

    Building the function

  • In the Toolbox, click on the Math category. Then click and drag the division block over, and place it inside the placeholder of the set centimeters to block (Figure 10-5 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig5_HTML.jpg
    Figure 10-5.

    Placing the division block

  • In the Toolbox, click on the Variables category. Then click and drag the inches variable block over, and place it inside the left-side value box of the division block (Figure 10-6 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig6_HTML.jpg
    Figure 10-6.

    Placing the inches variable

  • Type 0.3937 in the right-side value box of the division block (Figure 10-7 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig7_HTML.jpg
    Figure 10-7.

    Building the function

  • In the Toolbox, click on the Basic category. Then click and drag the show number block over, and place it inside the function block just below the set centimeters to block (Figure 10-8 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig8_HTML.jpg
    Figure 10-8.

    Building the function

  • Click on the Variables category. Then click and drag the centimeters variable block over, and place it inside the value box of the show number block (Figure 10-9 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig9_HTML.jpg
    Figure 10-9.

    Building the function

  • In the Toolbox, click on the Variables category. Next, click and drag the set variable to block over, and place it inside the on start block. After that, choose the variable inches from the drop-down list. Then type 12 in the value box (Figure 10-10 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig10_HTML.jpg
    Figure 10-10.

    Assigning a number to the inches variable

  • In the Toolbox, click on the Functions category. Next, click and drag the call function block over, and place it inside the on start block underneath the set inches to block. Then select inchesToCentimeters from the drop-down list (Figure 10-11 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig11_HTML.jpg
    Figure 10-11.

    Calling the function

  • Once completed, your code should look something like this (Figure 10-12 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig12_HTML.jpg
    Figure 10-12.

    Full code listing

How It Works

Functions are a fundamental building block of your code. They allow you to create blocks of code that can be reused anywhere in the code.

Functions can accept data to process. These are known as parameters. The function that is used in the above solution under Recipe 10-1, inchesToCentimeters() takes one parameter, inches, which the function then uses to work out the value in centimeters. Some functions don’t require parameters; an example of such would be a function that has been created to display a greeting on the screen.

In the above solution under Recipe 10-1, the function inchesToCentimeters contains the code to calculate inches into centimeters by dividing the inches by 0.3937. The calculated result is stored in the variable centimeters.

Before you call a function, first pass arguments for each parameter. In the above solution under Recipe 10-1, the argument 12 is passed to the parameter inches inside the on start block. Then you can call the function.

Figure 10-13 show how to reuse a function to calculate the area of some rectangles and squares in a code. First write a function (e.g., calculateArea) to calculate the area and store the calculated area in a variable (e.g., area). Then you can reuse the function by first assigning values to the parameters (e.g., x and y). Then call the function to execute the hidden code inside. The function will store the calculated area in a variable (e.g., area). Now you can print the calculated value stored in the variable using the show number block. The same function can be called to calculate the area of other rectangles and squares by following the same procedure.
../images/474604_1_En_10_Chapter/474604_1_En_10_Fig13_HTML.jpg
Figure 10-13.

Calculating the area of rectangles and squares using the same function

10-2. Finding the Number of Items in an Array

Problem

You want to find the number of items in a number array and display the result on the micro:bit LED screen.

Solution

  • In the Toolbox, click on the Arrays category. Then click and drag the set list to block over, and place it inside the on start block. By default, the set list to block holds a number array (array of block) with two items. When you drop the set list to block onto the code area, the variable, named list will create automatically.

  • Add five items to the array of block; 2, 4, 6, 8, and 10. First replace the default values of two number boxes with 2 and 4, respectively. After that, use the plus icon to add three more number boxes. Then type the remaining numbers, 6, 8, and 10, respectively (Figure 10-14 ).

The Array category can be found in the Toolbox by expanding the Advanced group.
../images/474604_1_En_10_Chapter/474604_1_En_10_Fig14_HTML.jpg
Figure 10-14.

Assigning an array to a variable

  • Click on the Basic category. Then click and drag the show number block over, and place it inside the on start block just below the set list to block.

  • Click on the Arrays category again. Then click and drag the length of array block over, and place it inside the placeholder of the show number block (Figure 10-15 ). In the length of array block, choose list as the variable that holds the number array.
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig15_HTML.jpg
    Figure 10-15.

    Placing the length of array block

  • Once completed, your code should look something like this (Figure 10-16 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig16_HTML.jpg
    Figure 10-16.

    Full code listing

How It Works

The length of array block can be used to find the number of items in an array. It can be used with the number arrays as well as the string arrays.

An array can have zero items known as an ‘empty array’.

In the above solution under Recipe 10-2, the number array is assigned to the variable named list. Then the length of array block is used to find the number of items in the array. Finally, the show number block is used to display the result on the LED screen. The show string block should also work.
Output: 5

10-3. Finding an Item at Specified Location in an Array

Problem

You want to find the item at index (position) 3 in a number array.

Solution

  • Use the number array named list that you created in Recipe 10-2 (Figure 10-17 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig17_HTML.jpg
    Figure 10-17.

    Assigning a number array to a variable

  • In the Toolbox, click on the Basic category. Then click and drag the show number block over, and place it inside the on start block just below the set list to block.

  • In the Toolbox, click on the Arrays category. Next, click and drag the get value at block over, and place it inside the placeholder of the show number block (Figure 10-18 ). After that, make sure to choose the variable list from the drop-down menu. Then type 3 in the number box for the position of the item.
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig18_HTML.jpg
    Figure 10-18.

    Placing the get value at block

  • Once completed, your code should look like this (Figure 10-19 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig19_HTML.jpg
    Figure 10-19.

    Full code listing

How It Works

The get value at block can be used to find any value at a specified index (position) in an array. The index starts from 0. The first item of an array has the index 0, the second item has the index 1, and so on. Likewise, the last item of an array has the index (number of items −1).

In the above solution under Recipe 10-3, the variable named list holds a number array that has five items. Then, the get value at block is used to find the item at index (position) 3, which is 8. Finally, the show number block is used to display the output on the LED screen.

When you run the code, you will get the following output.
8

The same thing can be applied to find an item in a string array. Just place the get value at block in the placeholder of the show string block.

10-4. Replacing an Item in an Array

Problem

You want to replace the item at index 2 with the letter ‘d’ in a string array. Then display the new item on the micro:bit LED screen.

Solution

  • Click on the Arrays category. Then click and drag the set text list to block over, and place it inside the on start block. By default, the set text list to block has a string array with three items. When you add the set text list to block onto the editor, a variable named text list will create automatically.

  • Click on the Arrays category again. Next, click and drag the set value at block over, and place it inside the on start block just below the set text list to block. After that, make sure to choose the variable text list from the drop-down menu. Then type 2 in the value box.

  • Click on the Text category. Next, click and drag the text box block over, and place it inside the second placeholder of the set value at block. Then type the letter d in the text box (Figure 10-20 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig20_HTML.jpg
    Figure 10-20.

    Replacing an item in an array

  • Click on the Basic category. Then click and drag the show string block over, and place it inside the on start block.

  • Click on the Arrays category. Next, click and drag the get value at block over, and place it inside the placeholder of the show string block. Then type 2 in the value box (Figure 10-21 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig21_HTML.jpg
    Figure 10-21.

    Replacing an item in an array followed by verifying

How It Works

The set value at block can be used to replace a value in an array at a specified index. In the above solution under Recipe 10-4, initially the index 2 holds the letter c. Next, the set value at block is used to replace the letter c with the letter d. After that, the get value at block is used to get the updated value at index 2. Then the show string block is used to display the returned value from the get value at block on the micro:bit LED screen.

When you run the code, you will get the following output.
d

10-5. Inserting an Item to the End of an Array

Problem

You want to insert an item to the end of a string array.

Solution

  • In the Toolbox, click on the Arrays category. Then click and drag the set text list to block over, and place it inside the on start block. By default, the set text list to block has a string array with three items.

  • Click on the Arrays category again. Then click and drag the add value to end block over, and place it inside the on start block just below the set list to block. Make sure to choose the variable text list from the drop-down menu.

  • In the Toolbox, click on the Text category. Then click and drag the text box block over, and place it inside the placeholder of the set value to end block. Now type the letter d in the text box for the new item (Figure 10-22 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig22_HTML.jpg
    Figure 10-22.

    Inserting an item to the end of an array

  • In the Toolbox, click on the Basic category. Then click and drag the show string block over, and place it inside the on start block just below the add value to end block.

  • In the Toolbox, click on the Arrays category. Now, click and drag the get value at block over, and place it inside the placeholder of the show string block. After that, choose the variable text list from the drop-down menu. Then type 3 in the value box.

  • Once completed, your code should look like the following (Figure 10-23 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig23_HTML.jpg
    Figure 10-23.

    Inserting an item to the end of an array followed by verifying

How It Works

The add value to end block allows you to add a new item to the end of an array. In the above solution under Recipe 10-5, initially, the string array had three items. Next, the string ‘d’ is added to the end of the string array using the add value to end block. After added, the resulting array has four items. Finally, the last item is displayed by combining the show string and get value at block.

When you run the code, you will get the following output.
d

In the same way, you can insert an item at beginning of an array using the insert at beginning block.

10-6. Removing Last Item from an Array

Problem

You want to get and remove the last item of a string array. Then display the removed item, followed by a new last item, followed by the number of items on the micro:bit display.

Solution

  • In the Toolbox, click on the Arrays category. Then click and drag the set text list to block over, and place it inside the on start block. By default, the set text list to block has a string array with three items. When you add the set text list to block onto the code area, a variable named text list will create automatically.

  • In the Toolbox, click on the Basic category. Then click and drag the show string block over, and place it inside the on start block just below the set text list to block.

  • In the Toolbox, click on the Arrays category. Then click and drag the get and remove last value from block over, and place it inside the placeholder of the show string block. Choose the variable text list from the drop-down menu (Figure 10-24 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig24_HTML.jpg
    Figure 10-24.

    Removing an item from an array

  • Click on the Basic category. Then click and drag the show string block over, and place it inside the on start block just below the get and remove last value from block.

  • Click on the Arrays category. Then click and drag the get value at block over, and place it inside the placeholder of the show string block. Then type 1 in the value box.

  • In the Toolbox, click on the Basic category. Then click and drag the show number block over, and place it inside the on start block just below the show string block.

  • In the Toolbox, click on the Arrays category. Then click and drag the length of array block over, and place it inside the placeholder of the show number block. Choose the variable text list from the drop-down menu.

  • Once completed, your code should look like the following (Figure 10-25 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig25_HTML.jpg
    Figure 10-25.

    Full code listing

How It Works

The get and remove last value from block allows you to find the last item in an array and remove it from the list.

In the above solution under Recipe 10-6, initially, the string array had three items (a, b, c). First, the get and remove last value from block is used to get and remove the last item of the string array, which is the letter ‘c’ at index 2. Then the removed item is displayed using the show string block. Once removed, the (new) last item is found using the get value at block and displayed using the show string block, which is the letter ‘b’ at index 1. Next, we verified the number of items using the length of array block. When you run the code, you will get the following output.
c b 2

In the same way, you can use the get and remove first value from block to remove the first item from an array.

10-7. Finding the Index of an Item in an Array

Problem

You want to find the index of an item in an array.

Solution

  • In the Toolbox, click on the Arrays category. Next, click and drag the set text list to block over, and place it inside the on start block. By default, the set text list to block has a string array with three items (a, b, c). Then click on the plus button to add two more text boxes and type a and b, respectively, in that text boxes. Now you should have a string array with five items.

  • In the Toolbox, click on the Basic category. Then click and drag the show number block over, and place it inside the on start block just below the set text list to block.

  • Click on the Arrays category. Click and drag the find index of block over, and place it inside the placeholder of the show number block.

  • Click on the Text category. Then click and drag the text box block over, and place it inside the placeholder of the find index of block. Now type the letter ‘b’ in the text box.

  • Once completed, your code should look like the following (Figure 10-26 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig26_HTML.jpg
    Figure 10-26.

    Finding the index of an item in an array

How It Works

The find index of block allows you to find the index of an item in an array. Remember, it can only be used to find the first occurrence from the start of an array for the given item.

In above solution under Recipe 10-9, the find index of block captured the index of the first occurrence of the letter b, which is 1. The show number block is used to display the output on the LED screen. When you run the code, you will get the following output.
1

If you try to find an element that is not existing in the array, micro:bit shows −1 as the output.

10-8. Inserting an Item to an Array

Problem

You want to insert the letter z at index 1 of a string array with three items, a, b, and c. Then display the recently inserted item and number of items in the updated array.

Solution

  • In the Toolbox, click on the Arrays category. Then click and drag the set text list to block over, and place it inside the on start block. By default, the set text list to block has a string array with three items (a, b, c).

  • Click on the Arrays category again. Next, click and drag the insert at value block over, and place it inside the on start block just below the set text list to block. After that, the variable text list from the drop-down menu. Then type index 1 in the value box.

  • Click on the Text category. Then click and drag the text box block over, and place it inside the second placeholder of the insert at value block. Then type the letter z in the text box (Figure 10-27 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig27_HTML.jpg
    Figure 10-27.

    Inserting an item to an array

  • Click on the Basic category. Then click and drag the show string block over, and place it inside the on start block just below the insert at value block.

  • Click on the Arrays category. Next, click and drag the get value at block, and place it inside the placeholder of the show string block. After that, choose the variable text list from the drop-down menu. Then type index 1 in the value box (Figure 10-28 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig28_HTML.jpg
    Figure 10-28.

    Inserting an item to an array followed by verifying

  • Click on the Basic category. Then click and drag the show number block over, and place it inside the on start block just below the show string block.

  • In the Toolbox, click on the Arrays category. Then click and drag the length of array block over, and place it inside the placeholder of the show number block. Choose the variable text list from the drop-down menu.

  • Once completed, your code should look like the following (Figure 10-29 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig29_HTML.jpg
    Figure 10-29.

    Full code listing

How It Works

The insert at value block allows you to insert an item to an array at the specified index (position). You can use it with any number array or string array.

In the above solution under Recipe 10-8, initially the string array had three items, a, b, and c. Then the insert at value block is used to insert item z at index 1. When you run the code, you will get the following output.
z 4

10-9. Displaying All the Items of an Array

Problem

You want to display all the items in an array on the micro:bit LED screen.

Solution

  • In the Toolbox, click on the Arrays category. Then click and drag the set text list to block over, and place it inside the on start block. By default, the set text list to block has a string array with three items (a, b, c). When you add the set text list to block onto the code area, a variable named text list will create automatically.

  • Click on the Loops category. Next click and drag the for element block over, and place it inside the on start block just below the set text list to block. Then choose the variable text list from the drop-down menu.

  • Click on the Basic category. Then click and drag the show string block over, and place it inside the for element block.

  • Click on the Variables category. Then click and drag the value block over, and place it inside the placeholder of the show string block.

  • Once completed, your code should look like the following (Figure 10-30 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig30_HTML.jpg
    Figure 10-30.

    Full code listing

How It Works

Initially the array had three elements in the following sequence: a, b, c. Then the for element block is used to traverse through each item and display on the micro:bit LED screen using the show string block.

When you run the solution provided under Recipe 10-9, you will get the following output.
a b c

10-10. Reversing the Items of an Array

Problem

You want to reverse the items in an array and display them.

Solution

  • In the Toolbox, click on the Arrays category. Then click and drag the set text list to block over, and place it inside the on start block. By default, the set text list to block has a string array with three items (a, b, c). When you add the set text list to block onto the code area, a variable named text list will create automatically.

  • In the Toolbox, click on the Arrays category again. Next, click and drag the reverse block over, and place it inside the on start block just below the set text list to block. Then choose the variable text list from the drop-down menu.

  • Click on the Loops category. Next, click and drag the for element block over, and place it inside the on start block just below the reverse block. Then choose the variable text list from the drop-down menu.

  • Click on the Basic category. Then click and drag the show string block over, and place it inside the for element block.

  • Click on the Variables category. Then click and drag the value block over, and place it inside the placeholder of the show string block.

  • Once completed, your code should look like the following (Figure 10-31 ).
    ../images/474604_1_En_10_Chapter/474604_1_En_10_Fig31_HTML.jpg
    Figure 10-31.

    Full code listing

How It Works

The reverse block allows you to reverse an array. Once applied, the first item of the array becomes the last, and the last item of the array becomes the first.

In the above solution under Recipe 10-10, initially the array had three elements in the following sequence: a, b, c. After applying the reverse block, the for element block is used to traverse through each element and display on the micro:bit LED screen using the show string block.

When you run the solution under Recipe 10-10, you will get the following output.
c b a
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.172.115