JavaScript

Question 1

Что такое Websokets?

Answer 1

Websokets - это протокол связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером.

В отличие от HTTP, котором общение идёт в формате запрос-ответ - при использовании websokets возможно установить соединение и затем получать полезные данные в виде ответов от сервера. Отправлять данные от себя так же возможно в любой момент.

Question 2

Отладка в браузере, debugger

Answer 2

Можно запустить с помощью добавления строчки debugger или вручную выбрав файл в Chrome.

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

Question 3

Паттерны JS (декоратор)

Answer 3

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

В качестве аргумента принимает декорируемый объект.
Возвращает новый объект, который содержит в себе старый объект + дополнительный функционал.

Question 4

Паттерны JS (модуль)

Answer 4

Модуль - отдельный файл, из которого возможно выполнить экспорт.

Коротко:
экспорт
- до объявления
- отдельно от объявления
- с другим именем
- по умолчанию
- по умолчанию с другим именем
импорт
- нескольких объектов в одном с деструктуризацией
- с изменением имени
- всего в одном объекте
- по умолчанию

export
1. экспорт до объявления (конкретной переменной, функции или класса):
export const bullet = 'a'
2. экспорт отдельно от объявления (нескольких значений в объекте):
const a = 1
const b = 2
export {a, b}
3. возможно эскортировать под другим именем
export {a as alpha, b as beta}
4. экспорт по умолчанию (может быть только один)
export default class User {…}

import
1. импорт нескольких объектов (возможно с заменой имени)
import {a, b as beta} from file.js
2. импорт всего в одном объекте
import * as abc from file.js
3. импорт по умолчанию
import abc from file.js

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

Question 5

Generators.
Что такое генераторы?

Answer 5

Генераторы могут по мере необходимости возвращать множество значений одно за другим.
Их особенность является в том, что выполняясь они могут остановить своё исполнение, вернуть промежуточное значение, а затем продолжить выполняться.

• Функции-генераторы объявляются с помощью function*.
• Оператор yield используется для приостановки выполнения функции-генератора и возврата значения вызывающему коду. Выполнение функции можно возобновить с помощью метода next().
• Генератор возвращает объект итератор, который можно использовать для обхода значений, генерируемых функцией.

Определение генератора:

function* simpleGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

Использование генератора:

const generator = simpleGenerator(); // итератор
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

Question 6

“use strict”

Answer 6

Строгий режим
Активируется если первой строкой написать “use strict” (можно в файле, можно только в функции).

Заставляет работать код только в современном режиме, убирает обратную совместимость с очень старым кодом.

Question 7

Объясните делегирование событий.
Когда стоит его использовать?
Какие плюсы от этого?

Answer 7

Это обработка события для множества элементов одним из родителей элементов (общим предком).

Ставится один обработчик на общего предка. А в нём определяем нужный элемент через event.target.

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

Question 8

Что такое IIFE (ифи)?

Answer 8

Immediately Invoked Function Expression - немедленно вызываемая функция.

(function () {
  console.log('Hello World');
})();

Такое выражение выполняется немедленно после создания.

До появления ES6 модулей - использовалось что бы не загрязнить глобальное пространство имён. Переменные объявленные внутри - не видимы за его пределами.

Question 9

Объясните, почему это не является IIFE: function foo(){ }();. Что необходимо изменить, чтобы это стало IIFE?

Answer 9

Не хватает скобок вокруг функции, что бы скобки в конце считались указанием к исполнению функции: (function foo(){ })().

Question 10

В каких случаях обычно используются анонимные функции?

Answer 10

Для выполнения какого-то кода в коллбэках, где не нужно создавать отдельную именную функцию под это действие.

Question 11

В чём различие между переменными, значение которых: null, undefined? Как бы вы проверили их на каждое из этих значений?

Answer 11

undefined - переменная, которая была объявлена, но у неё нет значения или результат выполнения функции, которая ничего не возвращает.

null - значение, которое явно обозначает отсутствие значения.

Проверить можно с помощью typeof или строгим равенством ===.

Question 12

Можете ли вы описать основное различие между циклом .forEach() и циклом .map()? И в каких случаях каждый из них используется?

Answer 12

map
- коллбек выполняется для каждого элемента массива
- результат выполнения становится элементом массива
- возвращает новый массив

forEach
- коллбек выполняется для каждого элемента массива
- результат выполнения никуда не запишется
- возвращает undefined

Question 13

В чем разница между host-объектами и нативными объектами?

Answer 13

host-объекты - это объекты, которые предоставляются средой выполнения. То есть в нашем случае браузером: window, document, location, history итд.

нативные объекты - это объекты, которые являются частью языка Java Script: String, Array, Math, Object, Function итд.

Question 14

В чем разница между:
function Person(){}
var person = Person()
var person = new Person()

Answer 14

function Person(){} - создание функции с именем Person.
var person = Person() - вызов функции Person и помещение результата в переменную person.
var person = new Person() - создание нового объекта, используя функцию-конструктор Person.

Question 15

Подробно расскажите об Ajax.

Answer 15

Asynchronous Javascript And Xml - технология обращения к серверу без перезагрузки страницы. Использовать XML не обязательно, под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.

Плюсы:

• Повышение интерактивности - новые данные с сервера можно добавить динамически без перезагрузки страницы
• Скрипты и стили надо скачать всего 1 раз для страницы

Минусы:

• Сложность реализации закладки для страницы
• Не работает без JS
• Динамический контент не виден некоторым роботам.

Question 16

Вы когда-нибудь использовали шаблонизацию на JavaScript? Если да, то какие библиотеки вы использовали?

Answer 16

Стандартный <template> и JSX.

Содержимое шаблона доступно по его свойству content в качестве DocumentFragment – особый тип DOM-узла.

Например:
const tmpl = document.querySelector('#text-template').content;
let elem = document.createElement('div');
// Клонируем содержимое шаблона для того, чтобы переиспользовать его несколько раз
elem.append(tmpl.content.cloneNode(true));

Question 17

Расскажите, что такое поднятие (hoisting).

Answer 17

Hoisting - поднятие переменной. Это поведение переменных, объявленых с помощью var.

Переменные объявленные с var - поднимаются в верхнюю часть текущей области, что позволяет к ним обращаться. Поднимается только объявление. Присвоение остаётся на своём месте. Это значит что до присвоения значения этой переменной - она будет равняться undefined.

В случае попытки провернуть такое с let или const - будет ошибка reference error.

С функциями это работает так, что функции можно объявить в конце и пользоваться ими где угодно.

Question 18

Объясните, что такое всплытие событий (event bubbling).

Answer 18

Это одна из фаз прохода события.

После срабатывания события на целевом элементе - событие “проходит” по всем родительским элементам. На этом механизме основано делегирование событий.

Question 19

В чём разница между “атрибутом” (attribute) и “свойством” (property)?

Answer 19

Атрибуты - в разметке HTML.
Свойства - у объектов DOM.

Большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Нестандартные атрибуты надо записывать в dataset-*.

Question 20

Почему не следует расширять нативные JavaScript-объекты?

Answer 20

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

Единственное оправданное расширение нативного объекта - создание полифила для устаревшего браузера.

Question 21

В чём разница между == и ===?

Answer 21

=== - строгое равенство. Сравнивает значение и тип

== - не строгое равенство. Сравнивает только значение. Могут быть неявные преобразования

Question 22

Объясните Same Origin policy в контексте JavaScript.

Answer 22

Политика одного источника.
- Ограничивает доступ из js к localStorage и cookies, которые были получены с другого домена.
- Запрещает ajax запросы на другие домены, если на этих доменах не настроен CORS соответсвующим образом.
- Скрипт с одного домена не может манипулировать элементами DOM другого домена. Например, iframe с example.com не может изменять содержимое iframe с another-domain.com.

Question 23

Сделайте так, чтобы этот код работал:
duplicate([1,2,3,4,5])
результат:
[1,2,3,4,5,1,2,3,4,5]

Answer 23

function duplicate(arr) {
 return arr.concat(arr)
}

Question 24

Почему тернарный оператор так называется?

Answer 24

“Тернарный” означает три.
Троичное выражение принимает три операнда: условие, выражение then и выражение else.

условие ? выражение1 : выражение2

Question 25

Напишите цикл, который перебирает числа до 100, возвращая “fizz” на числа кратные 3, “buzz” на числа кратные 5 и “fizzbuzz” на числа кратные 3 и 5

Answer 25

``` for (let i = 0; i <= 100; i++) { if (i % 3 === 0 && i % 5 === 0) { return "fizzbuzz" } else if (i % 3 === 0) { return "fizz" } else if (i % 5 === 0) { return "buzz" } } ```

Question 26

Что такое промисы (Promises)? Что может вернуть? В каком стоянии может быть? Как создаётся промис? Как завершить промис? Через какую очередь идёт обработка промиса?

Answer 26

Промисы это один из приёмов работы с асинхронным кодом в JS. Промис это объект, который может вернуть одно значение в будущем: результат выполнения или причину отмены. Промис может быть в одном из трёх состояний - ожидает выполнения, выполнен или отклонён. Промис создаётся через конструктор `new Promise(function(resolve, reject) { … })`. Функция внутри - зовётся исполнитель (executor), после создания он автоматически сразу запускается. `resolve` и `reject` - коллбеки, которые предоставляет JS, принимают 1 аргумент, остальные игнорируются. В промисе обязательно должен быть выполнен `resolve` или `reject`. `resolve` - выполняется при успешном завершение, в аргумент передаётся результат. Выполнение `resolve` не прерывает выполнение функции-исполнителя. `reject` - выполняется в случае ошибки, в аргумент можно передать что угодно, но лучше передавать объект ошибки. Обработка промисов всегда асинхронная, т.к. все действия промисов проходят через «очередь микрозадач».

Question 27

Как обработать результат выполнения промиса (цепочка промисов)?

Answer 27

Цепочка промисов - благодаря тому что промис вернёт новый промис, то методы можно вызывать по цепочке. Таким образом можно строить цепочки из асинхронных действий. `then`, `catch` и `finally` - методы объекта `Promise`. `then(f (result) {...} [, f (err) {...}])` - аргументы это функции. Первая выполняется при статусе промиса “выполнено успешно”, вторая при статусе промиса “выполнено с ошибкой”. Сами функции получают в качестве аргумента значение свойства `result` (аргумент `resolve` или `reject`). Второй аргумент не является обязательным. `catch(f (err) {...})` - это сокращённый вариант `then(null, f (err) {...})` `finally(f () {…})` - будет выполнен в любом случае и не имеет аргументов. Пропускает результат или ошибку через себя к последующим обработчикам. Не должен ничего возвращать, поэтому у `finally` игнорируется возвращаемое значение.

Question 28

Как обработать ошибку в промисе?

Answer 28

Если промис завершается с ошибкой (`reject`) или во время выполнения получается ошибка, то управление переходит в ближайший обработчик ошибок `catch`. Это работает как невидимый `try…catch` внутри промиса и обработчиках. Если внутри `catch` произошла ошибка - она перейдёт к следующему `catch`. Если его нет, то будет проброс исключения. Ошибку, которая вылетела в глобальное окружение можно поймать используя событие `unhandledrejection` и `addEventListener` по этому событию.

Question 29

Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?

Answer 29

- Помогает избежать "callback hell", который может быть нечитаемым. - Упрощает написание последовательного удобочитаемого асинхронного кода с помощью then(). - Упрощает написание параллельного асинхронного кода с помощью Promise.all().

Question 30

Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?

Answer 30

Плюсы: - Исправляют проблемы JS - Синтаксический сахар (более короткий код) - Добавление статической типизации Минусы: - Нужна компиляция кода в JS - Могут быть трудности с отладкой, если карты кода плохо сопоставляются с исходным кодом - Если язык редкий, то могут быть сложности с набором команды - Меньшее сообщество, что значит меньше учебных материалов и инструментов - Может не быть поддержки в IDE

Question 31

Какие инструменты и методы вы используете при отладке кода?

Answer 31

**React и Redux:** - React Devtools - Redux Devtools **JavaScript:** - Chrome Devtools - Отладка при помощи console.log

Question 32

Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?

Answer 32

Циклы `for..in` и `for..of`, метод `.forEach()`. Для объектов можно сначала получить все ключи, значения или пары в массив через `.keys()`, `.values()` или `.entries()`.

Question 33

Объясните разницу между синхронными и асинхронными функциями.

Answer 33

Синхронные функции являются блокирующими. Когда интерпретатор натыкается на такую функцию - он блокирует дальнейшее выполнение операций прежде чем данная функция будет выполнена. Асинхронные функции не блокируют процесс выполнения скрипта.

Question 34

Что такое цикл событий (event loop)?

Answer 34

Event loop - не является частью движка JS и предоставляется средой, например браузером. Это бесконечный цикл, который запускается после выполнения основного кода, его алгоритм работы: 1. Проверяется стек вызова и выполняются все задачи из него. 2. Проверяется очередь задач, берётся маркозадача из очереди, помещается в стек вызова и выполняется. 3. Выполняются все микрозадачи. 4. Повторяем. Очередь вызовов (task queue) - очередь в которую попадают макрозадачи на исполнение из Web API.

Question 35

Разница между микро и макро задачами в event loop?

Answer 35

Макрозадачи (tasks): - выполнение внешнего скрипта после его загрузки - генерация событий пользовательского ввода и загрузки ресурсов (например движения мыши) и исполнение их обработчиков - `setTimeout` Микрозадачи (jobs) - промисы - `queueMicrotask(func)`. Выполнение всех микрозадач за один раз - гарантирует им общее окружение.

Question 36

Расскажите о `queueMicrotask`

Answer 36

`queueMicrotask(func)` Это метод, который используется для создания микрозадачи. Все микрозадачи исполняются после того как стек вызова очищается и до того как берётся новая задача из очереди событий.

Question 37

В чём различие между переменными, созданными при помощи `let`, `var` и `const`?

Answer 37

`var` подвержена всплытию (hoisting) и имеет функциональную область видимости (ну или глобальная, если вне функции). `const` и `let` - блочная область видимости. `const` нельзя изменить, `let` возможно изменить.

Question 38

Дайте определение функции высшего порядка. Какие есть типы функций по способности принимать другие функции?

Answer 38

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

Question 39

Что такое деструктуризация? Можете ли вы привести пример деструктуризации объекта или массива?

Answer 39

Это выражение, которое предоставляет удобный способ извлекать переменные из массивов и объектов и помещать их в отдельные переменные. ``` const rgb = [255, 200, 0] const [red, green ,blue] = rgb; ``` ``` const student = { firstname: 'Glad', lastname: 'Chinda', country: 'Nigeria' } const { firstname, lastname, country } = student; ```

Question 40

Шаблонные строки (или шаблонные литералы - Template Literals) в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?

Answer 40

Создаются с помощью обратных кавычек. Позволяют использовать переменные внутри и перенос строки.

Question 41

В чём преимущества использования spread оператора и чем он отличается от rest оператора?

Answer 41

Spread - распаковывает массив или объект. Rest - собирает “остальные” аргументы в массив.

Question 42

Каким образом можно обмениваться кодом между файлами?

Answer 42

Использовать export + import.

Question 43

Объясните разницу между `