Encountering an Infinite Loop in JavaScript
25/02/2024An Exciting Error
I was working on my podcast app and encountered an error that was more exciting than any previous error so far:
An infinite loop, but no inifinite loop is running - JavaScript is trying to expand the self-referential function as far as it can (forever) instead of just keeping the code unexpanded and running the code as needed. This created a stack overflow error! (in the app, displayPodInfo() will always run before a mouseleave can happen)
I knew this was a concept in programming languages but couldn't remember what it was called. I described it to chatGPT, which provided me with the terms 'eager evaluation' and 'lazy evaluation.' I figured this error was caused by JavaScript using eager evaluation. Then, I edited the code:
Running the code, I found out that when I updated the function after passing it, it was never updated in the event handler! This seems more like the problem is that the event handler takes a function passed by value rather than passed as a reference. I looked it up and how JavaScript handles event listeners is: once you supply the function to the event handler, it's set in stone - updating the function doesn't update it in the event listener. Good to know!