Pointing to the Same Box
by Anonymous · ⭐ 1 · 🍴 0
🔗 “I fixed one side—why did the other change too?” Explore a programmer’s most common trap hands-on. 🔢 Numbers and text keep their own «share» under each name, so copying moves the value and they don’t stay connected. That means you can’t make “changing a changes b too” with numbers. 📦 Names, on the other hand, only «point» to boxes, so if two names point to one box, changing either name changes the same box—we show it clearly with two arrows joining one box. 🧪 Finally, try three ways to copy things: «pointing» changes both the outside and inside, «copying only the outside» separates the shells but still shares the inner box (the shallow-copy trap), and only «copying everything» separates them completely. You’ll also see that there’s no method where the outside follows changes while the inside stays the same.
About this app
Pointing at the Same Box is an interactive coding lesson about JavaScript values, references, and copying objects. Experiment with numbers and text to see how copied values become independent, then connect two labels to one box to observe shared changes. A final simulator compares reference assignment, shallow copying, and deep copying, showing how outer and inner data remain shared or become separate.
Use cases
- Beginners learning JavaScript references and object copying
- Teachers demonstrating value versus reference behavior
- Students exploring shallow-copy pitfalls
- Developers reviewing object mutation concepts
Features
- Interactive number and text copying with separate value changes
- Visual demonstration of two labels pointing to one box
- Controls for sharing a box or creating a new box
- Three-way comparison of pointing, shallow copying, and deep copying
- Outer and inner mutation checks with color and pattern changes
- Step-by-step goals, feedback, reset, and next controls