jrheard
commented
5 years ago btw i just want to mention that UI-based programming is really really hard, and javascript doesn't make it much easier. UI-based programs are hard to write because they involve a lot of indirection and events and callbacks - you do some stuff, then the user could click any of like a hundred buttons, so you need to wire up all of those buttons to know what they should do when they're clicked, and that code could put the program into some completely separate state with another completely different set of 100 buttons, etc.
non-UI programs are way easier, because they're almost always more like: do this thing, then that thing, then this third thing, then print the result to the screen, hooray end of program. there isn't as much indirection and hopping back and forth between callbacks and modes and stuff.
if you're feeling discouraged about this program being complicated, don't be! you're learning tons, and this experience is going to make it extremely clear why tech like react is useful. (the main purpose of react is to make it possible to write UI programs without wanting to jump off a cliff). and, in the future when you're writing non UI based programs, they're going to be way easier by comparison!
this one was tricky, took me about an hour before i found the root cause.
the problem was the calls to
writePlayListToPanel(track)instatistics.js.. the actual signature of the function wasfunction writePlayListToPanel(track, playListTracks). as you've seen, in javascript, a function can take e.g. 4 arguments but be passed only e.g. 2 arguments, and javascript doesn't mind - it just calls the function and says that the value of arguments 3 and 4 isundefined.that's a bad way for a language to behave. other languages are a lot smarter about this - nearly all of them let you distinguish between "required" and "optional" arguments, and they'll crash the program (or, in certain languages, refuse to compile it, which is better because it means that you find out about the bug before you even run the program and start clicking around on it!) if you don't pass all of the required arguments when calling a function.
but javascript doesn't crash the program, and so anyway that's where the bug was coming from.
i found this out by putting a lot of console.log calls in a lot of places, looking for situations where playListTracks was undefined instead of being a list of tracks. this led me to
initTrackListener(). i put some more console.log()s in there, which confirmed that sometimes itsplayListTracksargument was undefined. i put thedebuggerstatement in there to cause the program to halt execution when that happened; at that point, i was able to see use the debugger's "call stack" feature to see who was passing thisundefinedvalue to this function, and that's how i found the offending lines instatistics.js.i made some other changes while i was in there, i'll note them in review comments!