Вопросы на собеседование JavaScript

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

Подробнее тут:

• Делегирование событий
• Делегирование событий(js.ru)

this — ссылка на объект в контексте которого выполняется функция. Другими словами, если внутри функции есть обращение типа this.имя_свойства это значит, что мы обращаемся к свойству объекта в контексте которого эта функция выполняется. Этот механизм позволяет писать функции, которые легко переиспользовать в дальнейшем. Судите сами:

function getName() {
    return this.name;
}

var sally = { name: ‘Sally’};
getName.call(sally); // Sally

var megan = { name: ‘Megan’};
getName.call(megan); // ‘Megan

Здесь функция getName ничего не знает об объекте в контексте которого она будет вызвана, тем не менее, превосходно выполняет свою обязаность. Важный момент: контекст выполнения привязывается в момент вызова функции (строка getName.call(sally)). В ES6 была добавлена стрелочная функция, контекст выполнения которой устанавливается не в момент вызова функции, как в примере выше, а в момент определения самой функции.

var getName = () => {
    return this.name;
}

var sally = { name: 'Sally'};
getName.call(sally); // undefined

Тут получаем undefined вместо имени, так как функция определена в глобальном скоупе, а в нестрогом режиме, в момент определения стрелочной функции, ее this будет указывать на window (в браузере). В window переменная name не определена, отсюда undefined. Явное определение контекста вызова (.call()) со стрелочными функциями не работает.

Подробнее тут:

• this (MDN)

В плане наследования JavaScript работает лишь с одной сущностью: объектами. Каждый объект имеет внутреннюю ссылку на другой объект, называемый его прототипом. У объекта-прототипа также есть свой собственный прототип и так далее до тех пор, пока цепочка не завершится объектом, у которого свойство prototype равно null. По определению, null не имеет прототипа и является завершающим звеном в цепочке прототипов.— Наследование с цепочкой прототипов

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

Подробнее тут:

• Наследование с цепочкой прототипов
• Основы и заблуждения насчет JavaScript

null — пустое значение,
undefined — неопределенное значение
undeclared — переменная не была объявлена, вызов ее вызовет ошибку, вызов typeof покажет undefined (для реализации проверки). Для тестовой переменной «a», проверка может быть реализована следующим образом:

typeof a !== 'undefined' && Boolean(a)

Подробнее тут:

• Type(MDN)
• Вы не знаете JS: Типы и грамматика
• Подводные камни JavaScript
• Types

Замыкание — прием при котором функция имеет доступ к лексической области видимости своей функции-обертки, которая была выполнена ранее, но не может быть высвобождена из памяти из-за того, что ее собственная область видимости еще используется другой функцией. Лучше всего сказанное будет видно на примере, пример с комментариями тут: https://codepen.io/CHMSupport/pen/JjypeMd?editors=0010

Подробнее тут:

• Замыкания (MDN)

Для перебора всех (собственных и унаследованных) свойств объекта используется цикл for..in. Для простого перебора элементов массива чаще всего используется функция Array.forEach().

Подробнее тут:

• Массивы (MDN)
• Методы массивов
• Объекты: перебор свойств

Метод Array.forEach() перебирает все элементы массива и для каждого вызывает переданную в forEach callback функцию. После отработки ничего не возвращает, при изменении элемента массива в callback функции изменения отражаются в исходном массиве. Array.map() перебирает все элементы массива и для каждого вызывает переданную callback функцию. После отработки возвращает новый массив, равный по длине исходному, который содержит в себе преобразованные элементы массива. При изменении элемента массива в callback функции изменения не отражаются в исходном массиве.

Подробнее тут:

• Array.prototype.forEach()
• Array.prototype.map()

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

Подробнее тут:

• Стрелочные функции
• Анонимные и самовыполняющиеся функции в JavaScript

Native objects — объекты определенные спецификацией ECMAScript, например, Object (constructor), Date, Math.
Host objects— объекты, чья роль заключается в создании исполнительного окружения для ECMAScript, например, window, document, location, history.

Подробнее тут:

• Стандартные встроенные объекты
• What is the difference between Host objects and Native objects ?
• What is the difference between native objects and host objects?

Function Declaration (функция, объявленная в потоке кода) — классическая форма объявление функции.

function sum(a, b) {
    return a + b;
}

Function Expression (функциональное выражение) — альтернативный синтаксис для объявления функции.

var sum = function(a, b) {
    return a + b;
}

По сути, они делают одно и тоже, но функции, объявленные как Function Declaration могут быть вызваны раньше их места объявления в коде (hoisting), а Function Expression нет.

sum(2, 4);
 
function sum(a, b) {
    return a + b;
}

Подробнее тут:

• function* expression
• Сравнение Function Decaration и Function Expression
• Функциональные выражения

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

Подробнее тут:

• Function.prototype.call()
• Function.prototype.apply()

Function.prototype.bind — создает новую функцию, которая при вызове устанавливает в качестве контекста выполнения (this) предоставленное значение, т.е отвечает за вызов функций с другим контекстом.

Подробнее тут:

• Function.prototype.bind()

• Feature detection, feature inference и User Agent String — это практики определения, существует ли определенная функция веб-технологии в браузере.
• Feature detection — это способ определить, существует ли функция в определенных браузерах.
• Feature inference — предположение: если одна функция присутствует (или нет), соответственно другая тоже будет присутствовать (или нет).
• User Agent String — это текстовая строка, которую отправляет каждый браузер и к которой можно получить доступ через navigator.userAgent. Эта строка содержит в себе информацию о исполнительном окружении.

Подробнее тут:

• User-Agent
• Небольшая заметка о feature detection
• JS Interview Question

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

Подробнее тут:

• Поднятие (MDN)
• Поднятие переменных (Hoisting)

Всплытие и погружение — это фазы жизненного цикла события. Разница заключается в моменте определения факта наступления события. Изначально, при взаимодействии юзера с элементом интерфейса (клик на кнопку, например) событие погружается от объекта window к целевому элементу (target), после наступает стадия всплытия и событие всплывает от target обратно к window. Так, одно и то же событие может быть перехвачено раньше или позже.

Подробнее тут:

• Введение в события
• Всплытие и перехват

Плюсом данного подхода является расширение базового функционала объекта. Прием может быть применен при определении полифилов. В общем случае, расширение поведения встроенных объектов не приветствуется и является плохой практикой (monkey patching). Это нарушает принцип инкапсуляции и засоряет базовые объекты не задокументированной функциональностью.

Подробнее тут:

• Расширение объектов. Prototype
• Наследование и цепочка прототипов

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

Подробнее тут:

• Операторы сравнения
• Отличия == и === в JavaScript

Same-origin policy (политика одинакового источника) — определяет как сайт (документ/скрипт), загруженный из одного источника может взаимодействовать в браузере с ресурсом (файлом, скриптом, объектом), из другого источника.
Пример:
Если скрипт нашего сайта делает простой запрос (GET) к чужому серверу и получает в ответ файл, при этом в ответе отсутствует заголовок Access-Control-Allow-Origin или в значении этого заголовка отсутствует наш домен, браузер запретит доступ к этому файлу (не даст посмотреть содержимое ответа) из скриптов нашего сайта.

Подробнее тут:

• Cross-Origin Resource Sharing (CORS)
• Кросс-доменные ограничения и их обход
• Cross-Origin Resource Sharing (CORS)

Тернарный оператор — это условный оператор, имеющий форму записи: <условие> ? <истинное выражение> : <ложное выражение>. Тернарным его называют потому, что он имеет три операнда.

Подробнее тут:

• Условный (тернарный) оператор
• Условные операторы

Strict (строгий режим)— особый режим работы компилятора, включающий в себя новые возможности и некоторые улучшения обусловленные стандартом ECMAScript 5, при котором изменяется поведение некоторых функций. Включается директивой ‘use strict’. Большинство современных браузеров поддерживают strict режим, однако не все это делают полностью. Строгий режим изменяет семантику, что приводит к погрешностям и ошибкам. Нужно подходить очень внимательно к использованию строго режима и проводить тесты для проверки работоспособности кода как в браузерах, которые поддерживают строгий режим, так и в тех, которые не поддерживают.

Подробнее тут:

• Строгий режим — «use strict»
• Strict mode

TypeScript — один из языков, который позволяет писать код, компилируемый в JS.
Среди его преимуществ стоит отметить:

• Поддержка популярными IDE: Sublime Text, Visual Studio Code, WebStorm, Eclipse.
• Реализует многие принципы объектно-ориентированного программирования: модификаторы доступа, наследование, инкапсуляцию и полиморфизм.
• Позволяет быстрее и проще писать сложные решения, которые легче тестировать и развивать благодаря поддержки ООП и строгой типизации.
• Есть система для работы с модулями, классами. Даже есть возможность создавать абстрактные классы.
• TypeScript обратно совместим с JavaScript. Любой код, написанный на JS будет выполнен. Также можно писать смешанный код и он будет валиден.

Недостатки:

• Наличие дополнительных файлов (*.ts, *.d.ts, *.map), что неудобно для небольших проектов.
• Для некоторых браузеров необходима дополнительная настройка консоли для отладки TypeScript.
• TypeScript — язык с неявной статической типизацией: тип может быть описан как any, что отключит приведение к этому типу переменной. d.ts декларации не всегда соответствуют текущей версии библиотеки.

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

Подробнее тут:

• На примере Typescript

Immutable объект — неизменяемый. Объект, состояние которого не может быть изменено после создания. Соответственно, mutable объект может быть изменен после создания. Все примитивы (числа, строки, булевые значения и т.п.) имутабельны.

Подробнее тут:

• Mutable (MDN)
• Immutable collections for JavaScript
• Иммутабельность в JavaScript

Преимущества immutability:

• Простое и быстрое отслеживание изменений (например, не нужно отдельно сравнивать значения каждого поля вложенного объекта. Можно просто сравнить ссылки на объекты и отсеять вложенные ветки сравнений).
• Более безопасное использование и тестирование.

Недостатки:

• Создание нового объекта при каждом изменении может стать русурсо-затратной операцией.

Подробнее тут:

• Immutable collections for JavaScript
• Иммутабельность в JavaScript

Использование метода Object.freeze() предотвращает изменение объекта: добавление, удаление или изменение свойств. Использование ключевого слова const вместо var или let не делает константу неизменной, однако предотвращает повторное присваивание нового значения.

Подробнее тут:

• Understanding Immutability in JavaScript
• Иммутабельность в JavaScript

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

Подробнее тут:

• Введение в асинхронный JavaScript
• JavaScript: методы асинхронного программирования
• async function(MDN)

Task queue — очередь из завершенных асинхронных задач готовых к синхронной обработке. Из этой очереди задачи будут постепенно перемещены в call stack.
Сall stack — стек вызовов по которому можно определить в каком месте программы сейчас идет ее обработка. Если стек не пуст, значит идет выполнение синхронных задач, а именно, функции, которая находится на верхушке стека.
Event loop — механизм перемещающий готовые к синхронной обработке асинхронные задачи из task queue в call stack.

Подробнее тут:

• Разбираемся с асинхронностью в JavaScript
• Как работает JS: цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
• Параллельная модель и цикл событий.

• const — переменным объявленным этим оператором должно быть сразу же присвоено значение. В дальнейшем значение не может быть переопределено. Переменная объявленная таким способом не будет видна за пределами блочной области видимости.
• let — значение переменной объявленной этим оператором может быть установлено позже, а так же может быть переопределено в будущем. Переменная объявленная таким способом не будет видна за пределами блочной области видимости. Не доступен hoisting. Не поддерживает повторное объявление.
• var — значение переменной объявленной этим оператором может быть установлено позже, а так же может быть переопределено в будущем. Переменная объявленная таким способом видна за пределами блочной области видимости. Доступен hoisting. Поддерживает повторное объявление.

Подробнее тут:

• Чем отличаются const, var и let

• Методы класса являются неперечислимыми свойствами;
• Код внутри класса по умолчанию обрабатывается в строгом режиме;
• Есть различия в синтаксисе;

Подробнее тут:

• Классы (MDN)
• Не просто синтаксический сахар
• Конструкторы, создание объектов через «new»

Стрелочные функции объявляются особой комбинацией символов () => {}. Пожалуй, наиболее уместным вариантом применения стрелочной функций является применение ее как callback функции. Это объясняется основным отличием ее от других типов функций — контекст выполнения стрелочных функций определяется не в момент вызова, а в момент ее объявления (лексический this).

Подробнее тут:

• Стрелочные функции
• Стрелочные функции в JavaScript: зачем они нужны, как с ними обращаться, когда ими стоит пользоваться, а когда — нет
• Лексический this

Функция высшего порядка — функция которая принимает в качестве аргумента другую функцию или возвращает функцию, т.е работает с другими функциями.
Array.prototype.reduce, Array.prototype.map и Array.prototype.filter — это функции высшего порядка.

Подробнее тут:

• Функция высшего порядка
• Функции высшего порядка в JavaScript

Destructuring assignment — механизм извлечения данных из массивов и объектов. При этом используются литералы массива или объекта (в зависимости от того, что разбираем), что увеличивает читабельность и позволяет сразу сказать объект какого типа деструктурируется. Например:

var [firstItem] = arr;

По квадратным скобкам сразу видно, что arr — это массив

Подробнее тут:

• Деструктурирующее присваивание

Шаблонная строка — строковый литерал, позволяющий использовать выражения внутри строки. Объявляется косыми кавычками.

const variable = 'World!'
console.log(`Hello ${variable}`);

Подробнее тут:

• Шаблонные строки

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

Подробнее тут:

• Closures, Curried Functions, and Cool Abstractions in JavaScript
• Каррирование функций в JavaScript

Spread — оператор состоящий из трех точек. Преимущество — в короткой форме записи. Отличие — в зависимости от места применения этот оператор трактуется как spread или rest оператор. Rest используется для деструктуризации коллекций (разделение на отдельные элементы), а spread, наоборот, для соединения отдельных значений в массив.

let arr = ['one', 'two', 'three', 'four'];
// destructuring with three dots (rest)
let [first, second, ...rest] = arr;
console.log(first); // 'one'
console.log(second); // 'two'
console.log(rest); // ['three', 'four']
// concatenation with three dots. Same syntax but different behaviour
const restored = [first, second, ...rest];
console.log(restored) //['one', 'two', 'three', 'four'];

Подробнее тут:

• Деструктурирующее присваивание
• Spread syntax
• Остаточные параметры (rest parameters)