If debugging is the process of removing software bugs, then programming must be the process of putting them in.
- Getting Started
- Study Tips
- Learning Objectives
- Suggested Study
- Break-Down
- Class Recordings
- study.hackyourfuture.be
- home.hackyourfuture.be
You will need NPM and nvm on your computer to study this material
Using a browser with good DevTools will make your life easier: Chromium, FireFox, Edge, Chrome
- Install or update the
study-lenses
package globally$ npm install -g study-lenses
(if you do not have it already)$ npm update -g study-lenses
(if you already have it installed)- if you're having trouble on Linux or Mac, try running
$ sudo npm ...
- Clone this repository
$ git clone git@github.com:HackYourFutureBelgium/debugging.git
cd
into the repository$ cd debugging
- Open the repository using
study
$ study
- The material will open in your default browser, you're good to go!
If you have a windows computer and get this error:
... /study.ps1 cannot be loaded because running scripts ...
follow the instructions in this StackOverflow answer, that should take care of it ; )
- Don't rush, understand! Programming is hard.
- The examples and exercises will still be there to study later.
- It's better to fail tests slowly and learn from your mistakes than to pass tests quickly and not understand why.
- Don't skip the examples! Understanding and experimenting with working code is a very effective way to learn programming.
- Practice Pair Programming: two people, one computer.
- Read the code out loud
- Take a look through the HYF Study Tips for more inspiration
If you can't finish all the material in this repository, that's expected! Anything you don't finish now will always be waiting for you to review when you need it. These 3 emoji's will help you prioritize your study time and to measure your progress:
- 🥚
:egg:
- Understanding this material is required, it covers the base skills you'll need for this module and the next. You do not need to finish all of them but should feel comfortable that you could with enough time. - 🐣
:hatching_chick:
- Do your best to start this material. you don't need to master it or finish it but getting the main idea will be helpful for taking the next steps. - 🐥
:hatched_chick:
- Have you finished all the 🥚's and started all the 🐣's? push yourself with these challenges.
There's sooo many examples and exercises in this repository, it's easy to forget of what you still need to finish or what you want to review again. Luckily VSCode is really good at searching through folders of code.
You can write hashtags in your comments while you're studying, then search for those hashtags later so you don't miss anything. Here's some ideas:
// #not-done, still a few blanks left
- search for#not-done
in VScode to find all the exercises you've started and not finished// coercion is confusing, #review this again next week
- search for#review
to find the files you need to study again- ... anything goes! Find the hashtags that work for you
What can you expect to learn in this module?
expand/collapse
- Learning from Code
- Reading & understanding source code
- Making small, incremental experiments
- Copying & modifying others' code
- Tracing Program Execution
- Stepping through code with JS Tutor, DevTools & VSC debugger
- Tracing values manually with pencil & paper
- Using the
debugger
statement & break points to explore your code
- Using
console.assert
for small inline tests- Learn to predict what will happen using
console.assert
- Instead of only describing what did happen using
console.log
- Learn to predict what will happen using
- Debugging:
- Bugs are when you don't understand what your code is doing, not when your code doesn't understand what you want it to do! The computer is always right :)
- Identify the line(s) of code that are not doing what you expect
- Find several other ways of writing that line
- Replace with the one that works and that you understand best
- Errors:
- Syntax vs. Semantic: Some errors happen because you wrote JavaScript that the interpreter couldn't interpret (syntax), other errors happen when you try to do something that isn't allowed (semantic).
- Creation vs. Execution: Some errors are thrown before the program actually becomes a process (creation phase), others are thrown during program execution when a line of code is reached (execution phase).
- Primitives Types & Strict Comparison
- types: find the type of a primitive using
typeof
- strict comparison: compare the type and value of two primitives using
===
&!==
- explicit coercion: casting between primitive types
- types: find the type of a primitive using
- Explicit Type Coercion
Boolean
,String
,Number
- Operators & Comparisons
===
,!==
isNaN
andNumber.isNaN
>
,<
,>=
,<=
&&
,||
,??
,!
x++
,++x
,x--
,--x
+
,*
,/
,-
,%
x ? y : z
- Variables:
let
&const
- Declaration, Assignment & Re-Assignment.
- Block Scope
- Functions
() => {}
:- Declaring vs. Calling
- Arguments vs. Parameters
- Return Values
- Lexical scope
- Control Flow
- Conditionals
- Loops
break
,continue
prompt
,alert
, andconfirm
- Validating user input
- Providing helpful feedback
console.log
- Printing values to understand what did happen in your code
- Always print the type AND the value
console.assert
- Asserting values to predict what will happen in your code
- Practice how to use all comparison operators to assert values in memory
- Stepping through code execution
- Using debugging tools to execute your code one step at a time
- Predict which line of code will execute next
- Explain and understand how each line of code changes what is in memory
- Predict what will change in memory after each step of execution
- The
debugger
statement - Using professional JS debugging tools
- Browser Debugger
- VSCode Debugger
- Using learning-focused debugging tools
- JS Tutor
- Source code: The
.js
text file you write. These are just instructions saved as text in your computer, not a live process (a process is an active instance of a program)! - Creation Phase: When the JavaScript interpreter first reads your instructions from the program. At this point it will load the program into memory (thus making a process) and check for some types of errors.
- Execution Phase: This is the real deal! The JavaScript interpreter will now step through your instructions one line at a time, updating the (process) memory according to your instructions.
- Document Life-Cycle
<head>
: Scripts & styles are loaded top to bottom, before the<body>
<body>
: Everything is executed/loaded top to bottom
- Event-Driven Programming (Handling user input)
- HTML
onclick
attribute - well-organized source files
- HTML
Helpful resources for this module
expand/collapse
- Errors & Debugging
- Developer Console
- Debugging in Chrome
- Debugging in FireFox
- pythontutor.com -> JS Tutor
- VSCode
- watchAndCode Programming Foundations - sign up for the free Programming Foundations course, it's awesome. You can stop when he starts explaining
this
.
- 🥚 ./strict-mode: a quick read and a couple examples. long story short: always use strict mode.
- Skills: you don't need to finish all of the exercises in these folders, just enough to get comfortable with the processes
- 🥚 ./stepping-through: Take a quick tour of the debugger and JS Tutor, two tools that will help you understand program memory and how JS follows your instructions one step at a time. Learn to use breakpoints and the
debugger
statement to pause your program on specific lines. - 🥚 ./fixing-errors: JavaScript errors! - get over the initial fear by learning to find and describe errors in your code. Then learn how to pause on errors in the debugger and to read callstack messages.
- 🥚 ./logging: Learn how to create your own trace of a program's execution using
console.log
. Practice tracing different aspects of the same program's execution. - 🐣 ./fixing-bugs: Learn a structured approach to
- 🐣 ./naming-variables: Code should be written for people first, computers second. Learn to give helpful names to your variables that describe what data they store and how they are used in your program.
- 🥚 ./stepping-through: Take a quick tour of the debugger and JS Tutor, two tools that will help you understand program memory and how JS follows your instructions one step at a time. Learn to use breakpoints and the
- Practice
- 🐣 ./isolate: Practice the foundations of JavaScript in isolation. Learn to step through and predict your program's execution using the debugger and JS Tutor. These examples and exercises have no user input.
- 🐣 ./integrate: Integrate all the skills and knowledge you've gained. You will read, debug, complete, and write full programs.
- 🐣 ./using-functions: Learn how you can use functions to organize and and reuse your code.
- JS Tutor Video
- Coding with Mosh
- 30 Days of JavaScript (stop at array methods)
- javascript.info (just the beginning)
for of
loops
- javascript.info
- Just JavaScript
- dots vs brackets (video)
- dots vs brackets (example)
for ... in
- CodeAcademy Projects JavaScript +1 (through #10)
- HackYourFuture Amsterdam: JS module, 1-JavaScript homework
- CodeYourFuture JS Core: week 1, week 2, week 3
- JavaScript for Everyone
- 30 Days of JavaScript
- dinanathsj29: Tutorial, Exercises
- deep-js-foundations
Use debuggers to step through your code one instruction at a time. Along the way you'll see how to visualize program memory, describe errors in your code, and start fixing bugs in a program.
expand/collapse
You don't need to understand this material perfectly, it's just important you aren't seeing it for the first time in class on Sunday.
- ./strict-mode (a quick read)
- ./stepping-through
- ./isolate: Variables
- so you're familiar with
const
vs.let
- so you're familiar with
Dig deeper into program execution and the debugger:
A method for finding and fixing bugs in your code
Learning to program with JavaScript is a marathon. This week you can keep working through your favorite tutorials, and be sure make time to get comfortable stepping through and predicting small programs in your debugger. Try starting with:
- 🥚 ./strict-mode: a quick read
- Skills: you're not expected to master these skills in one week, but starting to practice the them in week 1 will make everything else easier. Practicing a little bit every day is the best way to build a skill.
- Practice
- 🐣 ./isolate: through conditionals
- you're not expected to master coercion or operator precedence this week, but you should start them
- 🐣 ./integrate: through conditionals
- 🐣 ./isolate: through conditionals
Isolate goes in depth on type coercion and primitive operators. You aren't expected to master these topics in one week, it will take lots of practice for this to sink in.
Study together! Working in small groups and taking turns to predict and explain what is happening with the code is a nice way to spend a few hours. Teaching is a great way to learn.
Your class repository has a folder called /javascript
and a project board for tracking your issues & PRs. Over the next four weeks you and your classmates will start your own JS Study Guide. This is just the start! Learning JS is a never-ending story, you will keep building this study guide for the rest of your time at HYF.
- Naming Variables
- Numbers and
NaN
for
loops
expand/collapse
The main topics for this Sunday will be naming variables and writing programs. To come prepared you should study up on these JS language features:
- Type Conversions
- javascript.info
- ./isolate: explicit coercion
- Loops
- javascript.info
- Mosh
- ./isolate: for loops
- ./isolate - review
let
vs.const
- why does JavaScript have both?
- what are the conventions for using
let
andconst
?
- ./naming-variables
- ./integrate:
numbers/repeat-string
- maybe also
numbers/repeat-characters
- Skills: continue studying all the coding skills
- Practice:
- 🥚 ./isolate: through Refactoring Loops
- 🐣 ./integrate: through Numbers
Keep working your way through your favorite tutorials.
Try make at least one contribution per week to the class /javascript
study guide. It doesn't need to be anything fancy! Reviewing a PR or adding a new link is helpful.
Learn to trace function execution, and to use function in small programs.
expand/collapse
The examples and exercises in this repository all use () => {}
functions, while many resources online cover function
functions. This repository focuses on arrow functions because:
- the syntax is cleaner and less distracting to read
this
andarguments
are less distracting with arrow functions (more on those things later)- function expressions are easier to study in the debugger since they are not hoisted
Prep work:
- Functions in 90 Seconds
- javascript.info
- Coding Train:
- Examples
- ./isolate: functions, the basics
- ./isolate:
/documenting-functions
/passing-tests
- ./using-functions
/refactor-logic
Keep working your way through your favorite tutorials and the exercises in this repository. If you haven't already, take a look at:
- Skills: keep practicing all those coding skills
- Practice
- 🥚 ./isolate: through The Callstack
- 🐣 ./fixing-bugs: through Functions
- 🐣 ./using-functions: through Refactor Logic
Try make at least one contribution per week to the class /javascript
study guide. It doesn't need to be anything fancy! Reviewing a PR or adding a new link is helpful.
Reference vs. Value! This week you will learn about arrays, objects and side-effects.
expand/collapse
This week's class will focus almost entirely on how arrays/objects are stored in memory, and how to use them as arguments to functions. Take a look through the examples in these folders to be ready for class:
- ./isolate: reference vs. value, side-effects
- references
- ./isolate: reference vs. value
- ./isolate: side-effects
- 🥚 ./isolate: through Side Effects. Reference vs. Value and Side Effects are another "invisible" thing about JS, you can't see it in the source code! You need to understand how JS program memory works and to learn how debugging tools can help you see this
- 🐣 ./fixing-bugs: Arrays & Objects
- 🐣 ./integrate: Arrays
- 🐣 ./using-functions: Avoid Side-Effects
Keep working through your favorite tutorials and the exercises in this repository. It's important to come prepared for the first Sunday of Behavior, Strategy, Implementation so be sure to make time for the prep work!
Try make at least one contribution per week to the class /javascript
study guide. It doesn't need to be anything fancy! Reviewing a PR or adding a new link is helpful.
- Students: Here you can find recordings of this module from past classes. Enjoy!
- Coaches: When sending your PR's with links please ...
- Indicate which class you were teaching
- Which week it was (if the module is more than 1 week)
- Give your name
- and a helpful description
- Week 1:
- Week 2:
- Process week:
- Week 1:
- Week 2:
- Week 3:
-
Week 1:
- Stepping Through Code: part 1, part 2
- Describing Errors
-
Week 2:
- Part 1 hasn't been recorded due to a technical issue. Our apologies.
- Part 2
-
Week 3:
-
Week 4: