Частые вопросы на собеседовании JS

JavaScript как клонировать обьект?

Обьекты хранятся и копируются по ссылке. Примитивные типы: строки, числа, логические значения – присваиваются и копируются по значению. Два объекта равны только в том случае, если это один и тот же объект.

let user = {
  name: "Иван",
  age: 30
};

let clone = {}; // новый пустой объект

// скопируем все свойства user в него
for (let key in user) {
  clone[key] = user[key];
}

// теперь в переменной clone находится абсолютно независимый клон объекта
clone.name = "Пётр"; // изменим в нём данные

alert( user.name ); // в оригинальном объекте значение свойства `name` осталось прежним – Иван.

Или через Object.assign

let user = {
  name: "Иван",
  age: 30
};

let clone = Object.assign({}, user);

Если объект содержит внутри еще объекты то нужно использовать глубокое клонирование. Мы можем реализовать глубокое клонирование, используя рекурсию. Или, чтобы не изобретать велосипед, использовать готовую реализацию — метод _.cloneDeep(obj) из JavaScript-библиотеки lodash.


Что такое spread?

Этот опреатор появился в ES6

  1. Синтаксис оператора spread это просто три точки: …
  2. Оператор spread позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов.
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr); // [1, 2, 3, 4, 5, 6]

// пример с поиском максимального значения
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max); // 8

// пример копирования массива 
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);

// преобразования строки в массив 
var str = "hello";
var chars = [...str];
console.log(chars);


Что такое event loop js и как он работает?

https://developer.mozilla.org/ru/docs/Web/JavaScript/EventLoop

Что такое js замыкание и как он работает?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Closures


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

https://developer.mozilla.org/ru/docs/Learn/JavaScript/Asynchronous

Делегирование в браузере

Если у вас есть много элементов, события на которых нужно обрабатывать похожим образом, то не стоит присваивать отдельный обработчик каждому.

Вместо этого, назначьте один обработчик общему родителю. Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.

Эта техника называется делегированием и очень активно применяется в современном JavaScript.

На примере меню
Делегирование событий позволяет удобно организовывать деревья и вложенные меню.

Давайте для начала обсудим одноуровневое меню:

<ul id="menu">
  <li><a href="/php">PHP</a></li>
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/flash">Flash</a></li>
</ul>

Клики по пунктам меню будем обрабатывать при помощи JavaScript. Пунктов меню в примере всего несколько, но может быть и много. Конечно, можно назначить каждому пункту свой персональный onclick-обработчик, но что если пунктов 50, 100, или больше? Неужели нужно создавать столько обработчиков? Конечно же, нет!


Расскажите про событийную модель js

Существуют четыре варианта “навешивания” обработчиков на определенное событие

1 псевдопротокол javascript:

<a href="javascript:alert('got click!')">link</a>

2 inline-метод

<a href="someurl.html" onclick="alert('got click!')">link</a>

3 установка element.onclick в js

var handler = function(){ alert('clicked'); };
document.getElementById('myhref').onclick = handler;

4 addEventListener/attachEvent

// addEventListener:

elem.addEventListener('click', handler, false);
//attachEvent:

elem.attachEvent('onclick', handler);

Если у элемента несколько обработчиков одного события, при возникновении события они будут запущены в том же порядке, в каком были добавлены.

Событийная модель, в которой браузер выстраивает очередь обработчиков от целевого элемента, инициировавшего событие до корневого элемента document, называется bubbling-моделью (bubble, англ., – пузырь).

Событие как бы “всплывает” по иерархии документа от элемента, вызвавшего его и до корня. При прохождении каждого родительского элемента браузер проверяет, не установлен ли у этого родителя обработчик события такого же типа, и если установлен, вызывает его.

Событийная модель, в которой браузер выстравивает очередь обработчиков от корневого элемента document до целевого элемента (инициировавшего событие), называется capturing-моделью (capturing, англ., – захват). При прохождении каждого элемента вниз по иерархии браузер проверяет наличие обработчика события такого же типа, и если обработчик есть, вызывает его.


Фаза погружения в js

https://learn.javascript.ru/bubbling-and-capturing

Что такое html доступность?

https://developer.mozilla.org/ru/docs/Learn/Accessibility/What_is_accessibility


Что такое Идемпотентность?

https://developer.mozilla.org/ru/docs/Glossary/Idempotent


Html entities?

https://www.w3schools.com/html/html_entities.asp

Как работает position: sticky?

Ранее существовало четыре типа позиционирования: staticrelativeabsolute и fixed.

Основное различие между static и relativeabsolute и fixed в том, какое место они занимают в потоке документа (DOM). Элементы с позицией static и relative сохраняют своё естественное положение в потоке документа, в то время как absolute и fixed «вырываются» из потока документа и становятся плавающими.

Новое значение sticky похоже на все предыдущие значения сразу.

.some-component {
  position: sticky;
  top: 0px;
}


Способы изоляции стилей в CSS?

CSS-стили имеют глобальную обрасть видимости. Не важно где объявлен стиль, он будет применён сразу ко всей html-странице. Пока html-код небольшой, особых проблем не возникает, поскольку элементарно решается за счёт именования css-классов. Но, как только html становится побольше, то именование классов должно быть более осмысленным, иначе разобраться в коде будет проблематично.

Но это ещё не всё. Существуют блоки, которые довольно сложны по своей html-структуре. Например шапка сайта может содержать в себе flex-сетку со множеством вложенных функциональных блоков (меню, логотипы, ссылки, иконки и т.д.). Скорее всего такой блок будет оформлен в виде отдельного html/php-файла, который просто подключается на странице. Но, если html-разметку мы можем разделить по файлам и верстать индивидуально, то с css-стилями такой «финт не прокатит», поскольку, опять же css имеет глобальную область видимости.

  1. CSS каскадность
  2. Уникальность именования классов
  3. Утилитарные классы


Микро и макро таски в js

https://learn.javascript.ru/event-loop


Что такое prototype, proto и чем отличаются?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/proto


Зачем нужны модули в js

https://learn.javascript.ru/modules-intro


Что такое cors csrf?

https://developer.mozilla.org/ru/docs/Web/HTTP/CORS

https://developer.mozilla.org/ru/docs/Glossary/CSRF


SOLID в JS

Command query separation (CQS)

Command-query Separation (CQS) — принцип программирования, изобретённый Бертраном Мейером, создателем языка Eiffel. Согласно этому принципу, каждая функция является либо командой, которая выполняет действие (action), либо запросом (query), который извлекает данные, но не тем и другим одновременно. Команда всегда связана с выполнением побочных эффектов, а чистые функции возможны только для запросов.

// Возвращает true или false как результат своего выполнения
save(user);

Согласно принципу CQS, функция save() является командой. Единственное, что она может — возвращать (опять же согласно принципу) успешность своего выполнения, то есть true или false (либо undefined, как в случае с console.log()). Возврат этой функцией любых осмысленных данных рассматривается как нарушение CQS. Однако, стоит сказать, что существуют ситуации, в которых невозможно соблюсти этот принцип.


Что такое чистая функция?

Функция должна удовлетворять двум условиям, чтобы считаться «чистой»:

— Каждый раз функция возвращает одинаковый результат, когда она вызывается с тем же набором аргументов

— Нет побочных эффектов

Еще можно переформулировать как
1) Не зависит от других
2) Не влияет на других


Что такое стрелочная функция?

Это — анонимные функции с особым синтаксисом, которые принимают фиксированное число аргументов и работают в контексте включающей их области видимости, то есть — в контексте функции или другого кода, в котором они объявлены.

(argument1, argument2, ... argumentN) => {
  // тело функции
}

Пример

const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());


Что такое лямбда функция?

Лямбда функция это сокращенный вариант безымянной (анонимной) функции.

const SQUARE = x => x ** 2


Как определяеться контекст?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/this

Что такое промисы?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise


Что такое боксинг?

http://htmlbook.ru/css/box-sizing


Отличие for…of от for…in в javascript

Оба оператора, и for...in и for...of производят обход объектов. Разница лишь в том, как они это делают.

Оператор for...of выполняет обход по элементам коллекций (иначе говоря, итерируемых объектов, например, ArrayMapSetStringarguments, DOM коллекций и т.д.), вызывая на каждом шаге итерации значение, а не ключ.

Оператор for...of для массивов работает аналогично forEach, но имеет преимущества: возможность использовать continue и break для контроля итераций, что невозможно в forEach.

let arr = [10, 20, 30];

for (let value of arr) {
  value += 1;
  console.log(value);
}
// 11 21 31

for…in

Цикл for...in проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу, вызывая на каждом шаге ключ. Цикл for...in проходит по свойствам в произвольном порядке, поэтому его не следует использовать для Array.

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log(obj[prop]);
}

// 1 2 3


Функции первого рода

Если язык программирования имеет функции первого класса, то значит они трактуются как объекты, то есть могут быть переданы другим функциям и их можно вернуть из функций. Так же их можно присваивать переменным.

Функция высшего порядка должна возвращать функцию и/или принимать одну функцию в параметр.


Что такое dom content load?

https://developer.mozilla.org/ru/docs/Web/API/Window/DOMContentLoaded_event

Чери-пик сквош и тд?

Команда git cherry-pick commit применяет изменения, внесенные именованным коммитом в текущую ветку.

Git squash — это прием, который помогает взять серию коммитов и уплотнить ее. Например, предположим: у вас есть серия из N коммитов и вы можете путем сжатия преобразовать ее в один-единственный коммит. Сжатие через git squash в основном применяется, чтобы превратить большое число малозначимых коммитов в небольшое число значимых. Так становится легче отслеживать историю Git. 


Декларативный и императивный подход

Декларативное программирование – это когда в коде описано что должно получиться, а императивное – когда написано как это сделать. Т.е. в первом случае мы совершенно не интересуемся, каким именно образом машина сделает работу, какие инструкции в каком порядке выполнятся и так далее, мы просто объясняем ей, что хотим увидеть в результате. Примеры декларативных языков – html, css, sql, конфиг nginx.\

Программируя императивно, мы описываем конкретные шаги, действия и точный порядок, в котором их нужно исполнять. Напрямую руководим процессом, непосредственно отдаём приказания. Примеров масса, большинство популярных языков императивны, в том числе и javascript. Ты пишешь: вот, сделай-ка переменную myVar, потом запиши туда число 5, повторяй это до тех пор, пока что-то не случится… и так далее. Возвращаясь к примеру с баней, ты теперь – начальник бригады, именно говоришь какое бревно куда класть.


Что такое гидратация (hydrate)?

Существует такой показатель производительности веб страницы, как First Contentful Paint (FCP) — в приближённом переводе будет звучать как ‘первая значимая отрисовка’ — время, когда браузер начал отображать любой текст, изображения (включая фоновые). Это первые элементы, которые пользователь увидит на странице. Создав отчёт с помощью Lighthouse в Chrome, в закладке performance, вы сразу же увидите этот показатель.

Время, потраченное на генерацию содержимого на сервере и будет являться First Contentful Paint временем.

Сразу после этого, клиентский JavaScript начинает выполнение по созданию полноценного клиентского приложения (в большинстве случаев популярных фреймворков — virtual dom и binding интерфейса управления им).

В этот момент нет необходимости заново рендерить весь DOM на клиенте, но необходимо добавить недостающие события, методы, а в некоторых случаях и элементы, которые не рендерились на сервере.

Именно этот процесс и называется гидратацией или регидратацией (hydration / re-hydration).

Анонимные функции

Анонимные функции зачастую создаются и сразу же запускаются, так как находятся внутри колбэк функций. 

var luke = function() {
    // используй силу
}

Таким образом, к функции можно обращаться по переменной, но сама функция остается анонимной. В качестве значения переменной также можно указать именованную функцию. С анонимными функциями все то же самое, они даже лучше подходят для таких целей.

Есть еще одна интересная особенность: в определенной записи такие функции могут вызывать сами себя.

Такая запись может показаться лишней, обычный JS также запустит функцию, когда дойдет до нее в коде. Так зачем использовать такую странную запись?

Главная причина – область видимости функции. Можете вспомнить из прошлой статьи, что переменная, объявленная внутри функции, может быть вызвана только внутри этой функции. В остальном коде данная переменная не видна. Точно так же переменная внутри самовыполняющейся функции замыкается внутри этой функции. Такую переменную нельзя случайно вызвать из внешнего кода или переписать. Такая техника аккуратно инкапсулирует переменные и код, пряча их от глобального пространства имен, чтобы они не вступили в конфликт с другим кодом. По такой же схеме часто пишутся полифилы и плагины, в виде самовыполняющихся функций.

Ответы на вопросы компания MindK на тему OOP

❏ Понимаю в чем суть ООП и его отличия от других подходов в программировании (функционального, процедурного).
ООП нацелено на разделение обязанностей и сокрытие информации

❏ Понимаю, что такое инкапсуляция, наследование и полиморфизм и могу объяснить на примерах.
Инкапсуляция – сокрытие данных ( public private protected )
Наследование – позволяет наследовать значения и методы родительского класса
Полиморфизм – позволяет расширять или изменять дочерний класс

❏ Понимаю, что такое класс в ООП.
Это элемент ПО, описывающий абстрактный тип данных и его частичную или полную реализацию

❏ Понимаю, что такое объект в ООП.
Это отдельный представитель класса, имеющий конкретное состояние и поведение, полностью определяемое классом

❏ Знаю какие бывает модификаторы доступа и их нюансы применения на практике.
public, private, protected

❏ Понимаю, что такое абстрактный класс и могу его реализовать.
Заготовка – методы должны быть определены в классе-потомке

❏ Понимаю, что такое интерфейс и области его применения.
Контракт – какие методы должен реализовывать класс

❏ Понимаю, что такое статический метод, свойство и класс.
Статические метод позволяет обращаться к ним без создания экземпляра класса. Свойства – переменные, которые являются членами класса. Класс — это элемент ПО, описывающий абстрактный тип данных и его частичную или полную реализацию

❏ Понимаю, что такое паттерн программирования и какую проблему он решает.
Паттерны (или шаблоны) проектирования описывают типичные способы решения часто встречающихся проблем при проектировании программ

❏ Знаю, понимаю, и реализовывал хотя бы раз:
❏ Singleton – создание одного инстанса
❏ Factory – используется для создания объектов
❏ Proxy – интерфейс взаимодействия с любым классом, который трудно или невозможно использовать в оригинальном виде
❏ Adapter – позволяет привести нестандартный или неудобный интерфейс какого-то класса в интерфейс, совместимый с вашим кодом
❏ Command Chain – позволяет передавать запросы последовательно по цепочке обработчиков. Каждый последующий обработчик решает, может ли он обработать запрос сам и стоит ли передавать запрос дальше по цепи
❏ Inversion of Control – все зависимости модулей должны строятся на абстракциях этих модулях, а не их конкретных реализациях
❏ DI –  объект, который знает, как создать и настроить экземпляр класса и зависимых от него объектов. Используется для реализации слабосвязанной архитектуры
❏ ServiceLocator – является объектом, предоставляющим всевозможные сервисы (или компоненты), которые могут понадобиться приложению
❏ Prototype – позволяет копировать объекты, не вдаваясь в подробности их реализации
❏ Decorator – Динамически добавляет новую функциональность в экземпляры классов
❏ Observer – наблюдатель для навешивания обработчика на изменения
❏ Builder – интерфейс для производства частей сложного объекта
❏ Register – для реализации централизованного хранения объектов, часто используемых во всем приложении
❏ Mixin/Trait – подмешивание методов

Лучший ресурс по паттернам на мой взгляд https://refactoring.guru/ru/design-patterns/php


❏ Понимаю отличие подхода наследования от композиции.
Наследование – class dodgeClass extends carClass
Композиция – new carClass(new dodgeClass())

❏ Понимаю что такое namespace и их практическое применение.
Разделение пространства имен, для избегания конфликтов названий

Ответы на вопросы компания MindK на тему JS

❏ Я знаю все стандартные типы данных в JavaScript, особенности работы с ними.

number для любых чисел: целочисленных или чисел с плавающей точкой.
string для строк. Строка может содержать один или больше символов, нет отдельного символьного типа.
boolean для true/false.
null для неизвестных значений
undefined для не присвоенных значений
object для более сложных структур данных.
symbol для уникальных идентификаторов.

❏ Понимаю, как работает приведение типов в JS.
String(value), Number(value), Boolean(value)

❏ Понимаю отличие null от undefined.

null -это особое значение, означающее “no value”. null -это особый объект, потому что typeof null возвращает ‘object’.
С другой стороны, undefined означает, что переменная не была объявлена или ей не было присвоено значение.

❏ Понимаю различные области видимости переменных, всплытие переменных.

Статья про это https://habr.com/ru/post/127482/

❏ Знаю, что такое замыкание и лексическое окружение.
Лексическое окружение – все переменные внутри функции. Замыкание это функция у которой есть доступ к своей внешней функции по области видимости, даже после того, как внешняя функция прекратилась

❏ Знаю, что такое анонимные функции.
Это функции без имени, выполняются непосредственно в контексте

❏ Знаю что такое ДОМ-дерево и как JS с ним взаимодействует.
Объектная модель документа. DOM – это представление HTML-документа в виде дерева тегов. 

❏ Имею опыт манипуляций с ДОМ-деревом документа (удаление, добавление, изменение, поиск по ID, поиск по селекторам).

var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);

❏ Понимаю, что такое события и как с ними работать.

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий:

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

Существует множество других событий.

❏ Знаю несколько способов создания объекта.
Оператор new var MyObject = new Object();
Литеральная нотация MyObject = { id : 1, name: ‘Pupkin’ }
Конструкторы объектов function MyObject(id, name) { this._id = id; this._name = name; } var MyFirstObjectInstance = new MyObject(5,”Sample”);
Ассоциативные массивы MyObject[“id”] = 5; MyObject[“name”] = “SampleName”;

❏ Понимаю различие strict и non-strict mode.
Строгий режим, выкидывает исключения и ошибки где в нестрого режиме ничего не произойдет

❏ Имею опыт работы с локальными хранилищами: cookies, localstorage, session storage, IndexedDB, знаю их плюсы минусы и сферы приминения.

  • SessionStorage – выполняет это в течение определённого промежутка времени (сессии). Закрытие вкладки или браузера приводит их к удалению. При этом данные в SessionStorage сохраняются при обновлении страницы.
  • LocalStorage – осуществляет это в течение неограниченного времени. Они сохраняются при перезагрузке браузера и компьютера. Их длительность хранения ничем не ограничена. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их очень просто удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).
  • IndexedDB – это встроенная база данных, более мощная, чем localStorage.
    Хранилище ключей/значений: доступны несколько типов ключей, а значения могут быть (почти) любыми.
    Поддерживает транзакции для надёжности.
    Поддерживает запросы в диапазоне ключей и индексы.
    Позволяет хранить больше данных, чем localStorage.

❏ Понимаю основные принципы асинхронности в ajax/fetch/XHR.

XMLHttpRequest поддерживает как синхронные, так и асинхронные запросы. В основном предпочтительно использовать асинхронные запросы вместо синхронных из-за соображений производительности.

Синхронный запрос приводит к выполнению кода, который “блокирует” взаимодействие с вкладкой браузера до тех пор, пока запрос не будет полностью выполнен, что существенно ухудшает отклик страницы

❏ Понимаю принцип работы API (типы, логика работы REST-приложений).

REST (RESTful) – это общие принципы организации взаимодействия приложения/сайта с сервером посредством протокола HTTP. Особенность REST в том, что сервер не запоминает состояние пользователя между запросами – в каждом запросе передаётся информация, идентифицирующая пользователя (например, token, полученный через OAuth-авторизацию) и все параметры, необходимые для выполнения операции.

Для каждого типа операции используется свой метод HTTP-запроса:
1. получение – GET
2. добавление – POST
3. модификация – PUT
4. удаление – DELETE

❏ Понимаю, что такое JSON и его применение в современной веб-разработке.

Обозначение объектов JavaScript (JSON – JavaScript Object Notation) – стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот).

❏ Понимаю, как реализовать кроссдоменный Ajax запрос и реализовывал его на практике.

var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
var xhr = new XHR();
xhr.open('GET', 'http://anywhere.com/request', true);
xhr.onload = function() {
    alert(this.responseText);
}
xhr.onerror = function() {
    alert('Ошибка ' + this.status);
}
xhr.send();

❏ Знаю функции отложенного выполнения скрипта setTimeout, setInterval.
setTimeout позволяет вызвать функцию один раз через определённый интервал времени
setInterval позволяет вызывать функцию регулярно, повторяя вызов через определённый интервал времени.

❏ Имею опыт отладки JS-кода в консоли браузера.

Ctrl + Shift + C

❏ Знаю отличие функциональнального наследование от прототипного

Прототипное наследование позволяет реализовать большинство важных функций, которые найдете в классических языках ООП. В JavaScript замыкания и фабричные функции позволяют реализовать приватное состояние, а функциональное наследование можно легко комбинировать с прототипами, что также позволяет использовать миксины.

Наследование – это создание новых «классов» на основе существующих.

❏ Использовал современные возможности ES6/ES7/ES8 (let/const, Деструктуризация, Функции, Строки, Promises, Классы, наследование классов)

https://habr.com/ru/post/313526/

❏ Пониманимаю контекст вызова, this у объектов, функция bind, функции call, apply
Подменяют контекст функции

function f(arg) {
    alert(arg);
    alert(this);
}
f('abc'); // abc, [object Window]
f.call('123', 'abc'); // abc, 123

function f() {
    alert(this);
    for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);
    }
}
f(1, 2, 3); // [object Window], 1, 2, 3
f.apply('abc', [1, 2, 3, 4]); // abc, 1, 2, 3, 4

function f() {
    alert(this);
}
var wrapped = f.bind('abc');
f(); // [object Window]
wrapped(); // abc

❏ Работал с webpack и JavaScript-модулями

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

const path = require('path');
module.exports = {
  mode: "development", // could be "production" as well
  entry: './src/main.js', 
  output: {
    path: path.resolve(__dirname, 'public'), 
    filename: 'bundle.js' 
  }
};

❏ Пониманю различия Browser APIs и Node.js

Node использует Google V8, который реализует стандарт ECMAScript. Синтаксис точно такой же, но вы работаете с другой средой – например, у вас нет DOM и есть API для доступа к файловой системе и сокетам.

❏ Знаю один из Front-end фремворков: React.js, Angular, Vue.js, Ember.js
https://vuejs.org

❏ Знаю один из Back-end фремворков: Express, Adonis, Loopback, Meteor, Sails, Nest

https://expressjs.com/ru/

❏ Понимаю работу JS Testing frameworks (Jest, Jasmine,..)

https://jestjs.io/ru/

pushjs.org – the world’s most versatile desktop notifications framework reaches

Push is the fastest way to get up and running with Javascript desktop notifications. A fairly new addition to the official specification, the Notification API allows modern browsers such as Chrome, Safari, Firefox, and IE 9+ to push notifications to a user’s desktop. Push acts as a cross-browser solution to this API, falling back to use older implementations if the user’s browser does not support the new API.

Push.create("Hello world!", {
    body: "How's it hangin'?",
    icon: '/icon.png',
    timeout: 4000,
    onClick: function () {
        window.focus();
        this.close();
    }
});

https://pushjs.org/