33 Fundamentals Every JavaScript Developer Should Know

Why the fuck is i equal to 10 all of the sudden?

You’ve learned React, mastered npm install, and can find your way around webpack.config.js. You can do just about anything as long as there’s a module for it, and there seems to be a module for everything. But what happens when you can’t find a module? Where do you go when you can’t find the answer on Stack Overflow? You feel like a solid developer, but there’s a gnawing sensation in the pit of your stomach. You don’t like to think about it, but it’s there. The truth… A lot of this is wizardry to you. If there wasn’t an example out there, in some cases you’d have no idea how to get any of this working.

What can you do? What if someone finds out? Maybe that’s the REAL reason white boards scare you? Fret no more fellow developer. We’ve all been there. The solution has been staring you in the face this whole time, and yes we both know you’ve been avoiding it. It might be time you took the time to really understand JavaScript, and maybe even learned a little computer science.

Here’s what you need to do:

  1. Understand how a line of high-level code like JavaScript turns into and gets executed as a stack frame on the call stack (from high level languages to machine code).
  2. Understand how different primitive types are stored in memory, down to the addresses, space allocated, and binary representation (if you haven’t run into the word mantissa you’re not far enough).
  3. Understand the difference between value types and reference types, and assigning values vs assigning pointers.
  4. Understand implicit typing, explicit typing, nominal typing, structural typing, and duck typing.
  5. Understand == vs === vs typeof.
  6. Understand function scope, block scope, and lexical scope.
  7. Understand the difference between an expression and a statement, and what it means to evaluate an expression.
  8. Understand what happens (or doesn’t) in memory/on the call stack when an expression is evaluated, argument passed, result returned, etc. vs when a value is assigned or retrieved from a variable.
  9. Understand IIFE’s, modules, and namespaces. And why ES6 modules and block scope don’t fully replace IIFE’s.
  10. Understand how the message queue and event loop work in JavaScript specifically, and how it affects timing, hang, async, etc.
  11. (browser) understand setTimeout, setInterval, and requestAnimationFrame.
  12. Understand which operations are more expensive and why (expensive meaning cost more processing time or memory). Are number of iterations really the most impactful on performance (typically)? What does Big O notation really tell us? Use jsperf and performance.now to run some tests and find out.
  13. Understand what opts and deopts are, and how to keep up to date on the across the different JavaScript engines.
  14. Understand how to represent numbers in binary, hex, dec, scientific notation, etc. in JavaScript and other languages.
  15. Understand how bitwise operators, typed arrays, and array buffers work. Use understanding RGBA as a way to understand how to manipulate binary data.
  16. (browser) understanding how the in-memory DOM and layout trees are built and modified, when/how reflows/layouts, composites and repaints are triggered.
  17. Understand new, constructors, instanceof, and instances.
  18. Understand prototypical inheritance and the prototype chain. And how even with class JavaScript still doesn’t achieve classical inheritance.
  19. Understand the differences between Object.create and Object.assign.
  20. Understand factories and classes, and how these approaches differ.
  21. Understand the difference between member properties and properties on the prototype.
  22. Understand pure functions, side effects, and state mutation.
  23. Understand how almost every for/while loop can be replaced with a map/reduce/filter, and why.
  24. Understand what lambdas are (LINQ in c# as an example), and how map/reduce/filter + arrow functions change the way you think about your code.
  25. Understand how closures work, and how they look on the call stack.
  26. Understand how high order functions work, and when to use them.
  27. Understand what abstract data structures are, how to build them in JavaScript, and typical use cases for them.
  28. Understand recursion and how to use them to build abstract data structures.
  29. Understand that algorithms to solve many common problems exist, and be familiar enough with them to find the one you need on Google because nobody remembers all of them. Or even most of them.
  30. Understand the difference between the is a and has a relationship when it comes to inheritance, polymorphism, and code reuse.
  31. Become familiar with the common design patterns, and which ones have uses in JavaScript.
  32. Understand partial functions, currying, compose, and pipe. And understand why unary functions are so useful.
  33. Understand how reflection is different in JavaScript than in strongly typed, compiled languages, and why.

There you have it. The key to demystification. Did I miss something? If so, feel free to send me a tweet: @stephenthecurt

Stuff I forgot that rock star developers pointed out:

34. Erika Ritter reminded me it’s important to understand delegates. Not only what delegation is in the context of the prototype, but delegation as it pertains to this and understanding how bind, call, and apply work. Bonus: (browser) Understand what event delegation is, and how all three uses of the term delegate are saying the same thing.