Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ This repository helps developers master core JavaScript concepts. Each concept i
- **[Primitive Types](https://33jsconcepts.com/concepts/primitive-types)**
Learn JavaScript's 7 primitive types: string, number, bigint, boolean, undefined, null, and symbol. Understand immutability, typeof quirks, and autoboxing.

- **[Value vs Reference Types](https://33jsconcepts.com/concepts/value-reference-types)**
Learn how value types and reference types work in JavaScript. Understand how primitives and objects are stored, why copying objects shares references, and how to avoid mutation bugs.
- **[Primitives vs Objects](https://33jsconcepts.com/concepts/primitives-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](https://33jsconcepts.com/concepts/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.
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/blob-file-api.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Blob & File API: Working with Binary Data in JavaScript"
title: "Blob & File API in JavaScript"
sidebarTitle: "Blob & File API"
description: "Learn JavaScript Blob and File APIs for binary data. Create, read, and manipulate files, handle uploads, generate downloads, and work with FileReader."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/computed-property-names.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Computed Property Names: Dynamic Object Keys in JavaScript"
title: "Computed Property Names in JS"
sidebarTitle: "Computed Property Names"
description: "Learn JavaScript computed property names. Create dynamic object keys with variables, expressions, Symbols, and computed methods for cleaner ES6+ code."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/cookies.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Cookies: Server-Accessible Browser Storage in JavaScript"
title: "Cookies in JavaScript"
sidebarTitle: "Cookies"
description: "Learn JavaScript cookies. Understand how to read, write, and delete cookies, cookie attributes like HttpOnly and SameSite, and security best practices."
---
Expand Down
4 changes: 2 additions & 2 deletions docs/beyond/concepts/custom-events.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Custom Events: Create Your Own Events in JavaScript"
title: "Custom Events in JavaScript"
sidebarTitle: "Custom Events"
description: "Learn JavaScript custom events. Create, dispatch, and listen for CustomEvent, pass data with the detail property, and build decoupled event-driven architectures."
description: "Learn JavaScript custom events. Create and dispatch CustomEvent, pass data with detail, and build event-driven architectures."
---

What if you could create your own events, just like `click` or `submit`? What if a shopping cart could announce "item added!" and any part of your app could listen and respond? How do you build components that communicate without knowing about each other?
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/debouncing-throttling.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Debouncing & Throttling: Control Event Frequency in JS"
title: "Debouncing & Throttling in JS"
sidebarTitle: "Debouncing & Throttling: Control Event Frequency"
description: "Learn debouncing and throttling in JavaScript. Optimize event handlers, reduce API calls, and implement both patterns from scratch with real-world examples."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/event-bubbling-capturing.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Event Bubbling & Capturing: Event Propagation in JavaScript"
title: "Event Bubbling & Capturing"
sidebarTitle: "Event Bubbling & Capturing"
description: "Learn event bubbling and capturing in JavaScript. Understand the three phases of event propagation, stopPropagation, and when to use capturing vs bubbling."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/event-delegation.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Event Delegation: Handle Events Efficiently in JavaScript"
title: "Event Delegation in JavaScript"
sidebarTitle: "Event Delegation"
description: "Learn event delegation in JavaScript. Handle events efficiently using bubbling, manage dynamic elements, reduce memory usage, and implement common patterns."
---
Expand Down
6 changes: 3 additions & 3 deletions docs/beyond/concepts/garbage-collection.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Garbage Collection in JavaScript: How Memory is Freed Automatically"
title: "JavaScript Garbage Collection"
sidebarTitle: "Garbage Collection"
description: "Learn how JavaScript garbage collection works. Understand mark-and-sweep, reachability, and how to write memory-efficient code that helps the engine."
---
Expand Down Expand Up @@ -767,8 +767,8 @@ For most applications, `WeakMap` and `WeakSet` are better choices. They allow ob
<Card title="WeakMap & WeakSet" icon="link-slash" href="/beyond/concepts/weakmap-weakset">
Data structures with weak references that allow keys to be garbage collected when no other references exist.
</Card>
<Card title="Value vs Reference Types" icon="code-branch" href="/concepts/value-reference-types">
How JavaScript stores primitives vs objects, and why references matter for garbage collection.
<Card title="Primitives vs Objects" icon="code-branch" href="/concepts/primitives-objects">
How JavaScript primitives and objects behave differently, and why references matter for garbage collection.
</Card>
</CardGroup>

Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/getters-setters.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Getters & Setters: Computed Properties in JavaScript"
title: "Getters & Setters in JavaScript"
sidebarTitle: "Getters & Setters: Computed Properties"
description: "Learn JavaScript getters and setters. Create computed properties, validate data on assignment, and build encapsulated objects with get and set accessors."
---
Expand Down
4 changes: 2 additions & 2 deletions docs/beyond/concepts/hoisting.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Hoisting: How Declarations Move to the Top in JavaScript"
title: "Hoisting in JavaScript"
sidebarTitle: "Hoisting: How Declarations Move to the Top"
description: "Learn JavaScript hoisting and how declarations are moved to the top of their scope. Understand var vs let vs const hoisting, function hoisting, the Temporal Dead Zone, and common pitfalls."
description: "Learn JavaScript hoisting: how var, let, const, and function declarations are moved to the top of their scope. Understand the Temporal Dead Zone."
---

Why can you call a function before it appears in your code? Why does `var` give you `undefined` instead of an error, while `let` throws a `ReferenceError`? How does JavaScript seem to know about variables before they're declared?
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/indexeddb.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "IndexedDB: Client-Side Database Storage in JavaScript"
title: "IndexedDB in JavaScript"
sidebarTitle: "IndexedDB: Client-Side Database Storage"
description: "Learn IndexedDB for client-side storage in JavaScript. Store structured data, create indexes, perform transactions, and build offline-capable apps."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/intersection-observer.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Intersection Observer in JavaScript"
sidebarTitle: "Intersection Observer"
description: "Learn the Intersection Observer API in JavaScript. Detect element visibility, implement lazy loading, infinite scroll, and scroll animations efficiently without scroll events."
description: "Learn the Intersection Observer API in JavaScript. Implement lazy loading, infinite scroll, and scroll animations without scroll events."
---

How do you know when an element scrolls into view? How can you lazy-load images only when they're about to be seen? How do infinite-scroll feeds know when to load more content? And how can you trigger animations at just the right moment as users scroll through your page?
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/javascript-type-nuances.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Type Nuances: null, undefined, typeof, and More in JavaScript"
title: "JavaScript Type Nuances"
sidebarTitle: "Type Nuances"
description: "Learn JavaScript type nuances: null vs undefined, typeof quirks, nullish coalescing (??), optional chaining (?.), Symbols, and BigInt for large integers."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/json-deep-dive.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "JSON Deep Dive: Advanced Serialization in JavaScript"
title: "JSON Deep Dive in JavaScript"
sidebarTitle: "JSON: Beyond Parse and Stringify"
description: "Learn advanced JSON in JavaScript. Understand JSON.stringify() replacers, JSON.parse() revivers, circular reference handling, and custom toJSON methods."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/localstorage-sessionstorage.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "localStorage & sessionStorage: Web Storage in JavaScript"
title: "localStorage & sessionStorage"
sidebarTitle: "localStorage & sessionStorage"
description: "Master Web Storage APIs in JavaScript. Learn localStorage vs sessionStorage, JSON serialization, storage events, security best practices, and when to use each."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/memoization.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Memoization: Caching Function Results in JavaScript"
title: "Memoization in JavaScript"
sidebarTitle: "Memoization: Caching Function Results"
description: "Learn memoization in JavaScript. Cache function results, optimize expensive computations, build your own memoize function, and know when caching helps vs hurts."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/memory-management.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Memory Management: How JavaScript Allocates and Frees Memory"
title: "JavaScript Memory Management"
sidebarTitle: "Memory Management"
description: "Learn how JavaScript manages memory automatically. Understand the memory lifecycle, stack vs heap, common memory leaks, and how to profile memory with DevTools."
---
Expand Down
4 changes: 2 additions & 2 deletions docs/beyond/concepts/mutation-observer.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "MutationObserver: Watching DOM Changes in JavaScript"
title: "MutationObserver in JavaScript"
sidebarTitle: "MutationObserver: Watching DOM Changes"
description: "Learn the MutationObserver API in JavaScript. Understand how to watch DOM changes, detect attribute modifications, observe child elements, and build reactive UIs without polling."
description: "Learn the MutationObserver API in JavaScript. Watch DOM changes, detect attribute modifications, and build reactive UIs."
---

How do you know when something changes in the DOM? What if you need to react when a third-party script adds elements, when user input modifies content, or when attributes change dynamically?
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/object-methods.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Object Methods: Inspecting and Transforming Objects in JavaScript"
title: "JavaScript Object Methods"
sidebarTitle: "Object Methods: Inspect & Transform"
description: "Learn JavaScript Object methods. Master Object.keys(), values(), entries(), assign(), structuredClone(), hasOwn(), and groupBy() for object manipulation."
---
Expand Down
4 changes: 2 additions & 2 deletions docs/beyond/concepts/performance-observer.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Performance Observer: Monitor Web Performance in JavaScript"
title: "PerformanceObserver in JS"
sidebarTitle: "Performance Observer"
description: "Learn the Performance Observer API in JavaScript. Understand how to measure page performance, track Long Tasks, monitor layout shifts, and collect Core Web Vitals metrics for real user monitoring."
description: "Learn the Performance Observer API in JavaScript. Measure page performance, track Long Tasks, and collect Core Web Vitals metrics."
---

How do you know if your website is actually fast for real users? You might run Lighthouse once, but what about the thousands of visitors with different devices, network conditions, and usage patterns? Without real-time performance monitoring, you're flying blind.
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/property-descriptors.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Property Descriptors: Hidden Property Flags in JavaScript"
title: "Property Descriptors in JS"
sidebarTitle: "Property Descriptors: Hidden Property Flags"
description: "Learn JavaScript property descriptors. Understand writable, enumerable, configurable flags, Object.defineProperty(), and how to create immutable properties."
---
Expand Down
4 changes: 2 additions & 2 deletions docs/beyond/concepts/proxy-reflect.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Proxy and Reflect: Intercepting Object Operations in JavaScript"
title: "Proxy & Reflect in JavaScript"
sidebarTitle: "Proxy & Reflect: Intercepting Object Operations"
description: "Learn JavaScript Proxy and Reflect APIs. Understand how to intercept object operations, create reactive systems, implement validation, and build powerful metaprogramming patterns."
description: "Learn JavaScript Proxy and Reflect APIs. Intercept object operations, create reactive systems, and build powerful metaprogramming patterns."
---

What if you could intercept every property access on an object? What if reading `user.name` could trigger a function, or setting `user.age = -5` could throw an error automatically?
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/requestanimationframe.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "requestAnimationFrame: Smooth Animations in JavaScript"
title: "requestAnimationFrame Guide"
sidebarTitle: "requestAnimationFrame: Smooth Animations"
description: "Learn requestAnimationFrame in JavaScript for smooth 60fps animations. Understand how it syncs with browser repaint cycles, delta time, and animation loops."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/resize-observer.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "ResizeObserver: Detect Element Size Changes in JavaScript"
title: "ResizeObserver in JavaScript"
sidebarTitle: "ResizeObserver"
description: "Learn the ResizeObserver API in JavaScript. Detect element size changes, build responsive components, and replace inefficient window resize listeners."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/strict-mode.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Strict Mode: How to Catch Common Mistakes in JavaScript"
title: "JavaScript Strict Mode"
sidebarTitle: "Strict Mode: Catching Common Mistakes"
description: "Learn JavaScript strict mode and how 'use strict' catches common mistakes. Understand silent errors it prevents, how this changes, and when to use it."
---
Expand Down
4 changes: 2 additions & 2 deletions docs/beyond/concepts/tagged-template-literals.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Tagged Template Literals: Custom String Processing in JavaScript"
title: "Tagged Template Literals"
sidebarTitle: "Tagged Template Literals"
description: "Learn JavaScript tagged template literals. Understand how tag functions work, access raw strings, build HTML sanitizers, create DSLs, and use String.raw for file paths."
description: "Learn JavaScript tagged template literals. Understand tag functions, access raw strings, and build HTML sanitizers and DSLs."
---

How do libraries like GraphQL and Lit HTML let you write special syntax inside JavaScript template literals? How can a function intercept and transform template strings before they become a final value?
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/temporal-dead-zone.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Temporal Dead Zone: Variable Initialization in JavaScript"
title: "Temporal Dead Zone in JS"
sidebarTitle: "Temporal Dead Zone"
description: "Learn the Temporal Dead Zone (TDZ) in JavaScript. Understand why let, const, and class throw ReferenceError before initialization, and how TDZ differs from var."
---
Expand Down
4 changes: 2 additions & 2 deletions docs/beyond/concepts/typed-arrays-arraybuffers.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Typed Arrays: Working with Binary Data in JavaScript"
title: "Typed Arrays in JavaScript"
sidebarTitle: "Typed Arrays & ArrayBuffers"
description: "Learn JavaScript Typed Arrays and ArrayBuffers. Understand binary data handling, DataView, working with WebGL, file processing, and network protocol implementation."
description: "Learn JavaScript Typed Arrays and ArrayBuffers for binary data handling. Work with DataView, WebGL, and file processing."
---

How do you process a PNG image pixel by pixel? How do you read binary data from a WebSocket? How does WebGL render millions of triangles efficiently?
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/concepts/weakmap-weakset.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "WeakMap & WeakSet: Weak References in JavaScript"
title: "WeakMap & WeakSet in JavaScript"
sidebarTitle: "WeakMap & WeakSet"
description: "Learn JavaScript WeakMap and WeakSet. Understand weak references, automatic garbage collection, private data patterns, and when to use them over Map and Set."
---
Expand Down
2 changes: 1 addition & 1 deletion docs/beyond/getting-started/overview.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Beyond 33: Extended JavaScript Concepts"
sidebarTitle: "Overview"
description: "Go deeper into JavaScript with 29 advanced concepts that build on the original 33. Master topics like hoisting, proxies, observers, and performance optimization."
description: "Go beyond the original 33 with 29 advanced JavaScript concepts. Master hoisting, proxies, observers, and performance optimization."
---

You've learned the fundamentals. Now it's time to go deeper.
Expand Down
4 changes: 2 additions & 2 deletions docs/concepts/equality-operators.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1529,8 +1529,8 @@ Try to answer each question before revealing the solution:
<Card title="Primitive Types" icon="cube" href="/concepts/primitive-types">
Understanding JavaScript's fundamental data types
</Card>
<Card title="Value Types vs Reference Types" icon="clone" href="/concepts/value-reference-types">
How primitives and objects are stored differently in memory
<Card title="Primitives vs Objects" icon="clone" href="/concepts/primitives-objects">
How primitives and objects behave differently in JavaScript
</Card>
<Card title="Scope and Closures" icon="layer-group" href="/concepts/scope-and-closures">
Understanding where variables are accessible in your code
Expand Down
2 changes: 1 addition & 1 deletion docs/concepts/javascript-engines.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -879,7 +879,7 @@ distance(new Point(0, 0), new Point(3, 4)) // All Points, same shape
<Card title="Primitive Types" icon="cube" href="/concepts/primitive-types">
How V8 represents and optimizes different value types
</Card>
<Card title="Value vs Reference Types" icon="code-branch" href="/concepts/value-reference-types">
<Card title="Primitives vs Objects" icon="code-branch" href="/concepts/primitives-objects">
How the engine stores primitives vs objects in memory
</Card>
</CardGroup>
Expand Down
4 changes: 2 additions & 2 deletions docs/concepts/object-creation-prototypes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ The answer is the **[prototype chain](https://developer.mozilla.org/en-US/docs/W
</Info>

<Warning>
**Prerequisites:** This guide assumes you understand [Primitive Types](/concepts/primitive-types) and [Value vs Reference Types](/concepts/value-reference-types). If objects and their properties are new to you, read those guides first!
**Prerequisites:** This guide assumes you understand [Primitive Types](/concepts/primitive-types) and [Primitives vs Objects](/concepts/primitives-objects). If objects and their properties are new to you, read those guides first!
</Warning>

---
Expand Down Expand Up @@ -1066,7 +1066,7 @@ function Player(name) {
<Card title="Inheritance and Polymorphism" icon="sitemap" href="/concepts/inheritance-polymorphism">
Explore advanced inheritance patterns and polymorphism in JavaScript
</Card>
<Card title="Value vs Reference Types" icon="copy" href="/concepts/value-reference-types">
<Card title="Primitives vs Objects" icon="copy" href="/concepts/primitives-objects">
Understand the difference between primitives and objects, key background for prototypes
</Card>
</CardGroup>
Expand Down
4 changes: 2 additions & 2 deletions docs/concepts/primitive-types.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1012,8 +1012,8 @@ JavaScript has some famous "weird parts" that every developer should know. Most
## Related Concepts

<CardGroup cols={2}>
<Card title="Value Types vs Reference Types" icon="clone" href="/concepts/value-reference-types">
How primitives and objects are stored differently in memory
<Card title="Primitives vs Objects" icon="clone" href="/concepts/primitives-objects">
How primitives and objects behave differently in JavaScript
</Card>
<Card title="Type Coercion" icon="shuffle" href="/concepts/type-coercion">
How JavaScript converts between types automatically
Expand Down
Loading