Welcome! Today we will explore how to use a software design process to create nested loops in JavaScript to solve real-world problems.
Before writing code, developers use a software design process. We start by identifying the main goal, breaking it down into subproblems, and planning our loops.
A nested loop is simply a loop inside another loop. The outer loop runs once, and then the inner loop runs completely before the outer loop moves to its next turn.
We can use nested loops to solve real-world grid problems, like building a seating map for a theater with rows and seats.
✏️ Worked example
Use the software design process to create a text-based JavaScript program that prints a 3x3 grid of stars (*) for a game map.
1. Analyze the problem: We need to print 3 rows, and each row must contain 3 stars.
2. Define the subproblems: Subproblem A is to create a single row of 3 stars. Subproblem B is to repeat this row-creation process 3 times.
3. Design the outer loop: We write a loop that runs 3 times to represent our 3 vertical rows.
4. Design the inner loop: Inside the outer loop, we write an inner loop that runs 3 times to build the horizontal stars for that row.
5. Combine and write the code: Use 'for' loops in JavaScript and print the final grid using console.log().
Want the full interactive lesson — quiz, animations, and Finn cheering them on?
Studyfin
✨ Sign up free
