Lesson 9: JavaScript runtime foundations: Architecture checkpoint

Concept Explanation

"JavaScript runtime foundations: Architecture checkpoint" is a pause to look at structure, not just output. You already know how to make code run. Here, the question is how to arrange it so each piece has a clear job. This lesson uses a tiny module example to show how formatting logic can live in one place and be reused elsewhere. You will practice separating concerns, naming boundaries clearly, and checking that one file does not need to know too much about another. The goal is to help you see architecture as small decisions about responsibility, not something reserved for huge apps.

Where to Put the Code

1. Start with variables and inputs. Use browser or Node.js syntax clearly.
2. Add processing logic in the middle section.
3. Finish with output and quick validation.

Command Reference

• Identify which part of the example is responsible for formatting and which part is responsible for presentation.
• Move any mixed responsibility into the most appropriate function or module.
• Explain why reusing a formatter from another file is cleaner than rebuilding the same logic inline.
• Test the module with a second value so you can confirm the boundary is actually reusable.

Step-by-step Guide

1. Run the example and confirm that both prices use the same formatting rule.
2. Label the code by responsibility: imported helper, local display logic, and final output.
3. Change one detail in the display layer without touching the formatting helper.
4. Then change one formatting rule and observe how both outputs benefit from the shared module.
5. Finish by summarizing what each file or function is responsible for and why that split is useful.

Practice Exercises

• Create a second helper module for a related task, such as formatting percentages or dates, and keep the main file clean.
• Refactor an inline formatting example so the reusable rule lives in a separate module.
• Add one more printed value and keep the structure easy to scan.

Coding Challenges

• Take a short script that mixes formatting, data handling, and output, and split it into cleaner pieces.
• Design a tiny module setup where one helper can be reused in at least two different display functions.

Mini Practice Tasks

• Rename one function to match its responsibility more clearly.
• Add one more example call.
• Write one sentence explaining why this structure is easier to grow.