JavaScript30 Series

I started fo­cus­ing much more keenly on ReactJS and JavaScript while I looked for a job. This post is a part of the se­ries ti­tled JavaScript 30’, which be­gan early October 2020.

What I did to­day

  1. Started Wes Bos’ free course ti­tled JavaScript30. I did­n’t know there was one, but it’s good to have some­one else do the roadmap and for me to just fo­cus on JavaScript. I’ve not been one to like starter files but I so ap­pre­ci­ate them now. How per­spec­tives change!
    • Some ad­van­tages:
      • You train your­self to read, un­der­stand, and build a quick men­tal model of code some­one else has writ­ten.
      • With the grunt work done, you fo­cus on just what you need to fo­cus on. In my case, JavaScript.
      • If you’re jug­gling sev­eral things, the time it saves you! Just go in and work through the prob­lem state­ment… that’s im­mense.
    • I worked on the Drum Kit ex­er­cise which was ac­tu­ally quite fun.
      • I saw the kbd HTML el­e­ment be­ing used in real life for the first time!
      • Learnt about an au­dio el­e­men­t’s JavaScript in­ter­face. Specifically:
        • (method)
        • audioElement.currentTime (setter)
      • Learnt about the transitionend event, which is pretty cool.
    • This also seems to have in­spired Chris Burnell to get started as well, which is re­ally cool!
  2. I did not, un­for­tu­nately, work through the sug­gested im­prove­ments/​ex­er­cises for the Tic-Tac-Toe game, as I thought I would do to­day.
    • So… to­mor­row it will be, then.
    • I like that I’m do­ing this pub­licly which is forc­ing me to be ac­count­able! Hoorah!
  3. Came across the seem­ingly sim­ple group­ing op­er­a­tor which has been used in a, say, twisted man­ner. Where? On an ar­ti­cle ex­plain­ing this, where else? 😛
    • If you open up your Node REPL and work through the fol­low­ing two snip­pets, you’ll see:

      • {} re­turns undefined.
      • ({}) re­turns an Object{}

      The group­ing op­er­a­tor is sup­posed to give you con­trol over op­er­a­tor prece­dence. But how is it do­ing what it is do­ing here?

      In the first snip­pet, it’s just a block with no ref­er­ences to any new vari­ables in its scope, so it is de­stroyed pretty much im­me­di­ately af­ter be­ing cre­ated.

      In the sec­ond case, why does adding the group­ing op­er­a­tor cause the com­piler to cre­ate an ob­ject in­stead?

      Yes, I’ve pre­vi­ously re­turned an ob­ject like so in an ar­row func­tion:

      const hurrah = () => ({
      foo: "bar"

      You want to re­turn an ob­ject and not con­fuse the com­piler with what it might mis­con­strue as a block (ultimately caus­ing a SyntaxError). Instead of our in­ten­tion, which is to re­turn an ob­ject. I’ve never thought about why this works ei­ther.

      So, why does the group­ing op­er­a­tor force JS to re­turn an Object vs undefined in the REPL for the two snip­pets above?

      Let me know if you do. If not, I’ll fig­ure it out… even­tu­ally.

  4. I briefly read up on HOC which is a com­monly used pat­tern in ReactJS. It kind of clicked for me to­day, at least in the­ory. Here’s how I un­der­stand it:

Take the ex­am­ple of CSS.

Maybe you’ve got an icon and you’ve got some data next to it.

Say, a clock icon and a text that reads the time it took for you to com­plete a task. You’d prob­a­bly start out by nam­ing it in BEM like so: data-metric for the root com­po­nent, data-metric__icon for the icon, and fi­nally, data-metric__datum for the ac­tual data.


Now, even though this UI com­po­nent was very spe­cific it­self, we named the classes as gener­i­cally as we could. Why? So we could re-use them for other sim­i­lar data met­ric we add later on.

HOCs are a sim­i­lar pat­tern, ex­cept for React com­po­nents (or any UI com­po­nent in gen­eral in any frame­work/​li­brary). There’s logic that can be re­peated for dif­fer­ent com­po­nents. So, you write a func­tion that doe some magic stuff and then re­turns a new com­po­nent — with its specifics all wired up and ready to use. It’s no longer generic.

You could say this is sim­i­lar to the way, in prin­ci­ple, we add a mod­i­fier in a BEM class: data-metric--completion-time.