{"id":13394230,"url":"https://github.com/leonardomso/33-js-concepts","last_synced_at":"2026-10-18T21:10:15.399Z","repository":{"id":37285043,"uuid":"147350463","full_name":"leonardomso/33-js-concepts","owner":"leonardomso","description":"📜 33 JavaScript concepts every developer should know.","archived":false,"fork":false,"pushed_at":"2026-09-10T23:40:11.000Z","size":2929,"stargazers_count":66532,"open_issues_count":8,"forks_count":9119,"subscribers_count":1187,"default_branch":"master","last_synced_at":"2026-10-10T21:33:32.545Z","etag":null,"topics":["angular","concepts","es6","es6-javascript","hacktoberfest","javascript","javascript-closures","javascript-engines","javascript-programming","nodejs","primitive-types","programming","react"],"latest_commit_sha":null,"homepage":"https://33jsconcepts.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leonardomso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"custom":"https://www.buymeacoffee.com/PtZnDSaEo"}},"created_at":"2018-09-04T13:27:04.000Z","updated_at":"2026-10-10T21:02:47.000Z","dependencies_parsed_at":"2026-01-03T11:06:32.504Z","dependency_job_id":null,"html_url":"https://github.com/leonardomso/33-js-concepts","commit_stats":{"total_commits":535,"total_committers":209,"mean_commits":"2.5598086124401913","dds":0.5439252336448599,"last_synced_commit":"8e89373c204e8dc05ca42d064d028831bf82e120"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leonardomso/33-js-concepts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardomso%2F33-js-concepts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardomso%2F33-js-concepts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardomso%2F33-js-concepts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardomso%2F33-js-concepts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leonardomso","download_url":"https://codeload.github.com/leonardomso/33-js-concepts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonardomso%2F33-js-concepts/sbom","scorecard":{"id":584955,"data":{"date":"2025-08-11","repo":{"name":"github.com/leonardomso/33-js-concepts","commit":"e6c2dab3fe894e75ca1e563d7fcaa4dd26c4c57d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":9,"reason":"Found 13/14 approved changesets -- score normalized to 9","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/action.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/action.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/leonardomso/33-js-concepts/action.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/action.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/leonardomso/33-js-concepts/action.yml/master?enable=pin","Info:   0 out of   1 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-20T20:12:12.238Z","repository_id":37285043,"created_at":"2025-08-20T20:12:12.238Z","updated_at":"2025-08-20T20:12:12.238Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38341851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-18T02:00:06.448Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","concepts","es6","es6-javascript","hacktoberfest","javascript","javascript-closures","javascript-engines","javascript-programming","nodejs","primitive-types","programming","react"],"created_at":"2024-07-30T17:01:13.263Z","updated_at":"2026-10-18T21:10:15.392Z","avatar_url":"https://github.com/leonardomso.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/PtZnDSaEo"],"categories":["JavaScript","Front-End","JavaScript Concepts","Javascript","Web Development","Documentation / Guides / Exercises / Boilerplates","Coding interview FAQ","📚 Books","Uncategorized","JavaScript \u003ca name=\"js\"\u003e\u003c/a\u003e","angular","Credits \u0026 Sources","Dicas","react","Frontend Development","JS","6. 在线工具","Learning Resources","#frontend","Tabla de Contenido","Other","Learning and Reference","🌐 Web Development - Frontend"],"sub_categories":["JavaScript","Typescript / Javascript","Uncategorized","Inspirations","GRID CSS e FLEXBOX","24.3 Web Sockets","Tutorials and Books","Methodologies:"],"readme":"\u003ch1 align=\"center\"\u003e\n\u003cbr\u003e\n  \u003ca href=\"https://github.com/leonardomso/33-js-concepts\"\u003e\u003cimg src=\"github-image.png\" alt=\"33 Concepts Every JS Developer Should Know\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n    \u003cbr\u003e\n  \u003cstrong\u003e33 Concepts Every JavaScript Developer Should Know\u003c/strong\u003e\n  \u003cbr\u003e\u003cbr\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://33jsconcepts.com\"\u003eRead the Full Guide\u003c/a\u003e •\n  \u003ca href=\"#concepts\"\u003eConcepts\u003c/a\u003e •\n  \u003ca href=\"TRANSLATIONS.md\"\u003eTranslations\u003c/a\u003e •\n  \u003ca href=\"CONTRIBUTING.md\"\u003eContributing\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eRecognized by GitHub as one of the \u003ca href=\"https://github.blog/news-insights/octoverse/new-open-source-projects/#top-projects-of-2018\"\u003etop open source projects of 2018!\u003c/a\u003e\u003c/strong\u003e\n\u003c/div\u003e\n\n---\n\n## About\n\nThis repository helps developers master core JavaScript concepts. Each concept includes clear explanations, practical code examples, and curated resources.\n\n**[Start learning at 33jsconcepts.com →](https://33jsconcepts.com)**\n\n---\n\n## Concepts\n\n### Fundamentals\n\n- **[Primitive Types](https://33jsconcepts.com/concepts/primitive-types)**  \n  Learn JavaScript's 7 primitive types: string, number, bigint, boolean, undefined, null, and symbol. Understand immutability, typeof quirks, and autoboxing.\n\n- **[Primitives vs Objects](https://33jsconcepts.com/concepts/primitives-objects)**  \n  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.\n\n- **[Type Coercion](https://33jsconcepts.com/concepts/type-coercion)**  \n  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.\n\n- **[Equality Operators](https://33jsconcepts.com/concepts/equality-operators)**  \n  Learn JavaScript equality operators == vs ===, typeof quirks, and Object.is(). Understand type coercion, why NaN !== NaN, and why typeof null returns 'object'.\n\n- **[Scope and Closures](https://33jsconcepts.com/concepts/scope-and-closures)**  \n  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.\n\n- **[Call Stack](https://33jsconcepts.com/concepts/call-stack)**  \n  Learn how the JavaScript call stack tracks function execution. Understand stack frames, LIFO ordering, execution contexts, stack overflow errors, and debugging with stack traces.\n\n### Functions \u0026 Execution\n\n- **[Event Loop](https://33jsconcepts.com/concepts/event-loop)**  \n  Learn how the JavaScript event loop handles async code. Understand the call stack, task queue, microtasks, and why Promises always run before setTimeout().\n\n- **[IIFE, Modules \u0026 Namespaces](https://33jsconcepts.com/concepts/iife-modules)**  \n  Learn how to organize JavaScript code with IIFEs, namespaces, and ES6 modules. Understand private scope, exports, dynamic imports, and common module mistakes.\n\n### Web Platform\n\n- **[DOM](https://33jsconcepts.com/concepts/dom)**  \n  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.\n\n- **[Fetch API](https://33jsconcepts.com/concepts/http-fetch)**  \n  Learn how to make HTTP requests with the JavaScript Fetch API. Understand GET, POST, response handling, JSON parsing, error patterns, and AbortController for cancellation.\n\n- **[Web Workers](https://33jsconcepts.com/concepts/web-workers)**  \n  Learn Web Workers in JavaScript for running code in background threads. Understand postMessage, Dedicated and Shared Workers, and transferable objects.\n\n### Object-Oriented JavaScript\n\n- **[Factories and Classes](https://33jsconcepts.com/concepts/factories-classes)**  \n  Learn JavaScript factory functions and ES6 classes. Understand constructors, prototypes, private fields, inheritance, and when to use each pattern.\n\n- **[this, call, apply, bind](https://33jsconcepts.com/concepts/this-call-apply-bind)**  \n  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.\n\n- **[Object Creation \u0026 Prototypes](https://33jsconcepts.com/concepts/object-creation-prototypes)**  \n  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.\n\n- **[Inheritance \u0026 Polymorphism](https://33jsconcepts.com/concepts/inheritance-polymorphism)**  \n  Learn inheritance and polymorphism in JavaScript — extending classes, prototype chains, method overriding, and code reuse patterns.\n\n### Async JavaScript\n\n- **[Callbacks](https://33jsconcepts.com/concepts/callbacks)**  \n  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.\n\n- **[Promises](https://33jsconcepts.com/concepts/promises)**  \n  Learn JavaScript Promises for handling async operations. Understand how to create, chain, and combine Promises, handle errors properly, and avoid common pitfalls.\n\n- **[async/await](https://33jsconcepts.com/concepts/async-await)**  \n  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.\n\n- **[Generators \u0026 Iterators](https://33jsconcepts.com/concepts/generators-iterators)**  \n  Learn JavaScript generators and iterators. Understand yield, the iteration protocol, lazy evaluation, infinite sequences, and async generators with for await...of.\n\n### Functional Programming\n\n- **[Higher-Order Functions](https://33jsconcepts.com/concepts/higher-order-functions)**  \n  Learn higher-order functions in JavaScript. Understand functions that accept or return other functions, create reusable abstractions, and write cleaner code.\n\n- **[Pure Functions](https://33jsconcepts.com/concepts/pure-functions)**  \n  Learn pure functions in JavaScript. Understand the two rules of purity, avoid side effects, and write testable, predictable code with immutable patterns.\n\n- **[map, reduce, filter](https://33jsconcepts.com/concepts/map-reduce-filter)**  \n  Learn map, reduce, and filter in JavaScript. Transform, filter, and combine arrays without mutation. Includes method chaining and common pitfalls.\n\n- **[Recursion](https://33jsconcepts.com/concepts/recursion)**  \n  Learn recursion in JavaScript. Understand base cases, recursive calls, the call stack, and patterns like factorial, tree traversal, and memoization.\n\n- **[Currying \u0026 Composition](https://33jsconcepts.com/concepts/currying-composition)**  \n  Learn currying and function composition in JavaScript. Build reusable functions from simple pieces using curry, compose, and pipe for cleaner, modular code.\n\n### Advanced Topics\n\n- **[JavaScript Engines](https://33jsconcepts.com/concepts/javascript-engines)**  \n  Learn how JavaScript engines work. Understand V8's architecture, parsing, compilation, JIT optimization, hidden classes, inline caching, and garbage collection.\n\n- **[Error Handling](https://33jsconcepts.com/concepts/error-handling)**  \n  Learn JavaScript error handling with try/catch/finally. Understand Error types, custom errors, async error patterns, and best practices for robust code.\n\n- **[Regular Expressions](https://33jsconcepts.com/concepts/regular-expressions)**  \n  Learn regular expressions in JavaScript. Covers pattern syntax, character classes, quantifiers, flags, capturing groups, and methods like test, match, and replace.\n\n- **[Modern JS Syntax](https://33jsconcepts.com/concepts/modern-js-syntax)**  \n  Learn modern JavaScript ES6+ syntax. Covers destructuring, spread/rest operators, arrow functions, optional chaining, nullish coalescing, and template literals.\n\n- **[ES Modules](https://33jsconcepts.com/concepts/es-modules)**  \n  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.\n\n- **[Data Structures](https://33jsconcepts.com/concepts/data-structures)**  \n  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.\n\n- **[Algorithms \u0026 Big O](https://33jsconcepts.com/concepts/algorithms-big-o)**  \n  Learn Big O notation and algorithms in JavaScript. Understand time complexity, implement searching and sorting algorithms, and recognize common interview patterns.\n\n- **[Design Patterns](https://33jsconcepts.com/concepts/design-patterns)**  \n  Learn JavaScript design patterns like Module, Singleton, Observer, Factory, Proxy, and Decorator. Understand when to use each pattern and avoid common pitfalls.\n\n- **[Clean Code](https://33jsconcepts.com/concepts/clean-code)**  \n  Learn clean code principles for JavaScript. Covers meaningful naming, small functions, DRY, avoiding side effects, and best practices to write maintainable code.\n\n---\n\n## Beyond 33: Extended Concepts\n\nReady to go deeper? These advanced topics build on the fundamentals above.\n\n### Language Mechanics\n\n- **[Hoisting](https://33jsconcepts.com/concepts/hoisting)**  \n  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.\n\n- **[Temporal Dead Zone](https://33jsconcepts.com/concepts/temporal-dead-zone)**  \n  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.\n\n- **[Strict Mode](https://33jsconcepts.com/concepts/strict-mode)**  \n  Learn JavaScript strict mode and how `'use strict'` catches common mistakes. Understand silent errors it prevents, forbidden syntax, and when to use it.\n\n### Type System\n\n- **[JavaScript Type Nuances](https://33jsconcepts.com/concepts/javascript-type-nuances)**  \n  Learn advanced JavaScript type behavior. Understand null vs undefined, short-circuit evaluation, typeof quirks, instanceof and Symbol.hasInstance, Symbols, and BigInt for large numbers.\n\n### Objects \u0026 Properties\n\n- **[Property Descriptors](https://33jsconcepts.com/concepts/property-descriptors)**  \n  Learn JavaScript property descriptors. Understand writable, enumerable, and configurable attributes, Object.defineProperty(), and how to create immutable object properties.\n\n- **[Getters \u0026 Setters](https://33jsconcepts.com/concepts/getters-setters)**  \n  Learn JavaScript getters and setters. Understand how to define computed properties with `get` and `set`, validate data on assignment, and create reactive object behavior.\n\n- **[Object Methods](https://33jsconcepts.com/concepts/object-methods)**  \n  Learn essential JavaScript Object methods. Master Object.keys(), Object.values(), Object.entries(), Object.fromEntries(), Object.freeze(), Object.seal(), and object cloning patterns.\n\n- **[Proxy \u0026 Reflect](https://33jsconcepts.com/concepts/proxy-reflect)**  \n  Learn JavaScript Proxy and Reflect APIs. Understand how to intercept object operations, create reactive systems, implement validation, and build powerful metaprogramming patterns.\n\n- **[WeakMap \u0026 WeakSet](https://33jsconcepts.com/concepts/weakmap-weakset)**  \n  Learn JavaScript WeakMap and WeakSet. Understand weak references, automatic garbage collection, private data patterns, and when to use them over Map and Set.\n\n### Memory \u0026 Performance\n\n- **[Memory Management](https://33jsconcepts.com/concepts/memory-management)**  \n  Learn JavaScript memory management. Understand the memory lifecycle, stack vs heap allocation, memory leaks, and how to profile memory usage in DevTools.\n\n- **[Garbage Collection](https://33jsconcepts.com/concepts/garbage-collection)**  \n  Learn how JavaScript garbage collection works. Understand mark-and-sweep, reference counting, generational GC, and how to write memory-efficient code.\n\n- **[Debouncing \u0026 Throttling](https://33jsconcepts.com/concepts/debouncing-throttling)**  \n  Learn debouncing and throttling in JavaScript. Understand how to optimize event handlers, reduce API calls, improve scroll performance, and implement both patterns from scratch.\n\n- **[Memoization](https://33jsconcepts.com/concepts/memoization)**  \n  Learn memoization in JavaScript. Understand how to cache function results, optimize expensive computations, implement memoization patterns, and when caching hurts performance.\n\n### Modern Syntax \u0026 Operators\n\n- **[Tagged Template Literals](https://33jsconcepts.com/concepts/tagged-template-literals)**  \n  Learn JavaScript tagged template literals. Understand how to create custom string processing functions, build DSLs, sanitize HTML, and use popular libraries like styled-components.\n\n- **[Computed Property Names](https://33jsconcepts.com/concepts/computed-property-names)**  \n  Learn JavaScript computed property names. Understand how to use dynamic keys in object literals, create objects from variables, and leverage Symbol keys.\n\n### Browser Storage\n\n- **[localStorage \u0026 sessionStorage](https://33jsconcepts.com/concepts/localstorage-sessionstorage)**  \n  Learn Web Storage APIs in JavaScript. Understand localStorage vs sessionStorage, storage limits, JSON serialization, storage events, and security considerations.\n\n- **[IndexedDB](https://33jsconcepts.com/concepts/indexeddb)**  \n  Learn IndexedDB for client-side storage in JavaScript. Understand how to store large amounts of structured data, create indexes, perform transactions, and handle versioning.\n\n- **[Cookies](https://33jsconcepts.com/concepts/cookies)**  \n  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.\n\n### Events\n\n- **[Event Bubbling \u0026 Capturing](https://33jsconcepts.com/concepts/event-bubbling-capturing)**  \n  Learn JavaScript event bubbling and capturing. Understand the three phases of event propagation, stopPropagation(), event flow direction, and when to use each phase.\n\n- **[Event Delegation](https://33jsconcepts.com/concepts/event-delegation)**  \n  Learn event delegation in JavaScript. Understand how to handle events efficiently using bubbling, manage dynamic elements, reduce memory usage, and implement common delegation patterns.\n\n- **[Custom Events](https://33jsconcepts.com/concepts/custom-events)**  \n  Learn JavaScript custom events. Understand how to create, dispatch, and listen for CustomEvent, pass data between components, and build decoupled event-driven architectures.\n\n### Observer APIs\n\n- **[Intersection Observer](https://33jsconcepts.com/concepts/intersection-observer)**  \n  Learn the Intersection Observer API. Understand how to detect element visibility, implement lazy loading, infinite scroll, and animate elements on scroll efficiently.\n\n- **[Mutation Observer](https://33jsconcepts.com/concepts/mutation-observer)**  \n  Learn the Mutation Observer API. Understand how to watch DOM changes, detect attribute modifications, observe child elements, and replace deprecated mutation events.\n\n- **[Resize Observer](https://33jsconcepts.com/concepts/resize-observer)**  \n  Learn the Resize Observer API. Understand how to respond to element size changes, build responsive components, and replace inefficient window resize listeners.\n\n- **[Performance Observer](https://33jsconcepts.com/concepts/performance-observer)**  \n  Learn the Performance Observer API. Understand how to measure page performance, track Long Tasks, monitor layout shifts, and collect Core Web Vitals metrics.\n\n### Data Handling\n\n- **[JSON Deep Dive](https://33jsconcepts.com/concepts/json-deep-dive)**  \n  Learn advanced JSON in JavaScript. Understand JSON.stringify() replacers, JSON.parse() revivers, handling circular references, BigInt serialization, and custom toJSON methods.\n\n- **[Typed Arrays \u0026 ArrayBuffers](https://33jsconcepts.com/concepts/typed-arrays-arraybuffers)**  \n  Learn JavaScript Typed Arrays and ArrayBuffers. Understand binary data handling, DataView, working with WebGL, file processing, and network protocol implementation.\n\n- **[Blob \u0026 File API](https://33jsconcepts.com/concepts/blob-file-api)**  \n  Learn JavaScript Blob and File APIs. Understand how to create, read, and manipulate binary data, handle file uploads, generate downloads, and work with FileReader.\n\n- **[requestAnimationFrame](https://33jsconcepts.com/concepts/requestanimationframe)**  \n  Learn requestAnimationFrame in JavaScript. Understand how to create smooth 60fps animations, sync with browser repaint cycles, and optimize animation performance.\n\n---\n\n## Translations\n\nThis project has been translated into 40+ languages by our amazing community!\n\n**[View all translations →](TRANSLATIONS.md)**\n\n---\n\n## Contributing\n\nWe welcome contributions! See our [Contributing Guidelines](CONTRIBUTING.md) for details.\n\n---\n\n## License\n\nMIT © [Leonardo Maldonado](https://github.com/leonardomso)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003eIf you find this helpful, please star the repo!\u003c/strong\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonardomso%2F33-js-concepts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleonardomso%2F33-js-concepts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonardomso%2F33-js-concepts/lists"}