JS Docs

Js (ECMAScript) - объектно-ориентированный язык с функциями первого класса

Вопросы

1. Переменные

   1. Какие существуют?
   2. В чем их отличие?
   3. Где какие применять?
   4. Нейминг переменных?
   5. var и свойства глобального объекта?

2. Типы данных

   1. Сколько их?
   2. Как называются?
   3. Какие из них примитивные?
   4. Объекты-обертки для примитивов?
   5. Чем отличаются непримитивные?
   6. Преобразование(приведение) типов данных?
      1. HINT'ы объекта

3. Операторы

   1. Какие есть (логические и арифметические)?
   2. Чем отличаются декремент от инкремента?

4. Циклы

   1. Какие есть?
   2. Возможные синтаксические конструкции?
   3. continue & break ?

5. Функции

   1. Отличия и сходства Expression, Declaration, Arrow, new Function?
   2. Все о return?
   3. Параметры по умолчанию?
   4. Декомпозиция пропсов?
   5. Конструкторы и new?
   6. new.target?
   7. Контекст выполнения (execution context).?
   8. (...args) остаточные параметры и arguments?
   9. Отличия Array.from от оператора spread [...]?
   10. () => {} и arguments?
   11. (...someprops) –– оператор расширения?
   12. immediately-invoked function expressions (IIFE) ?
   13. Контекстное имя (.name) ?
   14. length ?
   15. Named Function Expression (NFE) ?
   16. new Function([arg1, arg2, ...argN], functionBody)
       • Что передавать в body?
       • Что записывается в [[Environment]] для таких ф-й?
   17. Функции-декораторы(обертки)?
   18. func.call(context, arg1, arg2, ...)?
   19. func.call(context, ...arguments)?
   20. func.apply(context, arguments)?
   21. «Перенаправление вызова» (call forwarding)?
   22. Заимствование метода –– [].join.call(arguments) ?
   23. func.bind(context, [arg1], [arg2], ...) ?
   24. console.log(f.bind(obj))?
   25. Фиксация привязки контекста ?

6. Замыкания

   1. LexicalEnvironment:
      • Что это?
      • У чего оно есть?
      • Свойство [[Environment]]?
      • Каково LexicalEnvironment в начале выполнения скрипта?
        1. для переменных
        2. для FunctionDeclaration
      • Внешнее и внутреннее?
      • Environment Record?
      • Ссылка на внешнее лексическое окружение? (outer)
      • Ссылка на внешнее окружение у глобального LexicalEnvironment?
   2. Блоки кода и циклы ?

7. Объекты

   1. Как можно создать?
   2. Если хочется создать свойство с 2-мя словами: "длина хобота" , что делать?
   3. Как проверить существование свойства? (Все варианты)
   4. Зарезервированные слова?
   5. Порядок свойств в объекте?
   6. Копирование по ссылке?
   7. Копирование объектов? (Все варианты)
   8. Глубокое клонирование?
   9. Итерируемые объекты (Symbol.iterator)?
   10. Псевдомассивы?
   11. Object.entries/values/keys/fromEntries?
   12. Как сделать односторонний Связный Список?
   13. Как сделать двусторонний Связный Список?
   14. Дескриторы:
       • Какие флаги есть?
       • Как получить?
       • Как изменить?
       • Особенности оверрайтинга встроенных функций?
       • Как работает присваивание с дескрипторами?
   15. Свойства-аксессоры (get, set):
       • delete?
       • defineProperty?
       • свойства с _?

8. Сборка мусора

   1. Что это?
   2. Принцип достижимости?
   3. Алгоритм сборки мусора mark-and-sweep?
   4. В замыканиях?

9. Symbol

   1. Что это?
   2. Зачем нужны?
   3. Преобразование в другие типы?
   4. Перебор свойств?
   5. Копирование объектов, содержащие Symbol поля?
   6. Глобальные символы?

10. this

    1. Reference type?
    2. Стрелочные функции?
    3. В модулях?

11. Число

    1. Краткое представление больших чисел?
    2. Округление?
    3. Внутреннее представление?
    4. Перечисли все методы

12. Строка

    1. Трюк с indexOf и побитовым НЕ ?
    2. Перечисли все методы
    3. Symbol.iterator?
    4. Array.from?
    5. spread operator?
    6. "Суррогатная пара" -- смайлик, "красивенькая буковка"?

13. Массивы

    1. Методы массива и их "О Большое"?
    2. Внутренняя оптимизация массива?
    3. Отличие for..in от for..of?
    4. length?
    5. toString?
    6. Проверка на массив?
    7. thisArg?
    8. Array.from?
    9. Все способы конвертировать псевдомассив в массив (5)? https://habr.com/ru/post/336136/

14. Map

    1. Отличие от объекта?
    2. Методы?
    3. Хранение ключей?
    4. Порядок вставки и чтения элементов?
    5. объект <-> Map (преобразование)?
    6. WeakMap?

15. Set

    1. Отличие от объекта?
    2. Методы?
    3. WeakSet?

16. Деструкруризация

    1. В массиве?
    2. В объекте?
    3. В пропсах?
    4. В пропсах если не передан пропс?

17. Date

    1. timestamp?
    2. timestamp для Date.parse?
    3. С чего начинается отсчет в getDay() ?
    4. Автоисправление даты: что делает JS когда в Date передаешь 32 число месяца?
    5. Что такое Бенчмарки?

18. Формат JSON – JSON-форматированный или сериализованный объект

    1. Краткая история создания?
    2. JSON.stringify(value, [replacer, space]) ?
    3. replacer:
       • Что в него можно передавать?
       • Первый вызов функции – что в него передается?
    4. spacer:
       • Что в него можно передавать?
       • Что передать в replacer, если не хотим фильтровать, а только указать кол-во пробелов?
    5. JSON.parse(str, [reviver])?
    6. Какие типы данных поддерживает, а какие пропускает?
    7. Циклические ссылки?
    8. toJSON?
    9. Комментарии?

19. Интерпритатор

    1. Разогрев перед использованием функций-бенчмарок?
    2. Максимальная глубина рекурсии?

20. Браузер

    1. globalThis?
    2. Что такое полифил?

21. Прототипное наследование

    1. Свойство [[Prototype]]?
    2. proto?
    3. Чему может быть равен proto?
    4. for..in / Object.keys?
    5. Производительность поиска унаследованных свойств?
    6. Как работает prototype для функций new?
    7. F.prototype.constructor и f.constructor ?
    8. Как изменить prototype, не удалив наследование от текущей функции?
    9. Как клонировать объект вместе с дескриторами?

22. Классы перечитать!!!

    1. Синтаксис?
    2. Класс – разновидность функции?
    3. Прототипный конструктор?
    4. Где находятся методы в классе, по аналогии с функциями?
    5. [[FunctionKind]]: "classConstructor" ?
    6. Можно ли вызвать без new?
    7. Enumerable методов класса?
    8. Class Expression?
    9. Class в return'e?
    10. Геттеры / Сеттеры?
    11. Свойства и методы в prototype?
    12. Наследование?
    13. После extends разрешены любые выражения?
    14. Переопределение и вызов родительских методов в дочерних?
    15. super и () => {}?
    16. Особенность создания классов-потомков и super?
    17. Наследующий класс и [[ConstructorKind]]: "derived"?
    18. Зацикленное выполнение функции родителя в объекте с --proto-- с вызовом из дочерней?
    19. Устройство super, [[HomeObject]]?
    20. Привязка метода к объекту из-за [[HomeObject]]?
    21. ПМетоды, а не свойства-функции в объекте и [[HomeObject]]?
    22. Статические методы?
    23. Статические свойства?
    24. Чему аналогична статика?
    25. Приватные поля # ?
    26. Symbol.species ?
    27. instanceof ?
    28. Symbol.hasInstance ?
    29. Symbol.toStringTag ?
    30. Object.assign и примеси для классов ?

23. try..catch

    1. Ошибка парсинга?
    2. Асинхронность?
    3. Свойства объекта ошибки?
    4. Catch без переменной?
    5. throw?
    6. Проброс ошибки?
    7. finally?
    8. finally и return?

24. Promise, async/await

    1. Что это?
    2. Внутренние свойства?
    3. Можно ли изменять состояние промиса дважды и более?
    4. Что рекомендуется класть в reject()?
    5. then, catch, finally(отличия от остальных)?
    6. Thenable объекты/классы?
    7. Невидимый try..catch вокруг промиса?
    8. Какие ошибки обрабатывает catch?
    9. Методы Promise?
    10. Полифил для allSettled?
    11. Микрозадачи?
    12. Макрозадачи?
    13. Async / Await?
        1. что возвращает ф-я с async?
        2. что делает await с интерпретатором?
        3. Обработка ошибок?
        4. await c for..of?

25. Генераторы

    1. Что это?
    2. Синтаксис?
    3. Зачем?

26. Импорт/экспорт

    1. Что это?
    2. Синтаксис?
    3. Зачем?
    4. Исполнение скрипта модуля?
    5. This?
    6. Точка с запятой после класса/функции?

27. MutationObserver

    1. Что это?
    2. Синтаксис?
    3. Зачем?
    4. disconnect?

28. Proxy & Reflect

    1. Что это Proxy?
    2. Синтаксис Proxy?
    3. Зачем?
    4. Ловушка get(target, prop, receiver)?
    5. Ловушка set(target, prop, value, receiver)?
    6. Инварианты для ловушек?
    7. Список ловушек

       [[Get]]	get	чтение свойства
       [[Set]]	set	запись свойства
       [[HasProperty]]	has	оператор in
       [[Delete]]	deleteProperty	оператор delete
       [[Call]]	apply	вызов функции
       [[Construct]]	construct	оператор new
       [[GetPrototypeOf]]	getPrototypeOf	Object.getPrototypeOf
       [[SetPrototypeOf]]	setPrototypeOf	Object.setPrototypeOf
       [[IsExtensible]]	isExtensible	Object.isExtensible
       [[PreventExtensions]]	preventExtensions	Object.preventExtensions
       [[DefineOwnProperty]]	defineProperty	Object.defineProperty, Object.defineProperties
       [[GetOwnProperty]]	getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor, for..in, Object.keys/values/entries
       [[OwnPropertyKeys]]	ownKeys	Object.getOwnPropertyNames, Object.getOwnPropertySymbols, for..in, Object.keys/values/entries

    8. Reflect + правильный контекст + receiver
    9. Ограничения: Proxy и внутренние слоты Map, Set, Date, Promise, #field?
    10. Решение: Reflect.get(...arguments)
    11. Прокси != оригинальный объект
    12. Прокси и ===
    13. let {proxy, revoke} = Proxy.revocable(object, {})

29. setTimeout | setInterval

    1. setTimeout(func | code, [delay], [arg1], [arg2], ...) ?
    2. setInterval(func | code, [delay], [arg1], [arg2], ...) ?
    3. timerId и отмена?
    4. Что можно передать вместо функции ?
    5. Минимальная задержка вложенных таймеров в браузере?
    6. По каким причинам таймер может замедлятся?

30. RegExp

    1. Синтаксис ?
    2. Флаги i, g, (m, s, u, y) ?
    3. str.match ?
    4. str.replace ?
    5. result[i], result.length, result.index, result.input ?
    6. Что вернется если нет совпадения ?
    7. regexp.test(str) ?
    8. Символьные классы:
       • \d
       • \s
       • \w
       • . – если без флага "s", то не видит "\n"
    9. Обратные символьные классы:
       • \D
       • \S
       • \W - не буквы из латиницы, не знак подчёркивания и не цифра. В частности, русские буквы принадлежат этому классу.
    10. Юникодные свойства; в каких браузерах не работают пока что?
        • \p{Letter}
        • \p{Hex_Digit}
        • \p{sc=Cyrillic}
        • \p{Currency_Symbol} или \p{Sc}
    11. Якоря "^" и "$"
    12. Якоря в многострочном режиме?
    13. Граница слова \b ?
    14. Экранированние символа \ ?
    15. new RegExp и \ ?
    16. Наборы [abc] ?
    17. Диапазоны [a-z] ?
    18. Исключающие диапазоны [^a-z] ?
    19. Квантификаторы +, *, ? и {n} ?
    20. Жадный режим(по умолчанию) и Ленивый "?"
    21. Скобочная группа
    22. Содержимое скобок в match если нет флага "g"
    23. Именованные группы
    24. Скобочные группы при замене
    25. Исключение из запоминания через "?:"
    26. Альтернация (или) |
    27. Опережающая проверка X(?=Y)
    28. Негативная опережающая проверка X(?!Y)
    29. Ретроспективная проверка
        • (?<=Y)X
        • Негативная (?
    30. Поиск на заданной позиции, флаг "y" и regexp.lastIndex

31. Event loop

    1. Что такое:
       • event loop
       • call stack
       • callback queue( macrotask queue)
       • microtask queue
       • heap
       • runtime
       • concurrency
       • render queue
    2. ?

32. Race conditions

    1. Что это?

33. Разное

    1. eval()
    2. Мутабельность данных и иммутабельность

---

Конспект

Event loop

1. Call stack - структура данных которая хранит инфу о том где мы сейчас в программе находимся
2. Размер Call stack 2^14 (16384). После переполнения очищается
3. Первая функция call stack - main() и она анонимная
4. WebAPI(C++API для бекенд) - по сути потоки
5. Когда какой-то WebAPI заканчивает работу, он помещает callback в callback queue
6. Если call stack пуст, то event loop добавляет в него все задачи Microtask queue и одну очередную задачу из macrotask queue
7. setTimeout(cb, 0) - здесь ноль не равен нулю, а 4.7 миллисекундам

Render queue

1. Алгоритм
   1. requestAnimationFrame (safari - пидорас и ставит rAF последним)
   2. Style calculation
   3. Layout calculation
   4. Block painting (отрисовка пикселей)

Функции

1. Контекст выполнения (execution context).
   • Специальная внутренняя структура данных, которая содержит информацию о вызове функции. Она включает в себя конкретное место в коде, на котором находится интерпретатор, локальные переменные функции, значение this (мы не используем его в данном примере) и прочую служебную информацию.
   • Один вызов функции имеет ровно один контекст выполнения, связанный с ним.
   • Когда функция производит вложенный вызов, происходит следующее:
     1. Выполнение текущей функции приостанавливается.
     2. Контекст выполнения, связанный с ней, запоминается в специальной структуре данных – стеке контекстов выполнения.
     3. Выполняются вложенные вызовы, для каждого из которых создаётся свой контекст выполнения.
     4. После их завершения старый контекст достаётся из стека, и выполнение внешней функции возобновляется с того места, где она была остановлена.
2. Замыкание – это функция, которая запоминает свои внешние переменные и может получить к ним доступ. В некоторых языках это невозможно, или функция должна быть написана специальным образом, чтобы получилось замыкание. Но, как было описано выше, в JavaScript, все функции изначально являются замыканиями (есть только одно исключение, про которое будет рассказано в Синтаксис "new Function").
   То есть, они автоматически запоминают, где были созданы, с помощью скрытого свойства [[Environment]] и все они могут получить доступ к внешним переменным.
   Когда на собеседовании фронтенд-разработчик получает вопрос: «что такое замыкание?», – правильным ответом будет определение замыкания и объяснения того факта, что все функции в JavaScript являются замыканиями, и, может быть, несколько слов о технических деталях: свойстве [[Environment]] и о том, как работает лексическое окружение.
3. Чистая функция – На фундаментальном уровне, любая функция, которая не изменяет входные данные, не зависит от внешнего состояния (базы данных, DOM или глобальной переменной) и возвращает один и тот же результат для одинаковых входных данных является чистой функцией.

Race conditions

1. Когда JS изменяет порядок вызова функций

---

Практические функции

Декораторы

1. Spy
2. Delay
3. Debounce
4. Throttling
5. Carrying (https://learn.javascript.ru/currying-partials)

---

Алгоритмы

Рандомизация

1. Фишера-Йетса

Множества

1. Число сочетаний
2. Решето Эратосфена для простых чисел

---

Принципы программирования

1. SOLID

   1. S
   2. O
   3. L
   4. I
   5. D

2. KISS

3. DRY

4. YAGNI

---

Парадигмы программирования

1. React

   • Container & Presentational components method
   • Callback render