Back to 33 Js Concepts

About This Project

docs/getting-started/about.mdx

latest7.2 KB
Original Source

The Origin Story

In 2017, Stephen Curtis wrote an article titled "33 Fundamentals Every JavaScript Developer Should Know". It outlined the core concepts that separate developers who use JavaScript from developers who truly understand it.

Leonardo Maldonado took this idea and built something bigger: a curated collection of the best resources for each concept. What started as a personal learning project became one of the most popular JavaScript repositories on GitHub.

<Tip> **Recognition:** GitHub featured this project as one of the [top open source projects of 2018](https://github.blog/news-insights/octoverse/new-open-source-projects/#top-projects-of-2018). </Tip>

Who Is This For?

This guide is for anyone who wants to learn JavaScript, regardless of your current level.

If you are...This guide will help you...
A complete beginnerBuild a solid foundation from the ground up
Self-taughtFill gaps in your knowledge
Preparing for interviewsUnderstand concepts interviewers commonly ask about
An experienced developerDeepen your understanding of how JavaScript works

There are no prerequisites. If you've never written a line of code, you can start here.


The Original 33 Concepts

These are the original 33 concepts that inspired this project. We've since reorganized and expanded some topics, but this is the foundation:

<AccordionGroup> <Accordion title="Fundamentals (Concepts 1-6)"> 1. **Call Stack** - How JavaScript tracks function execution 2. **Primitive Types** - String, Number, Boolean, Null, Undefined, Symbol, BigInt 3. **Value Types vs Reference Types** - How data is stored and passed 4. **Type Coercion** - Implicit and explicit type conversion 5. **Equality Operators** - == vs === and how comparisons work 6. **Scope and Closures** - Where variables are accessible and how functions remember their environment </Accordion> <Accordion title="Functions & Execution (Concepts 7-10)"> 7. **Expression vs Statement** - Understanding the difference 8. **IIFE, Modules, and Namespaces** - Code organization patterns 9. **Message Queue and Event Loop** - JavaScript's concurrency model 10. **Timers** - setTimeout, setInterval, and requestAnimationFrame </Accordion> <Accordion title="JavaScript Engines (Concepts 11-13)"> 11. **JavaScript Engines** - V8, SpiderMonkey, and how JS runs 12. **Bitwise Operators** - Low-level operations and typed arrays 13. **DOM and Layout Trees** - How browsers render pages </Accordion> <Accordion title="Object-Oriented JavaScript (Concepts 14-18)"> 14. **Factories and Classes** - Object creation patterns 15. **this, call, apply, and bind** - Context and function binding 16. **new, Constructor, instanceof** - Object instantiation 17. **Prototype Inheritance** - JavaScript's inheritance model 18. **Object.create and Object.assign** - Object manipulation methods </Accordion> <Accordion title="Functional Programming (Concepts 19-23)"> 19. **map, reduce, filter** - Array transformation methods 20. **Pure Functions and Side Effects** - Functional programming basics 21. **Closures** - Functions that remember their scope 22. **Higher-Order Functions** - Functions that operate on functions 23. **Recursion** - Functions that call themselves </Accordion> <Accordion title="Async JavaScript (Concepts 24-26)"> 24. **Collections and Generators** - Iterables and lazy evaluation 25. **Promises** - Handling asynchronous operations 26. **async/await** - Modern async syntax </Accordion> <Accordion title="Advanced Topics (Concepts 27-33)"> 27. **Data Structures** - Arrays, Objects, Maps, Sets, and more 28. **Big O Notation** - Algorithm complexity analysis 29. **Algorithms** - Common algorithms in JavaScript 30. **Inheritance and Polymorphism** - OOP principles 31. **Design Patterns** - Proven solutions to common problems 32. **Currying and Composition** - Advanced functional techniques 33. **Clean Code** - Writing maintainable JavaScript </Accordion> </AccordionGroup>

What We've Changed

JavaScript and web development have evolved since the original list was created. We've updated this guide to better reflect what modern developers need to know.

Concepts We Added

ConceptWhy We Added It
CallbacksEssential for understanding async JavaScript before diving into Promises
HTTP and FetchEvery web developer needs to know how to make network requests
Web WorkersImportant for performance and running code off the main thread
Error HandlingCritical for building reliable applications
Regular ExpressionsA fundamental tool for text processing and validation
Modern JS SyntaxDestructuring, spread operator, and other ES6+ features are now standard
ES ModulesThe official module system for JavaScript

Concepts We Removed or Merged

Original ConceptWhat Happened
Expression vs StatementCovered within other concept pages where relevant
TimersMerged into the Event Loop concept
Bitwise OperatorsRarely used in day-to-day JavaScript development
new, Constructor, instanceofMerged into Factories and Classes
Object.create and Object.assignMerged into Object Creation and Prototypes
<Info> The goal isn't to have exactly 33 concepts. It's to give you the knowledge you need to truly understand JavaScript. </Info>

What Makes This Guide Different?

Learn the Concept, Then Go Deeper

Each concept page teaches you the topic directly with clear explanations and practical code examples. Once you understand the fundamentals, you'll find a curated list of articles, videos, and books to explore further.

Curated Resources

Every resource is hand-picked from across the web. Instead of one perspective, you get the best explanations from multiple teachers and sources.

Community-Driven

Hundreds of developers have contributed to this project. Resources are continuously reviewed, updated, and improved by the community.

Multiple Formats

Everyone learns differently. Each concept includes:

<CardGroup cols={3}> <Card title="Articles" icon="newspaper"> In-depth written explanations </Card> <Card title="Videos" icon="video"> Visual explanations and talks </Card> <Card title="Books" icon="book"> Comprehensive deep-dives </Card> </CardGroup>

Available in 40+ Languages

Thanks to our community of translators, this guide is accessible to developers worldwide. Check out the translations page to find your language.


Ready to Continue?

<CardGroup cols={2}> <Card title="How to Learn" icon="book-open" href="/getting-started/how-to-learn"> Learn how to use this guide effectively </Card> <Card title="Prerequisites" icon="wrench" href="/getting-started/prerequisites"> Set up your learning environment </Card> </CardGroup>