1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93---
title: "33 JavaScript Concepts"
sidebarTitle: "Welcome"
description: "Master JavaScript with 33 core concepts. Clear explanations, practical examples, and curated resources for developers at any level."
---
Want to truly understand how JavaScript works? Not just copy-paste code, but actually know what's happening under the hood?
These 33 concepts are the foundation. Whether you're debugging a tricky closure, optimizing async code, or preparing for technical interviews, this is the knowledge that separates developers who struggle from those who ship with confidence.
<Info>
**What you'll find in this guide:**
- Clear explanations written for humans, not textbooks
- Practical code examples you can run and modify
- Visual diagrams that make abstract concepts click
- Curated resources (articles, videos, docs) for deeper learning
- Knowledge checks to test your understanding
</Info>
---
## Who Is This For?
This guide meets you where you are. Whether you're writing your first line of JavaScript or you've been shipping code for years, there's something here for you.
<CardGroup cols={2}>
<Card title="Beginners" icon="seedling">
New to JavaScript? Start from the fundamentals and build real understanding, not just syntax memorization.
</Card>
<Card title="Self-Taught Developers" icon="lightbulb">
Fill the gaps in your knowledge. Finally understand the "why" behind patterns you've been using.
</Card>
<Card title="Interview Prep" icon="briefcase">
These concepts come up constantly in technical interviews. Know them cold.
</Card>
<Card title="Experienced Devs" icon="rocket">
Solidify your mental models. Teach others with confidence.
</Card>
</CardGroup>
---
## The 33 Concepts
Each concept builds on the others. Start from the beginning or jump to what you need. Every page includes explanations, code examples, and resources to go deeper.
<CardGroup cols={2}>
<Card title="Fundamentals" icon="cube" href="/concepts/primitive-types">
Types, Scope, Closures, Call Stack, and how JavaScript actually executes your code
</Card>
<Card title="Functions & Execution" icon="code" href="/concepts/event-loop">
The Event Loop, IIFE, Modules, and why JavaScript can be both single-threaded and non-blocking
</Card>
<Card title="Web Platform" icon="browser" href="/concepts/dom">
DOM manipulation, HTTP requests with Fetch, and Web Workers for background processing
</Card>
<Card title="Object-Oriented JS" icon="sitemap" href="/concepts/factories-classes">
Classes, Prototypes, the `this` keyword, and how inheritance really works
</Card>
<Card title="Async JavaScript" icon="clock" href="/concepts/promises">
Callbacks, Promises, async/await, and patterns for handling asynchronous operations
</Card>
<Card title="Functional Programming" icon="filter" href="/concepts/higher-order-functions">
Pure functions, Higher-order functions, map/reduce/filter, recursion, and composition
</Card>
<Card title="Advanced Topics" icon="graduation-cap" href="/concepts/data-structures">
Data structures, Algorithms, Design patterns, and writing clean, maintainable code
</Card>
</CardGroup>
---
## A Community Project
<Tip>
**Recognized by GitHub** 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>
Created by [Leonardo Maldonado](https://github.com/leonardomso) and improved by hundreds of contributors worldwide. Translated into 40+ languages, making JavaScript education accessible to developers everywhere.
---
## Start Learning
<CardGroup cols={2}>
<Card title="About This Project" icon="circle-info" href="/getting-started/about">
The story behind the project and how to get the most out of it
</Card>
<Card title="Begin with Concept #1" icon="play" href="/concepts/primitive-types">
Start with Primitive Types and work your way through
</Card>
</CardGroup>