leonardomso/33-js-concepts

Features

• JIT Compilers - The engine translates high-level code into optimized machine instructions at runtime to improve performance through speculative optimization and caching.
• Prototype-Based Inheritance - Objects delegate behavior and properties to parent objects through a hidden internal link, forming a chain for property lookup.
• Language Concept Guides - Deepening technical knowledge of core language mechanics, memory management, and browser APIs through structured learning paths and examples.
• JavaScript Concepts - Arrow functions were introduced in ES6 partly to solve `this` confusion. They work fundamentally differently. ### How Arrow Functions Handle `this` 1. **No own `this`**: Arrow functions don't create their own `this` bind
• Event Loop Concurrency - The runtime manages asynchronous operations by offloading tasks to the browser environment and coordinating their completion via a task queue.
• Algorithm Complexity Guides - Follow these steps to determine your code's complexity: What variable represents n? Usually it's array length or a number parameter. * One loop over n elements = O(n) * Nested loops = multiply: O(n) × O(n) = O(n²) * Loop
• Algorithm References - Visual reference for time and space complexity of common algorithms and data structures. Bookmark this one. Comprehensive GitHub repo with 190k+ stars. Every algorithm implemented in JavaScript with explanations. Detaile
• Array Manipulation Concepts - The **reduce()** method executes a "reducer" function on each element, resulting in a single output value. It's the most powerful (and most confusing) of the three. ### What is reduce() in JavaScript? The `reduce()` meth
• Asynchronous Programming Tutorials - - **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**
• Educational Knowledge Bases - A curated collection of technical concepts and learning paths designed to help developers master core programming language features.
• Object-Oriented Programming Concepts - - **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 Java
• Algorithm Guides - A comprehensive guide to data structures and algorithmic complexity, providing visual references and implementation examples for software engineering interviews.
• JavaScript Language Concepts - These three methods give you explicit control over `this`. They're built into every function in JavaScript. ### Quick Comparison | Method | Invokes Function? | Arguments | Returns | | --------- | ----------------- | ----
• Language 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 Java
• Technical Reference Libraries - A structured repository of documentation and code examples covering language mechanics, browser APIs, and common development patterns.
• Binary Data Abstractions - The runtime provides immutable, file-like containers for raw binary data that can be referenced via memory-efficient URLs or file interfaces.
• Database Transactions - Transactions are a critical concept in IndexedDB. They ensure data integrity by grouping operations together. ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ TRANSACTION LIFECYCLE │ ├───
• Transactional Databases - The browser provides a low-level, asynchronous NoSQL system that uses object stores and explicit transactions to ensure data integrity.
• Browser APIs - - **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 HTT
• IndexedDB Stores - An **object store** is like a table in a traditional database. It holds a collection of records, and each record must have a unique key. ### Creating Object Stores You create object stores inside `onupgradeneeded`: ```ja
• Execution Contexts - The **`this`** keyword is a special identifier that JavaScript automatically creates in every function execution context. It refers to the object that is currently executing the code, typically the object that "owns" the
• Standard Library Methods - The **filter()** method creates a new array with only the elements that pass a test. Your callback function returns `true` to keep an element or `false` to exclude it. ### What is filter() in JavaScript? The `filter()` m
• Execution Models - - **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 o
• Functional Programming Methods - These three methods are the workhorses of functional programming in JavaScript. They let you transform, filter, and aggregate data without writing explicit loops and without mutating your original data. According to the
• Client-Side Databases - All data operations in IndexedDB happen inside **transactions**. A transaction ensures that a group of operations either all succeed or all fail together. ### Creating (Add) ```javascript theme={null} function addUser(db
• Database Connections - Before you can store or retrieve data, you need to open a connection to a database. If the database doesn't exist, IndexedDB creates it for you. ```javascript theme={null} // Open (or create) a database named "MyApp" at
• Event Handling Tutorials - - **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*
• JavaScript Execution Context Guides - When JavaScript needs to figure out what `this` refers to, it follows these rules **in order of priority**. Higher priority rules override lower ones. ``` BINDING RULES (Highest to Lowest Priority) ┌─────────────────────
• 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 Zon
• Searching Algorithms - ### Linear Search - O(n) Check each element one by one. Simple but slow for large arrays. ```javascript theme={null} function linearSearch(arr, target) { for (let i = 0; i < arr.length; i++) { if (arr[i] === target) retu
• Web APIs - A **Blob** (Binary Large Object) is an immutable, file-like object that represents raw binary data. According to the W3C File API specification, a Blob is a container that can hold any kind of data: text, images, audio,
• Property Descriptors - Objects use internal attribute flags to define the configurability, enumerability, and writability of individual properties at the engine level.
• Algorithmic Patterns - These patterns solve many algorithm problems efficiently. ### Two Pointers - O(n) Use two pointers moving toward each other or in the same direction. Great for sorted arrays and finding pairs. ```javascript theme={null}
• Functional Programming Concepts - - **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 f
• Error Handling Mechanisms - The **`try...catch`** statement is JavaScript's primary tool for handling errors. As MDN documents, this statement has been part of JavaScript since ECMAScript 3 (1999) and remains the standard mechanism for synchronous
• Resiliency Patterns - ### Retry Pattern Automatically retry failed operations, useful for flaky network requests: ```javascript theme={null} async function fetchWithRetry(url, retries = 3) { for (let i = 0; i < retries; i++) { try { const res
• Web Platform Documentation - A technical resource detailing browser-native APIs, storage mechanisms, and event-driven architectures for modern client-side application development.
• Blob Handling - Modern browsers support Promise-based methods directly on Blob objects, which are often cleaner than FileReader: ```javascript theme={null} const blob = new Blob(['Hello, World!'], { type: 'text/plain' }) // Read as text
• 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** L