If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Teaching guide: Intro to JS - Functions

This is a teaching guide for the Intro to JS lesson on 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

An "unplugged" activity is one that you can do with students without needing to use a computer at all. They can help convey concepts in a more visceral way, and they can also be a backup activity for when computers fail.
Code.org offers a Functional Suncatchers activity (see lesson plan, overview video & in-class example video). This activity is probably better for younger students, older students may find it too slow.

Additional materials: Discussion questions

These are questions that you can ask students individually after they've done the lesson, or lead a group discussion around, if everyone's gotten to the same point.
  • 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

These can be fun to do as a class after everyone’s gotten through the lesson. They can also lead to discussion about which questions are the hardest. Play them on Quizizz.

Want to join the conversation?

  • leaf orange style avatar for user Larry Serflaten
    This is one of the most important lessons of the entire course, and also one of the more difficult to learn. It would have been nice to have multiple challenges for this lesson as many students do not readily incorporate this lesson into code for later challenges.
    (5 votes)
    Default Khan Academy avatar avatar for user