🗺️ JavaScript

Самый большой раздел vault'а. Сначала Основы → Функции → ООП → Асинхронность → DOM → Паттерны.

С чего начать

1. Введение в JavaScript
2. JavaScript -- что такое и где работает
3. Типы данных
4. Переменные
5. Объекты
6. Массивы
7. JS функции основы
8. Замыкания (Closures)

Основы

Типы данных

• Типы данных · Number · BigInt · Boolean · String · null и undefined
• Числа -- Number, Math, parseInt, parseFloat · Строки -- методы и шаблонные литералы · JS строки
• Преобразование типов · Приведение типов -- явное и неявное

Массивы

• Массивы · JS массивы основы
• Методы массивов -- push, pop, shift, unshift · Методы массивов -- map, filter, reduce · Методы массивов -- find, some, every, includes

Объекты и Symbol

• Объекты · JS объекты основы · Сравнение объектов -- ссылки vs значения
• Symbol · JS Symbol и итераторы · Symbol и приватность · Symbol.toPrimitive и Symbol.iterator

Область видимости

• Scope · Глобальная и локальная область видимости · Блочная область видимости -- let и const
• Hoisting -- поднятие объявлений · Temporal Dead Zone (TDZ) · Reference и Lexical Environment · Strict mode

Операторы и условия

• Операторы · JS операторы · Условия · Условные конструкции -- if, else, switch
• Spread и Rest · Деструктуризация · Optional chaining и nullish coalescing

Циклы

• Циклы · JS циклы · break и continue

Прочее

• 1, 2, 3 · JS Производительность

Современный JS

• ES6+ -- обзор нововведений по годам · Proxy и Reflect · Temporal API
• Record и Tuple (proposal) · Tagged Template Literals · WeakRef и FinalizationRegistry
• Three Phases of JS Execution · V8 Hidden Classes (Shapes) · V8 Element Kinds (типы массивов)

Функции

Базовые формы

• JS функции основы · Function Declaration · Function Expression · Arrow Function · IIFE · Callback
• Оператор return · Параметры и аргументы · Значения по умолчанию
• Деструктуризация массивов · Деструктуризация объектов · Функции -- именование и лучшие практики

Замыкания

• Замыкания (Closures) · Замыкания -- funarg-проблема · Замыкание в цикле -- распространённая ошибка

Каррирование и композиция

• Каррирование · Partial Application

Функциональные приёмы

• Higher-Order Functions · Функции, возвращающие функции · Чейнинг функций · Декораторы
• Мемоизация · Рекурсия · Хвостовая рекурсия · Thunks · Functor и Applicative

Контекст (this)

• this · this в обычных и стрелочных функциях · this в callback и API
• bind · call и apply · Потеря контекста -- типичные случаи

ООП и прототипы → _MOC ООП

• Прототипы · Прототипная цепочка · __proto__ vs prototype
• Object.create() · Delegation Chain
• Классы · Конструкторы · constructor -- инициализация
• Наследование · Пять способов наследования · Наследование vs композиция
• Инкапсуляция · Полиморфизм · Абстракция
• Миксины (Mixins) · Множественное наследование -- проблемы и решения
• Composition Pattern · Constructor Pattern
• Property Descriptors · Внутренние методы Object (спецификация)
• Методы прототипа -- hasOwnProperty, isPrototypeOf
• Оператор instanceof · Интроспекция и рефлексия
• Поведение vs данные в JS · Анемичная модель и ООП для домена
• Ассоциация, агрегация, композиция
• Номинальная vs структурная типизация
• Антипаттерны ООП

Асинхронность

Promise

• Promise · Thenable · Promise.withResolvers · Deferred · Future
• Cancellable Promise · Promisify, callbackify, asyncify

async/await + генераторы

• async-await · Async stack trace · Async композиция и коллекторы
• JS генераторы · Асинхронные генераторы

Event Loop + таймеры

• Event Loop · setTimeout и setInterval · AbortController

Прочее

• Callbacks · Error handling · Fetch API · Поведенческие контракты JS

DOM

Поиск и навигация

• DOM vs HTML -- в чём разница · DOM дерево · DOM-дерево -- узлы и типы узлов · document и window · BOM
• DOM поиск элементов · Поиск элементов · getElementById, getElementsByClassName · querySelectorAll и NodeList
• Навигация по DOM · parentElement, children, siblings · firstChild, lastChild, nextSibling
• Разница между childNodes и children · closest -- поиск родителя

Манипуляция

• Манипуляция DOM · DOM создание и изменение элементов · createElement и createTextNode
• append, prepend, before, after · insertAdjacentHTML · cloneNode -- клонирование
• textContent, innerHTML, innerText · DOM атрибуты и свойства · Атрибуты -- getAttribute, setAttribute
• data-атрибуты (dataset) · classList -- add, remove, toggle, contains · style -- инлайн-стили через JS
• DOM стили и размеры · getBoundingClientRect -- размеры и позиция
• DocumentFragment -- оптимизация · Batch DOM updates

События

• События · DOM события клавиатуры и мыши · События клавиатуры -- keydown, keyup
• События мыши -- click, mouseover, mouseenter · События фокуса -- focus, blur · Событие scroll
• События загрузки -- DOMContentLoaded, load · DOM события форм · События формы -- submit, input, change
• Работа с формами через JS · Constraint Validation API · Кастомная валидация форм
• Всплытие и погружение · Делегирование событий · preventDefault и stopPropagation
• Пользовательские события -- CustomEvent · Кастомный Drag and Drop · IntersectionObserver

Браузерные API → _MOC Браузерные API

Сеть и связь

• Fetch API · WebSocket клиент · WebRTC · Service Worker · PWA — Progressive Web App
• Cache API · BroadcastChannel · Web Locks · URLSearchParams

Хранилища и файлы

• Web Storage -- localStorage и sessionStorage · IndexedDB · OPFS — Origin Private File System
• Clipboard API · FormData API · FormData и multipart

Медиа

• HTMLAudioElement · HTMLVideoElement · Web Audio API

Наблюдатели и производительность

• MutationObserver -- наблюдение за DOM · ResizeObserver -- изменение размера
• Performance API · requestAnimationFrame · Web Workers

Утилиты и окружение

• Console API · DOMParser · History API · Geolocation API · Web Crypto API
• Drag and Drop API · window navigator location · window.matchMedia · DOM — селекторы и манипуляции

Хранение данных

• Cookies · Web Storage -- localStorage и sessionStorage · IndexedDB

Модули

• Модули -- import и export · ES Modules · CommonJS · CommonJS vs ES Modules
• Динамический импорт -- import() · Подключение скриптов -- script тег

Обработка ошибок

• JS обработка ошибок · try...catch...finally · Типы ошибок -- Error, TypeError, ReferenceError
• Пользовательские ошибки · Обработка ошибок в async коде
• JS отладка в DevTools · Отладка -- console, debugger, breakpoints

Работа с данными

• JSON · Map и Set · WeakMap и WeakSet · Структуры данных
• Итераторы и протокол итерации · Регулярные выражения
• Дата и время · Date и Intl -- интернационализация · Intl API
• Структурированное клонирование -- structuredClone

Типичные решения

• Debounce и Throttle для DOM-событий · Копирование объектов · Ленивые вычисления
• Приватность через замыкания · Трамплин (Trampoline)

Canvas API

• Canvas API основы · Рисование и анимация

Функциональное программирование

Основы ФП

• Функциональное программирование на JS (Шемсединов) · Парадигмы · Парадигмы программирования (ООП vs ФП)
• Чистые функции · Побочные эффекты · Иммутабельность · Иммутабельность и функции
• Функции высшего порядка · Referential Transparency · Лямбда-исчисление и ФП история
• Надёжность ФП-кода и типизация · Coupling, Cohesion и паттерны в ФП
• Ownership и Traits в JS · ФП и SOLID GRASP GoF · Talks о ФП (Новый год и ФП)

Композиция и каррирование

• Композиция функций (pipe, compose) · Частичное применение и каррирование (Шемсединов)
• Асинхронная композиция функций · Actor Compose (композиция актора)
• Адаптеры asyncify, promisify, callbackify · callbackify и class adapter
• Замыкания, примеси и обёртки · Линзы (Lenses) -- ФП getter и setter

Контейнеры и Монады

• Монады -- основы для JS-разработчика · Functors, Monads и Applicatives (Шемсединов)
• Контейнерные типы Result Maybe Either · IO монада и изоляция эффектов · Callable Thenable Iterable Observable

Реактивность и потоки

• Реактивное программирование основы · Observer Observable паттерн
• RxJS и потоки событий · Node.js streams и pipe

Паттерны → отдельная карта _MOC Паттерны

Связанные

• _MOC HTML · _MOC CSS · _MOC Node.js · _MOC TypeScript · _MOC SPA