Please enable JavaScript to use CodeHS

CodeHS Glossary

Top Down Design JavaScript

Top down design is the act of [breaking down][1] a large problem into smaller, easier problems to solve. When writing a program that has a lot of parts, it's good practice to use top down design to break the program into many smaller parts that are easier to solve. It can be god to think about top down design using real world examples. One example you can use is making a movie. Making a movie is a very large problem, but we can break it into problems that are smaller and make it easier to handle. For example, breaking it into parts like: 1. Write the script 2. Film 3. Edit makes it easier to complete, since you can focus your attention on each of those parts separately and solve one smaller problem before moving on. ---------- In Karel, a good example is if you need to write a program where Karel will lay two rows of tennis balls -- one on the bottom row, one on the top row. This is a multi-part problem, so it's easier to solve using top down design. Using that technique, we should try to make functions that do parts of the program that are easier to solve. Let's break down the whole program into. 1. `layRow` 2. `moveToTop` 3. `layRow` As you can see, we now only have 2 smaller problems that we have to solve. It will be easier to approach the `layRow` function and the `moveToTop` function separately and then put them together to make the whole program than to just start coding. Using top down design encourages you to think before you start aimlessly writing code, so you solve problems in better ways. [1]: