DEV Community

kapeel kokane
kapeel kokane

Posted on • Edited on

Javascript Explained | Sketch-notes PART1

Hey There!

I have recently started a new series on twitter where I create #sketchnotes for different topics in Javascript. The attempt is to explain JS concepts in a comic-book/cartoon/non-tech way.
Here is a compilation so far:

1] Compiler & Engine talking about "Scopes & Closures"

Alt Text

2] Coercion in Javascript

Alt Text

3] Strict v/s Loose comparison

Alt Text

4] Array to string coercion

Alt Text

5] Truthy v/s Falsy values

Alt Text

6] JS Objects are reference types

Alt Text

If you liked those, do follow me on twitter to get access to the sketchnotes the day they are posted. Embedding my tweet here:

Cheers!

Latest comments (12)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
kokaneka profile image
kapeel kokane

Hey. I've mentioned YDKJS in every post which Kyle manages. Also, I tag him in every post that I send out these sketchnotes. Check the bottom most one. @getify is none other than kyle :)

Collapse
 
kaspervdheijden profile image
Kasper van der Heijden

Nice article! Nicely done, too. This really touches the basic ideaal that cover some well known JS pitfalls. There are, however, 2 things I would like to debate.

First of which, when comparing 42 with "42", I think it does not convert to number, but to string instead (widening).

Secondly, the findMissing() method is a nice algorithm, bit not so usefull as it's currently data aware, meaning that it now only works if 1 element is used only once in the input array. If, let's say, both 1 and 7 are each used only once, I guess it returns 8 (not actually tester this!). 8 is not in the array, so that would need further processing. If 0 elements are used once, it returns 0, which might not even be in the array. If it is, is it then used once? No way to tell. Instead, create a map of unique vales, and just keep a count. Boring, but it works ;)

Collapse
 
kokaneka profile image
kapeel kokane

Hey Kasper, thanks for the feedback and the suggestions. Debates are always welcome. I have created these notes by referring to 'You find know JS' by getify on github. And there it says that the string 42 will get converted to number. github.com/getify/You-Dont-Know-JS...

Also, in the findOne problem, I had assumed that only one numner would appear once, though the Map() based solution makes sense too :)

Collapse
 
michaeltharrington profile image
Michael Tharrington

This is super cool! Love the concept and your notes look amazing.

If I had one critique, I think this series deserves a cool cover image to match the style of the notes inside.

Collapse
 
kokaneka profile image
kapeel kokane

Thanks. Yea. Somewhere down the line I'll need to design a cover when I plan to put this all together into a book. Right now, all of them are independent.

Collapse
 
iamhenrym profile image
Henry Moran

As someone who is new to JS this is very helpful!

May I request a series on React and data flow? It's something I'm currently struggling with and I think your sketches may be helpful.

Collapse
 
kokaneka profile image
kapeel kokane

Thanks for the suggestion. I was anyways thinking of doing some on React :)

Collapse
 
iamhenrym profile image
Henry Moran

Awesome, looking forward to your next one 😊

Collapse
 
kokaneka profile image
kapeel kokane

Do let me know what other topics I can cover.

Collapse
 
ziizium profile image
Habdul Hazeez

This is interesting.

Collapse
 
kokaneka profile image
kapeel kokane

Thanks :)