Best way to deeply understand some new JS code I see in community solutions?

Programming JavaScript
1

It has been about 2 months since I have started using Exercism almost on a daily basis and I love the variety of solutions I get in the community solutions. Each time I see a different solution, I want to take it apart to really understand it deeply. So, what I use is the JS REPL Extension inside VSCode…

Here is a screenshot from the experiment I was doing today as a prep for solving the Transpose exercise which involves a 2D matrix

Since I have not used 2D arrray in JS, I wanted to understand it deeply…

Each time I put a variable alone on a line, the extension prints its contents in green to the right (pretty similar to QuokkaJS which I felt was quite restrictive in its free version).

image

Here is another thing I have tried - here I wanted to understand the output of each part of the chained statement - appending a line with //= shows the output of that line

image
image696×191 27.5 KB

My question to the experienced JS programmers in this forum - is this the best way to experiment and understand in the JS world? Do you have any other tools/practices that you do to take apart a concept and understand it? JS is a language full of surprises, so setting up little experiments to really take apart how things work along with MDN docs has proved to be beneficial and enjoyable for me.

A special shout out to @filbo, who is mentoring 2 of my JS exercises and impressed me with the depth of his understanding - i would be grateful if you can post your process along with the comprehensive example you have created to test for the presence of a non-numeric value in a number string as part of

1 Like
2

Hi Siraj – I would not put myself forward as any sort of JavaScript guru or expert! I’ve really only worked on one project using it, and have been feeling my way along, learning the language on the fly.

My process is very similar to yours, except I don’t try to use fancy integrated tools. I’m satisfied to copy-paste into a nodejs command line, or edit a ‘foo.js’ and then run js foo.js. (js / node / nodejs all invoke Node.js on my system.)

If I want a broader view of something I suspect might vary across implementations, I will also paste code into the browser consoles of a Chrome-family browser (Ctrl+Shift+J) and of Firefox (Ctrl+Shift+K).

As to the ‘comprehensive example’ – this was a bit of ad hoc code to test different approaches to part of the ‘Largest Series Product’ exercise. Siraj’s original code used:

  if (isNaN(numberString)) throw new Error('Digits input must only contain digits');

I objected that this would allow ‘123.456’, then the rest of the code would fail. So, how to detect a pure string of digits? Here, embedded in a little test harness, are 6 methods I came up with:

[ '1234', '12.34', Infinity, ].forEach( val =>
   ([
     ((val) => isNaN(val)),
     ((val) => /[^0-9]/.test(val)),
     ((val) => /[^\d]/.test(val)),
     ((val) => /\D/.test(val)),
     ((val) => [...val.toString()].some(char => char < '0' || char > '9')),
     ((val) => [...val.toString()].some(char => isNaN(char))),
   ].forEach( func => console.log(func(val).toString().padEnd(6),`${func.toString()}(${val})`)),
   console.log('.'))
);

Each of the tested functions is supposed to answer the question ‘Does val violate the input constraints’, i.e. does it contain non-digits’. Running the test shows that all of the functions return false for ‘1234’ (does not violate constraints). The first one misfires on ‘12.34’; all the others pass.

While testing I whimsically threw in the JS native value Infinity, and the last two functions failed (as well as the first one, which I expected). That is, all three said Infinity was OK, passed the constraints. That’s why I ended up adding .toString() to the last two functions; now they pass. It is interesting to note that the RegExp versions passed because /exp/.test(Infinity) automatically converted the value to its string counterpart; while [...Infinity] fails with an error that ‘Infinity is not iterable’ (which seemed sensible to me :)

There was no need for my test to test Infinity since the test code doesn’t send that. And there are other things it could send (but doesn’t) that would blow up any of these. So my fiddling isn’t even a comprehensive answer to ‘protect this thing’s input processing’. Just ‘does it contain non-digits, and I already believe I’m being sent a string or close-enough equivalent’.

3

I wasn’t sure if you meant this was an automatic feature of the REPL plugin you’re using – add a syntactically meaningful comment to inform it you want to see things in the middle of call chains. Or if you meant that you had manually assembled such displays and were tagging them in a particular way that we should watch for.

If it’s a software feature … nah, still not enough to get me to use an IDE :) Cool, though…

4

Hi Bela,
These conventions are part of the tool - not mine :slight_smile:

Here is the plugin I use

And here is a 46-second video about its usage.

I used to use NodeJS REPL like you, but once I saw QuokkaJS, I was hooked. But Quokka put too many restrictions to make buy Pro. Then I searched for an alternative and found this. This saves a lot of time and is quite enjoyable :slight_smile: