33-js-concepts

📜 33 JavaScript concepts every developer should know.

65,910

9,195

65,910

137

View on GitHub

Top Related Projects

javascript-questions

65,072

A long list of (advanced) JavaScript questions, and their explanations :sparkles:

clean-code-javascript

93,980

Clean Code concepts adapted for JavaScript

javascript-algorithms

193,908

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

You-Dont-Know-JS

183,746

A book series (2 published editions) on the JS language.

front-end-interview-handbook

43,664

🌐 Front End interview preparation materials for busy engineers (updated for 2025)

Quick Overview

The "33-js-concepts" repository is a curated collection of 33 core JavaScript concepts that every JavaScript developer should understand. It serves as a comprehensive guide and reference for both beginners and experienced developers, covering fundamental topics to advanced concepts in JavaScript programming.

Pros

Comprehensive coverage of essential JavaScript concepts
Well-organized with links to articles, videos, and resources for each topic
Regularly updated with community contributions
Free and open-source, accessible to all developers

Cons

May be overwhelming for absolute beginners due to the breadth of topics
Some linked resources may become outdated over time
Lacks interactive coding exercises or quizzes for hands-on practice
Primarily in English, which may limit accessibility for non-English speakers

Code Examples

This repository is not a code library but a collection of resources and explanations. Therefore, there are no specific code examples to showcase. However, the repository covers various JavaScript concepts, including code snippets and explanations within the linked resources.

Getting Started

As this is not a code library, there's no installation or setup required. To get started with the "33-js-concepts" repository:

Visit the GitHub repository: https://github.com/leonardomso/33-js-concepts
Browse through the list of 33 concepts in the README.md file
Click on any concept to access a curated list of articles, videos, and resources related to that topic
Start learning and exploring the concepts that interest you or that you want to improve upon

Remember to star the repository if you find it helpful, and consider contributing by suggesting new resources or improvements to existing content.

Competitor Comparisons

javascript-questions

65,072

A long list of (advanced) JavaScript questions, and their explanations :sparkles:

Pros of javascript-questions

Focuses on practical, interview-style questions with detailed explanations
Covers a wide range of JavaScript topics in a quiz format
Regularly updated with new questions and community contributions

Cons of javascript-questions

Less structured approach to learning JavaScript concepts
May not cover some advanced topics as comprehensively
Quiz format might not suit all learning styles

Code Comparison

33-js-concepts:

const person = {
  name: 'John',
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

javascript-questions:

let a = 3;
let b = new Number(3);
let c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);

The 33-js-concepts example demonstrates object creation and methods, while javascript-questions focuses on tricky comparisons and type coercion.

Both repositories are valuable resources for JavaScript learners, but they serve different purposes. 33-js-concepts provides a structured curriculum for understanding core JavaScript concepts, while javascript-questions offers a collection of challenging questions to test and deepen your knowledge. The choice between them depends on your learning style and goals.

clean-code-javascript

93,980

Clean Code concepts adapted for JavaScript

Pros of clean-code-javascript

Focuses on practical coding principles and best practices
Provides concrete examples for each concept
Covers a wide range of topics related to writing clean, maintainable JavaScript code

Cons of clean-code-javascript

Less comprehensive coverage of core JavaScript concepts
May be more opinionated in its approach to coding style
Lacks in-depth explanations of underlying JavaScript mechanisms

Code Comparison

33-js-concepts example (Closures):

function outer() {
  const x = 10;
  function inner() {
    console.log(x);
  }
  return inner;
}

clean-code-javascript example (Function arguments):

function createMenu(title, body, buttonText, cancellable) {
  // ...
}

function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

The 33-js-concepts repository focuses on explaining core JavaScript concepts, while clean-code-javascript emphasizes practical coding guidelines. 33-js-concepts provides a more comprehensive overview of JavaScript fundamentals, making it suitable for beginners and those looking to deepen their understanding of the language. On the other hand, clean-code-javascript offers valuable insights into writing clean, maintainable code, making it an excellent resource for developers looking to improve their coding practices.

Both repositories complement each other well, with 33-js-concepts providing a strong foundation in JavaScript concepts and clean-code-javascript offering practical advice for writing better code.

javascript-algorithms

193,908

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

Pros of javascript-algorithms

Comprehensive collection of algorithms and data structures implemented in JavaScript
Includes detailed explanations and complexity analysis for each algorithm
Provides practical examples and use cases for various algorithms

Cons of javascript-algorithms

Focuses primarily on algorithms and data structures, lacking broader JavaScript concepts
May be overwhelming for beginners due to its extensive content
Less emphasis on JavaScript-specific features and best practices

Code Comparison

33-js-concepts:

// Example of closures
function outer() {
  let count = 0;
  return function inner() {
    return count++;
  };
}

javascript-algorithms:

// Example of binary search algorithm
function binarySearch(array, target) {
  let left = 0;
  let right = array.length - 1;
  while (left <= right) {
    // ... implementation details
  }
}

Summary

javascript-algorithms offers a deep dive into algorithms and data structures, making it ideal for those focusing on computer science fundamentals and interview preparation. 33-js-concepts, on the other hand, provides a broader overview of JavaScript concepts, making it more suitable for general JavaScript learning and development. While javascript-algorithms excels in algorithmic content, 33-js-concepts offers a more rounded approach to JavaScript as a language and ecosystem.

You-Dont-Know-JS

183,746

A book series (2 published editions) on the JS language.

Pros of You-Dont-Know-JS

More comprehensive and in-depth coverage of JavaScript concepts
Structured as a book series, providing a cohesive learning experience
Regularly updated to reflect the latest JavaScript standards and best practices

Cons of You-Dont-Know-JS

Can be overwhelming for beginners due to its depth and complexity
Requires a significant time investment to read through all the content
Less focused on practical, quick-reference examples compared to 33-js-concepts

Code Comparison

33-js-concepts example (Closures):

function outer() {
  let count = 0;
  return function inner() {
    return count++;
  };
}

You-Dont-Know-JS example (Closures):

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}
var add5 = makeAdder(5);
console.log(add5(2)); // 7

Both repositories aim to teach JavaScript concepts, but they differ in their approach. 33-js-concepts provides a concise overview of key topics with practical examples, making it suitable for quick reference and beginners. You-Dont-Know-JS offers a more comprehensive and in-depth exploration of JavaScript, making it ideal for developers seeking a deeper understanding of the language's intricacies. The choice between the two depends on the learner's goals, experience level, and available time for study.

javascript

148,010

JavaScript Style Guide

Pros of JavaScript Style Guide

Comprehensive coding style guide with detailed explanations
Widely adopted in the industry, making it a valuable standard
Regularly updated and maintained by the Airbnb team

Cons of JavaScript Style Guide

Focuses primarily on coding style rather than JavaScript concepts
May be overwhelming for beginners due to its extensive rules
Less emphasis on explaining core JavaScript principles

Code Comparison

33-js-concepts:

// Example of closures
function outer() {
  let count = 0;
  return function inner() {
    return count++;
  };
}

JavaScript Style Guide:

// Example of arrow function syntax
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

Summary

33-js-concepts provides a curated list of essential JavaScript concepts with explanations and resources, making it ideal for learning and understanding core JavaScript principles. It's particularly useful for beginners and those looking to deepen their JavaScript knowledge.

JavaScript Style Guide offers a comprehensive set of coding conventions and best practices for writing JavaScript code. It's more suitable for experienced developers and teams looking to maintain consistent code style across projects.

Both repositories serve different purposes and can be complementary in a developer's journey. 33-js-concepts is better for learning concepts, while JavaScript Style Guide is more focused on code style and best practices.

front-end-interview-handbook

43,664

🌐 Front End interview preparation materials for busy engineers (updated for 2025)

Pros of front-end-interview-handbook

Broader coverage of front-end topics, including HTML, CSS, and JavaScript
More practical focus on interview preparation and common questions
Regularly updated with contributions from the community

Cons of front-end-interview-handbook

Less in-depth coverage of core JavaScript concepts
May not provide as much theoretical background for advanced topics

Code Comparison

front-end-interview-handbook:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

33-js-concepts:

const person = {
  name: 'John Doe',
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

The code snippets demonstrate the different focus of each repository. front-end-interview-handbook provides practical examples like the debounce function, while 33-js-concepts illustrates core JavaScript concepts such as objects and methods.

Both repositories offer valuable resources for JavaScript developers, with front-end-interview-handbook being more interview-oriented and 33-js-concepts providing a deeper dive into JavaScript fundamentals.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

33 Concepts Every JavaScript Developer Should Know

Read the Full Guide â¢ Concepts â¢ Translations â¢ Contributing

Recognized by GitHub as one of the top open source projects of 2018!

About

This repository helps developers master core JavaScript concepts. Each concept includes clear explanations, practical code examples, and curated resources.

Start learning at 33jsconcepts.com â

Concepts

Fundamentals

Primitive Types
Learn JavaScript's 7 primitive types: string, number, bigint, boolean, undefined, null, and symbol. Understand immutability, typeof quirks, and autoboxing.
Primitives vs Objects
Learn how JavaScript primitives and objects differ in behavior. Understand immutability, call-by-sharing semantics, why mutation works but reassignment doesn't, and how V8 actually stores values.
Type Coercion
Learn JavaScript type coercion and implicit conversion. Understand how values convert to strings, numbers, and booleans, the 8 falsy values, and how to avoid common coercion bugs.
Equality Operators
Learn JavaScript equality operators == vs ===, typeof quirks, and Object.is(). Understand type coercion, why NaN !== NaN, and why typeof null returns 'object'.
Scope and Closures
Learn JavaScript scope and closures. Understand the three types of scope, var vs let vs const, lexical scoping, the scope chain, and closure patterns for data privacy.
Call Stack
Learn how the JavaScript call stack tracks function execution. Understand stack frames, LIFO ordering, execution contexts, stack overflow errors, and debugging with stack traces.

Functions & Execution

Event Loop
Learn how the JavaScript event loop handles async code. Understand the call stack, task queue, microtasks, and why Promises always run before setTimeout().
IIFE, Modules & Namespaces
Learn how to organize JavaScript code with IIFEs, namespaces, and ES6 modules. Understand private scope, exports, dynamic imports, and common module mistakes.

Web Platform

DOM
Learn how the DOM works in JavaScript. Understand how browsers represent HTML as a tree, select and manipulate elements, traverse nodes, and optimize rendering performance.
Fetch API
Learn how to make HTTP requests with the JavaScript Fetch API. Understand GET, POST, response handling, JSON parsing, error patterns, and AbortController for cancellation.
Web Workers
Learn Web Workers in JavaScript for running code in background threads. Understand postMessage, Dedicated and Shared Workers, and transferable objects.

Object-Oriented JavaScript

Factories and Classes
Learn JavaScript factory functions and ES6 classes. Understand constructors, prototypes, private fields, inheritance, and when to use each pattern.
this, call, apply, bind
Learn how JavaScript's 'this' keyword works and how to control context binding. Understand the 5 binding rules, call/apply/bind methods, arrow functions, and common pitfalls.
Object Creation & Prototypes
Learn JavaScript's prototype chain and object creation. Understand how inheritance works, the new operator's 4 steps, Object.create(), Object.assign(), and prototype methods.
Inheritance & Polymorphism
Learn inheritance and polymorphism in JavaScript â extending classes, prototype chains, method overriding, and code reuse patterns.

Async JavaScript

Callbacks
Learn JavaScript callbacks, functions passed to other functions to be called later. Understand sync vs async callbacks, error-first patterns, callback hell, and why Promises were invented.
Promises
Learn JavaScript Promises for handling async operations. Understand how to create, chain, and combine Promises, handle errors properly, and avoid common pitfalls.
async/await
Learn async/await in JavaScript. Syntactic sugar over Promises that makes async code readable. Covers error handling with try/catch, parallel execution with Promise.all, and common pitfalls.
Generators & Iterators
Learn JavaScript generators and iterators. Understand yield, the iteration protocol, lazy evaluation, infinite sequences, and async generators with for await...of.

Functional Programming

Higher-Order Functions
Learn higher-order functions in JavaScript. Understand functions that accept or return other functions, create reusable abstractions, and write cleaner code.
Pure Functions
Learn pure functions in JavaScript. Understand the two rules of purity, avoid side effects, and write testable, predictable code with immutable patterns.
map, reduce, filter
Learn map, reduce, and filter in JavaScript. Transform, filter, and combine arrays without mutation. Includes method chaining and common pitfalls.
Recursion
Learn recursion in JavaScript. Understand base cases, recursive calls, the call stack, and patterns like factorial, tree traversal, and memoization.
Currying & Composition
Learn currying and function composition in JavaScript. Build reusable functions from simple pieces using curry, compose, and pipe for cleaner, modular code.

Advanced Topics

JavaScript Engines
Learn how JavaScript engines work. Understand V8's architecture, parsing, compilation, JIT optimization, hidden classes, inline caching, and garbage collection.
Error Handling
Learn JavaScript error handling with try/catch/finally. Understand Error types, custom errors, async error patterns, and best practices for robust code.
Regular Expressions
Learn regular expressions in JavaScript. Covers pattern syntax, character classes, quantifiers, flags, capturing groups, and methods like test, match, and replace.
Modern JS Syntax
Learn modern JavaScript ES6+ syntax. Covers destructuring, spread/rest operators, arrow functions, optional chaining, nullish coalescing, and template literals.
ES Modules
Learn ES Modules in JavaScript. Understand import/export syntax, why ESM beats CommonJS, live bindings, dynamic imports, top-level await, and how modules enable tree-shaking.
Data Structures
Learn JavaScript data structures from built-in Arrays, Objects, Maps, and Sets to implementing Stacks, Queues, and Linked Lists. Understand when to use each structure.
Algorithms & Big O
Learn Big O notation and algorithms in JavaScript. Understand time complexity, implement searching and sorting algorithms, and recognize common interview patterns.
Design Patterns
Learn JavaScript design patterns like Module, Singleton, Observer, Factory, Proxy, and Decorator. Understand when to use each pattern and avoid common pitfalls.
Clean Code
Learn clean code principles for JavaScript. Covers meaningful naming, small functions, DRY, avoiding side effects, and best practices to write maintainable code.

Beyond 33: Extended Concepts

Ready to go deeper? These advanced topics build on the fundamentals above.

Language Mechanics

Hoisting
Learn how JavaScript hoists variable and function declarations. Understand why var behaves differently from let and const, function hoisting order, and how to avoid common bugs.
Temporal Dead Zone
Learn the Temporal Dead Zone (TDZ) in JavaScript. Understand why accessing let and const before declaration throws errors, and how TDZ differs from var hoisting.
Strict Mode
Learn JavaScript strict mode and how 'use strict' catches common mistakes. Understand silent errors it prevents, forbidden syntax, and when to use it.

Type System

JavaScript Type Nuances
Learn advanced JavaScript type behavior. Understand null vs undefined, short-circuit evaluation, typeof quirks, instanceof and Symbol.hasInstance, Symbols, and BigInt for large numbers.

Objects & Properties

Property Descriptors
Learn JavaScript property descriptors. Understand writable, enumerable, and configurable attributes, Object.defineProperty(), and how to create immutable object properties.
Getters & Setters
Learn JavaScript getters and setters. Understand how to define computed properties with get and set, validate data on assignment, and create reactive object behavior.
Object Methods
Learn essential JavaScript Object methods. Master Object.keys(), Object.values(), Object.entries(), Object.fromEntries(), Object.freeze(), Object.seal(), and object cloning patterns.
Proxy & Reflect
Learn JavaScript Proxy and Reflect APIs. Understand how to intercept object operations, create reactive systems, implement validation, and build powerful metaprogramming patterns.
WeakMap & WeakSet
Learn JavaScript WeakMap and WeakSet. Understand weak references, automatic garbage collection, private data patterns, and when to use them over Map and Set.

Memory & Performance

Memory Management
Learn JavaScript memory management. Understand the memory lifecycle, stack vs heap allocation, memory leaks, and how to profile memory usage in DevTools.
Garbage Collection
Learn how JavaScript garbage collection works. Understand mark-and-sweep, reference counting, generational GC, and how to write memory-efficient code.
Debouncing & Throttling
Learn debouncing and throttling in JavaScript. Understand how to optimize event handlers, reduce API calls, improve scroll performance, and implement both patterns from scratch.
Memoization
Learn memoization in JavaScript. Understand how to cache function results, optimize expensive computations, implement memoization patterns, and when caching hurts performance.

Modern Syntax & Operators

Tagged Template Literals
Learn JavaScript tagged template literals. Understand how to create custom string processing functions, build DSLs, sanitize HTML, and use popular libraries like styled-components.
Computed Property Names
Learn JavaScript computed property names. Understand how to use dynamic keys in object literals, create objects from variables, and leverage Symbol keys.

Browser Storage

localStorage & sessionStorage
Learn Web Storage APIs in JavaScript. Understand localStorage vs sessionStorage, storage limits, JSON serialization, storage events, and security considerations.
IndexedDB
Learn IndexedDB for client-side storage in JavaScript. Understand how to store large amounts of structured data, create indexes, perform transactions, and handle versioning.
Cookies
Learn JavaScript cookies. Understand how to read, write, and delete cookies, cookie attributes like HttpOnly and SameSite, security best practices, and when to use cookies vs Web Storage.

Events

Event Bubbling & Capturing
Learn JavaScript event bubbling and capturing. Understand the three phases of event propagation, stopPropagation(), event flow direction, and when to use each phase.
Event Delegation
Learn event delegation in JavaScript. Understand how to handle events efficiently using bubbling, manage dynamic elements, reduce memory usage, and implement common delegation patterns.
Custom Events
Learn JavaScript custom events. Understand how to create, dispatch, and listen for CustomEvent, pass data between components, and build decoupled event-driven architectures.

Observer APIs

Intersection Observer
Learn the Intersection Observer API. Understand how to detect element visibility, implement lazy loading, infinite scroll, and animate elements on scroll efficiently.
Mutation Observer
Learn the Mutation Observer API. Understand how to watch DOM changes, detect attribute modifications, observe child elements, and replace deprecated mutation events.
Resize Observer
Learn the Resize Observer API. Understand how to respond to element size changes, build responsive components, and replace inefficient window resize listeners.
Performance Observer
Learn the Performance Observer API. Understand how to measure page performance, track Long Tasks, monitor layout shifts, and collect Core Web Vitals metrics.

Data Handling

JSON Deep Dive
Learn advanced JSON in JavaScript. Understand JSON.stringify() replacers, JSON.parse() revivers, handling circular references, BigInt serialization, and custom toJSON methods.
Typed Arrays & ArrayBuffers
Learn JavaScript Typed Arrays and ArrayBuffers. Understand binary data handling, DataView, working with WebGL, file processing, and network protocol implementation.
Blob & File API
Learn JavaScript Blob and File APIs. Understand how to create, read, and manipulate binary data, handle file uploads, generate downloads, and work with FileReader.
requestAnimationFrame
Learn requestAnimationFrame in JavaScript. Understand how to create smooth 60fps animations, sync with browser repaint cycles, and optimize animation performance.

Translations

This project has been translated into 40+ languages by our amazing community!

View all translations â

Contributing

We welcome contributions! See our Contributing Guidelines for details.

License

If you find this helpful, please star the repo!

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot