JavaScript active learnings - How to verify lines of code are working?

MDN Learn
#1

Hello MDN,

Working through the JavaScript active learnings (on Arrays - “Printing those products”, currently) and I’m struggling with how to verify that each line of code is accomplishing its objective. I feel like I’m typing code in blind and I’ll only figure out if it all works once I get through the full exercise.

What’s the best way to verify each line is sound before moving along? I’ve moved everything to CodePen and added <div class="output"><ul></ul><p></p></div> to HTML, but still not really sure how to check individual lines of code as I progress. I’ve tried console.log(variableGoesHere); in both the iframes and dev consoles, but I seem to be missing something.

The JS struggle is real. Thanks for the help!

1 Like
#2

Hi @timandes,

What do you mean? Don’t you trust my examples?

Only joking :wink: This is a really good question, and a great attitude to have. It is pretty difficult to check each individual line in an elegant way using just your code. In real world apps, developers tend to have a suite of unit tests, created using a JS testing library, which tests each part of your application to make sure that all the major things the app is supposed to do are happening correctly. Jest is pretty popular at the moment: https://jestjs.io/

For smaller examples like these, that is a bit overkill.

I often tend to just use the console.log method for simple testing, as do many devs. Or you could get more sophisticated, and use your browser’s JS debugging tools. In Firefox for example, we have the JS Debugger — https://developer.mozilla.org/en-US/docs/Tools/Debugger — which allows you to step through your code, checking the values of each variable at any point in the process. It sounds to me like it might be worth you investing a bit of time looking into such tools.

2 Likes
#3

Ha! You know, there have been a few times where I was like “wait is this example bugged?”, and then they weren’t. You’re on point!!

Thanks a bunch for the referral to jests and reinforcing my use of console.log(); and browser debugging. I was re-doing the forEach() assessment since it kicked my butt and was able to test my code and debug a misplaced parentheses to get it working.

#4

Cool, I’m glad you are getting some success with that. Unless you are working on some kind of large application with loads of different components, data streams, etc., then the simplest solution is usually the best. And in general, browser error messages are a lot better than they used to be.

2 Likes