home

Learning from Code

Reading and exploring existing code is on of the best ways to learn programming (!). Sure, it’s important to write a lot of code, get stuck, fix your problems, and build cool things. But how can you expect to write great code if you’ve never seen any before?!

Learning to read, explain, and modify existing code is a crucial skill to learn early in your programming life. Besides being an effective learning strategy, this is also what you’ll spend most of your time doing as a programmer.

Don’t rush, understand

Programming is hard. It’s better to study slowly and learn from your mistakes than to code quickly and not understand what you wrote.

Read the code out loud

Learning to read your code aloud and to pronounce the strange syntax in JavaScript is super important! Practice alone, practice with a friend, record yourself and play it back. When you watch video tutorials pay close attention and practice repeating how the teacher pronounces their code.

• Is new vocabulary you don’t understand?
• What JS syntax do you recognize?
• What syntax is new to you?
• How should you pronounce the code?

Some links:

• Why this is so important
• ASCII Pronunciation Rules for Programmers
• JavaScript Glossary
• Coding Without Comments

PRIMM

Writing code from an empty file is actually not the best way to learn programming. Writing programs is your end goal, but it’s not the best way to get there.

Think of programming like learning a new language, if you’re learning Dutch you don’t start by writing articles for a newspaper! First you’ll start by learning some grammar and vocabulary, reading small texts, and practicing simple conversations.

You should use the same approach when learning to program. Each time you’re learning a new language feature or programming technique, taking some take some time to study code that someone else has written using the new concepts.

PRIMM is a good strategy for getting the most out of every example you study:

1. Predict: Read the code and predict what you think it will do.
   • Will there be an error? What kind of error? On which line?
   • What values will be in memory at the beginning of the script? At the middle? At the end?
   • Which line of code will execute first? second? third? … last?
   • Which test cases will pass, and which will fail? Why?
2. Run: Run the code and figure out if your predictions were right.
3. Investigate: How does the code work in detail? Investigate every language, every line, and the connections between different parts of the program.
   • Trace the code line-by-line using your favorite study tools.
   • Was there an error? What kind of error? Why?
   • Which test cases passed, and which failed? Why?
   • What values were logged to the console? Why those values?
   • What can you learn about program memory from the output?
   • What can you learn about the order of execution from the program output?
4. Modify: Now you understand how the code works, try modifying it to some something a little different.
5. Make: Open a new empty file and make your own program using what you learned in steps 1-4.

Visualize Program Memory

Programs are all about data. Understanding how the programming language stores and uses the data is key to becoming a confident programming.

Studying programs line by line in a visualization tool such as JS Tutor, the debugger or Learn With Trace will help you build the foundations you need to write and debug your own programs.

If you can ask and answer these questions for every step in your program’s execution then you are good to go! Studying this way will take more time and may feel slow, but in the long run it’s the fastest way to learn JS.

1. Which line executed before the current one? What did that line do?
2. What does the current line of code change in program memory?
3. Which line of code will execute next? What will that line do?

This site is open source. Improve this page.