Teaching guide: Intro to JS - Functions

What the student will learn

• How to define their own custom functions, so that they can group related code together and easily call that code multiple times.
• How to define parameters for their custom functions, so that their function can draw something slightly different each time it’s called.
• How to return values from their custom functions, so that they can make functions to calculate values or generate strings.
• The important distinction between global variables and local variables.
• The difference between the custom functions that they define and the special ProcessingJS functions that they redefine, like draw().

The student will be able to write code like:

Where students struggle

• Students don’t always understand the motivation behind grouping code into reusable functions. That’s likely because they haven’t coded large programs where they’ve repeated the same blocks of code multiple times. You can tell them that many programs are thousands of lines long, so there it’s absolutely necessary to have functions for the functionality the program does over and over. You can also check out a few programs from the community and see how they use functions.
• Students are sometimes confused about the difference between custom functions and the ProcessingJS functions like rect(). On Khan Academy, we automatically include the ProcessingJS library in every program, and that library is a collection of already defined functions. That’s why every program can call those functions. Students can then define additional functions in their own programs, but they can only call them in the program where they’re defined.
• Students may struggle to understand function parameters versus variables. When they call a function and pass in parameters, those then become local variables inside their function, with the names taken from the function definition. They can trace the values using println() at various points in their code. Here's an example program tracing common mistakes.
• Students may not fully grasp what return does inside a function. For those students, after they do the Calculator challenge, encourage them to make functions that calculate other expressions, and display the results of those on the screen. Prompt them to remove the return statement or move it around to see what happens.

Additional materials: Unplugged activities

Additional materials: Discussion questions

• Ask students to think about their daily activities and what sequences of steps they repeat. If they could program themselves, what functions might they program?
• Ask students to look at a previous project, and see if they can find blocks of code that would make sense as a function. If they ever drew multiple instances of the same object in a drawing, there's likely a good case for making a function!

Additional materials: Trivia questions