instagram
Lessons

    Standards in this Lesson

    CSTA Standards
    1B-AP-11

    Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.

    1B-AP-12

    Modify, remix, or incorporate portions of an existing program into one’s own work, to develop something new or add more advanced features.

    1B-AP-15

    Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.

    2-AP-13

    Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs

    2-AP-14

    Create procedures with parameters to organize code and make it easier to reuse.

    3A-AP-17

    Decompose problems into smaller components through systematic analysis, using constructs such as procedures, modules, and/or objects.

    3B-AP-15

    Analyze a large-scale computational problem and identify generalizable patterns that can be applied to a solution

    K-12CS Standards
    6-8.Algorithms and Programming.Control

    Programmers select and combine control structures, such as loops, event handlers, and conditionals, to create more complex program behavior.

    6-8.Algorithms and Programming.Modularity

    Programs use procedures to organize code, hide implementation details, and make code easier to reuse. Procedures can be repurposed in new programs. Defining parameters for procedures can generalize behavior and increase reusability.

    6-8.Algorithms and Programming.Variables

    Programmers create variables to store data values of selected types. A meaningful identifier is assigned to each variable to access and perform operations on the value by name. Variables enable the flexibility to represent different situations, process different sets of data, and produce varying outputs.

    Massachusetts Standards
    MA.6-8.CT.a.2

    Define a simple function that represents a more complex task/problem and can be reused to solve similar tasks/problems.

    MA.6-8.CT.b.2

    Use logical reasoning to predict outputs given varying inputs.

    MA.6-8.CT.d.2

    Use functions to hide the detail in a program.

    MA.6-8.CT.d.5

    Trace programs step-by-step in order to predict their behavior.

    MA.9-12.CT.b.2

    Represent algorithms using structured language, such as pseudocode.

    Practices in this Lesson

    K12CS
    P3

    Recognizing and Defining Computational Problems

    P4

    Developing and Using Abstractions

    This lesson focuses on code quality. Starting from a working program, students refactor the code to be more readable, writing helper functions thinking structurally about a complex program.

    Product Outcomes

    • Students refactor existing code to make an emoji image

    Materials

    Preparation
    Glossary
    refactor

    the process of changing the style or structure of a program’s code, without changing the program’s behavior

    🔗Refactoring - a Case Study 40 minutes

    Overview

    Student are introduced to the programming concept of refactoring, which closely models the Mathematical Practice 7: Identify and make use of structure. Students create an emoji generator, and then refactor it to make the code cleaner.

    Launch

    One of the most common tasks software developers find themselves performing is refactoring code. This means taking code that is already working and complete, and cleaning it up: adding comments, removing unnecessary expressions, and generally making their code more readable and useable by others. Refactoring does not change the behavior of the program, only the appearance of the code. For instance, a messy expression like:

    (((4 * 4) + (3 / (8 - 6))) * (9 * 9)) * (1 + 1)

    could be refactored into:

    ((num-sqr(4) + (3 / 2)) * num-sqr(9)) * 2

    Both expressions return the same value, but the second is much more readable. Refactoring can involve using existing functions (such as num-sqr in the example above) or writing new functions to perform small tasks.

    Open the Robot Emoji file and click "Run". In this file, there are two versions of the same program written by different students.

    Take a look at the definitions in this file, and, with your partner, discuss what you notice. Which student’s code is easiest to read and understand? Which formatting do you like better? If you were collaborating on a project with another programmer, which version of this code would you rather to receive, and why?

    Discuss with students the differences in documentation, formatting, and organization of the two versions of the emoji code.

    Next, we’re going to practice refactoring an existing program that draws an image.

    Investigate

    Open the Emoji Refactoring file and click "Run".

    This code draws an image of a simple face emoji. Without changing the final image produced, can you see any opportunities to edit the code to make it more readable?

    Refactor the code provided. This could include adding comments, more space betwen expressions, or simplifying the existing expressions. Once finished, write one more expression to create a smaller (emoji-sized) version of the original image.

    This activity can be done individually or as a class, with students giving suggestions for refactoring code projected at the front of the room. Once the refactoring is completed, students can practice using image functions to create an emoji of their own.

    These materials were developed partly through support of the National Science Foundation, (awards 1042210, 1535276, 1648684, and 1738598). CCbadge Bootstrap by the Bootstrap Community is licensed under a Creative Commons 4.0 Unported License. This license does not grant permission to run training or professional development. Offering training or professional development with materials substantially derived from Bootstrap must be approved in writing by a Bootstrap Director. Permissions beyond the scope of this license, such as to run training, may be available by contacting contact@BootstrapWorld.org.