JavaScript Flashcards
Что такое Websokets?
Websokets - это протокол связи поверх TCP-соединения, предназначенный для обмена сообщениями между браузером и веб-сервером.
В отличие от HTTP, котором общение идёт в формате запрос-ответ - при использовании websokets возможно установить соединение и затем получать полезные данные в виде ответов от сервера. Отправлять данные от себя так же возможно в любой момент.
Отладка в браузере, debugger
Можно запустить с помощью добавления строчки debugger
или вручную выбрав файл в Chrome.
В отладке можно определить точки остановки, пошагово выполнять код и видеть все текущие переменные.
Паттерны JS (декоратор)
Способ добавить объекту новый функционал не изменяя его.
В качестве аргумента принимает декорируемый объект.
Возвращает новый объект, который содержит в себе старый объект + дополнительный функционал.
Паттерны JS (модуль)
Модуль - отдельный файл, из которого возможно выполнить экспорт.
Коротко:
экспорт
- до объявления
- отдельно от объявления
- с другим именем
- по умолчанию
- по умолчанию с другим именем
импорт
- нескольких объектов в одном с деструктуризацией
- с изменением имени
- всего в одном объекте
- по умолчанию
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
Модули нужны для повышения читаемости, облегчения поддержки кода, возможности повторного использования кода и сохранения чистоты глобального пространства имён.
Generators.
Что такое генераторы?
Генераторы могут по мере необходимости возвращать множество значений одно за другим.
Их особенность является в том, что выполняясь они могут остановить своё исполнение, вернуть промежуточное значение, а затем продолжить выполняться.
- Функции-генераторы объявляются с помощью
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 }
“use strict”
Строгий режим
Активируется если первой строкой написать “use strict” (можно в файле, можно только в функции).
Заставляет работать код только в современном режиме, убирает обратную совместимость с очень старым кодом.
Объясните делегирование событий.
Когда стоит его использовать?
Какие плюсы от этого?
Это обработка события для множества элементов одним из родителей элементов (общим предком).
Ставится один обработчик на общего предка. А в нём определяем нужный элемент через event.target
.
Экономит память, удобство изменения, меньше кода (не надо каждый раз ставить и снимать обработчик для каждого элемента).
Что такое IIFE (ифи)?
Immediately Invoked Function Expression - немедленно вызываемая функция.
(function () { console.log('Hello World'); })();
Такое выражение выполняется немедленно после создания.
До появления ES6 модулей - использовалось что бы не загрязнить глобальное пространство имён. Переменные объявленные внутри - не видимы за его пределами.
Объясните, почему это не является IIFE: function foo(){ }();. Что необходимо изменить, чтобы это стало IIFE?
Не хватает скобок вокруг функции, что бы скобки в конце считались указанием к исполнению функции: (function foo(){ })().
В каких случаях обычно используются анонимные функции?
Для выполнения какого-то кода в коллбэках, где не нужно создавать отдельную именную функцию под это действие.
В чём различие между переменными, значение которых: null, undefined? Как бы вы проверили их на каждое из этих значений?
undefined - переменная, которая была объявлена, но у неё нет значения или результат выполнения функции, которая ничего не возвращает.
null - значение, которое явно обозначает отсутствие значения.
Проверить можно с помощью typeof или строгим равенством ===.
Можете ли вы описать основное различие между циклом .forEach()
и циклом .map()
? И в каких случаях каждый из них используется?
map
- коллбек выполняется для каждого элемента массива
- результат выполнения становится элементом массива
- возвращает новый массив
forEach
- коллбек выполняется для каждого элемента массива
- результат выполнения никуда не запишется
- возвращает undefined
В чем разница между host-объектами и нативными объектами?
host-объекты - это объекты, которые предоставляются средой выполнения. То есть в нашем случае браузером: window
, document
, location
, history
итд.
нативные объекты - это объекты, которые являются частью языка Java Script: String
, Array
, Math
, Object
, Function
итд.
В чем разница между:function Person(){}
var person = Person()
var person = new Person()
function Person(){}
- создание функции с именем Person.var person = Person()
- вызов функции Person и помещение результата в переменную person.var person = new Person()
- создание нового объекта, используя функцию-конструктор Person.
Подробно расскажите об Ajax.
Asynchronous Javascript And Xml - технология обращения к серверу без перезагрузки страницы. Использовать XML не обязательно, под AJAX подразумевают любое общение с сервером без перезагрузки страницы, организованное при помощи JavaScript.
Плюсы:
- Повышение интерактивности - новые данные с сервера можно добавить динамически без перезагрузки страницы
- Скрипты и стили надо скачать всего 1 раз для страницы
Минусы:
- Сложность реализации закладки для страницы
- Не работает без JS
- Динамический контент не виден некоторым роботам.
Вы когда-нибудь использовали шаблонизацию на JavaScript? Если да, то какие библиотеки вы использовали?
Стандартный <template>
и JSX.
Содержимое шаблона доступно по его свойству content
в качестве DocumentFragment – особый тип DOM-узла.
Например:const tmpl = document.querySelector('#text-template').content;
let elem = document.createElement('div');
// Клонируем содержимое шаблона для того, чтобы переиспользовать его несколько разelem.append(tmpl.content.cloneNode(true));
Расскажите, что такое поднятие (hoisting).
Hoisting - поднятие переменной. Это поведение переменных, объявленых с помощью var
.
Переменные объявленные с var
- поднимаются в верхнюю часть текущей области, что позволяет к ним обращаться. Поднимается только объявление. Присвоение остаётся на своём месте. Это значит что до присвоения значения этой переменной - она будет равняться undefined
.
В случае попытки провернуть такое с let
или const
- будет ошибка reference error
.
С функциями это работает так, что функции можно объявить в конце и пользоваться ими где угодно.
Объясните, что такое всплытие событий (event bubbling).
Это одна из фаз прохода события.
После срабатывания события на целевом элементе - событие “проходит” по всем родительским элементам. На этом механизме основано делегирование событий.
В чём разница между “атрибутом” (attribute) и “свойством” (property)?
Атрибуты - в разметке HTML.
Свойства - у объектов DOM.
Большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.
Нестандартные атрибуты надо записывать в dataset-*.
Почему не следует расширять нативные JavaScript-объекты?
В том случае если используется несколько библиотек, которые будут использовать расширение нативных объектов - может произойти пересечение названий методов.
Единственное оправданное расширение нативного объекта - создание полифила для устаревшего браузера.
В чём разница между == и ===?
=== - строгое равенство. Сравнивает значение и тип
== - не строгое равенство. Сравнивает только значение. Могут быть неявные преобразования
Объясните Same Origin policy в контексте JavaScript.
Политика одного источника.
- Ограничивает доступ из js к localStorage и cookies, которые были получены с другого домена.
- Запрещает ajax запросы на другие домены, если на этих доменах не настроен CORS соответсвующим образом.
- Скрипт с одного домена не может манипулировать элементами DOM другого домена. Например, iframe с example.com не может изменять содержимое iframe с another-domain.com.
Сделайте так, чтобы этот код работал:duplicate([1,2,3,4,5])
результат:[1,2,3,4,5,1,2,3,4,5]
function duplicate(arr) { return arr.concat(arr) }
Почему тернарный оператор так называется?
“Тернарный” означает три.
Троичное выражение принимает три операнда: условие, выражение then
и выражение else
.
условие
? выражение1
: выражение2
Напишите цикл, который перебирает числа до 100, возвращая “fizz” на числа кратные 3, “buzz” на числа кратные 5 и “fizzbuzz” на числа кратные 3 и 5
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" } }
Что такое промисы (Promises)?
Что может вернуть?
В каком стоянии может быть?
Как создаётся промис?
Как завершить промис?
Через какую очередь идёт обработка промиса?
Промисы это один из приёмов работы с асинхронным кодом в JS.
Промис это объект, который может вернуть одно значение в будущем: результат выполнения или причину отмены.
Промис может быть в одном из трёх состояний - ожидает выполнения, выполнен или отклонён.
Промис создаётся через конструктор new Promise(function(resolve, reject) { … })
.
Функция внутри - зовётся исполнитель (executor), после создания он автоматически сразу запускается.
resolve
и reject
- коллбеки, которые предоставляет JS, принимают 1 аргумент, остальные игнорируются.
В промисе обязательно должен быть выполнен resolve
или reject
.
resolve
- выполняется при успешном завершение, в аргумент передаётся результат. Выполнение resolve
не прерывает выполнение функции-исполнителя.
reject
- выполняется в случае ошибки, в аргумент можно передать что угодно, но лучше передавать объект ошибки.
Обработка промисов всегда асинхронная, т.к. все действия промисов проходят через «очередь микрозадач».
Как обработать результат выполнения промиса (цепочка промисов)?
Цепочка промисов - благодаря тому что промис вернёт новый промис, то методы можно вызывать по цепочке. Таким образом можно строить цепочки из асинхронных действий.
then
, catch
и finally
- методы объекта Promise
.
then(f (result) {...} [, f (err) {...}])
- аргументы это функции. Первая выполняется при статусе промиса “выполнено успешно”, вторая при статусе промиса “выполнено с ошибкой”. Сами функции получают в качестве аргумента значение свойства result
(аргумент resolve
или reject
). Второй аргумент не является обязательным.
catch(f (err) {...})
- это сокращённый вариант then(null, f (err) {...})
finally(f () {…})
- будет выполнен в любом случае и не имеет аргументов. Пропускает результат или ошибку через себя к последующим обработчикам. Не должен ничего возвращать, поэтому у finally
игнорируется возвращаемое значение.
Как обработать ошибку в промисе?
Если промис завершается с ошибкой (reject
) или во время выполнения получается ошибка, то управление переходит в ближайший обработчик ошибок catch
. Это работает как невидимый try…catch
внутри промиса и обработчиках.
Если внутри catch
произошла ошибка - она перейдёт к следующему catch
. Если его нет, то будет проброс исключения.
Ошибку, которая вылетела в глобальное окружение можно поймать используя событие unhandledrejection
и addEventListener
по этому событию.
Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?
- Помогает избежать “callback hell”, который может быть нечитаемым.
- Упрощает написание последовательного удобочитаемого асинхронного кода с помощью then().
- Упрощает написание параллельного асинхронного кода с помощью Promise.all().
Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?
Плюсы:
- Исправляют проблемы JS
- Синтаксический сахар (более короткий код)
- Добавление статической типизации
Минусы:
- Нужна компиляция кода в JS
- Могут быть трудности с отладкой, если карты кода плохо сопоставляются с исходным кодом
- Если язык редкий, то могут быть сложности с набором команды
- Меньшее сообщество, что значит меньше учебных материалов и инструментов
- Может не быть поддержки в IDE
Какие инструменты и методы вы используете при отладке кода?
React и Redux:
- React Devtools
- Redux Devtools
JavaScript:
- Chrome Devtools
- Отладка при помощи console.log
Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
Циклы for..in
и for..of
, метод .forEach()
.
Для объектов можно сначала получить все ключи, значения или пары в массив через .keys()
, .values()
или .entries()
.
Объясните разницу между синхронными и асинхронными функциями.
Синхронные функции являются блокирующими. Когда интерпретатор натыкается на такую функцию - он блокирует дальнейшее выполнение операций прежде чем данная функция будет выполнена.
Асинхронные функции не блокируют процесс выполнения скрипта.
Что такое цикл событий (event loop)?
Event loop - не является частью движка JS и предоставляется средой, например браузером.
Это бесконечный цикл, который запускается после выполнения основного кода, его алгоритм работы:
- Проверяется стек вызова и выполняются все задачи из него.
- Проверяется очередь задач, берётся маркозадача из очереди, помещается в стек вызова и выполняется.
- Выполняются все микрозадачи.
- Повторяем.
Очередь вызовов (task queue) - очередь в которую попадают макрозадачи на исполнение из Web API.
Разница между микро и макро задачами в event loop?
Макрозадачи (tasks):
- выполнение внешнего скрипта после его загрузки
- генерация событий пользовательского ввода и загрузки ресурсов (например движения мыши) и исполнение их обработчиков
- setTimeout
Микрозадачи (jobs)
- промисы
- queueMicrotask(func)
.
Выполнение всех микрозадач за один раз - гарантирует им общее окружение.
Расскажите о queueMicrotask
queueMicrotask(func)
Это метод, который используется для создания микрозадачи. Все микрозадачи исполняются после того как стек вызова очищается и до того как берётся новая задача из очереди событий.
В чём различие между переменными, созданными при помощи let
, var
и const
?
var
подвержена всплытию (hoisting) и имеет функциональную область видимости (ну или глобальная, если вне функции).
const
и let
- блочная область видимости.
const
нельзя изменить, let
возможно изменить.
Дайте определение функции высшего порядка.
Какие есть типы функций по способности принимать другие функции?
Функция высшего порядка - любая функция, которая принимает одну или несколько функций в качестве аргументов и/или возвращает функцию в качестве результата.
Функции первого порядка - не принимают другие функции в качестве аргументов и не возвращают функции в качестве результатов.
Что такое деструктуризация?
Можете ли вы привести пример деструктуризации объекта или массива?
Это выражение, которое предоставляет удобный способ извлекать переменные из массивов и объектов и помещать их в отдельные переменные.
const rgb = [255, 200, 0] const [red, green ,blue] = rgb;
const student = { firstname: 'Glad', lastname: 'Chinda', country: 'Nigeria' } const { firstname, lastname, country } = student;
Шаблонные строки (или шаблонные литералы - Template Literals) в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?
Создаются с помощью обратных кавычек. Позволяют использовать переменные внутри и перенос строки.
В чём преимущества использования spread оператора и чем он отличается от rest оператора?
Spread - распаковывает массив или объект.
Rest - собирает “остальные” аргументы в массив.
Каким образом можно обмениваться кодом между файлами?
Использовать export + import.
Объясните разницу между <script>
, <script async>
и <script defer>
.
Предназначены для оптимизации загрузки скриптов.
script
- загружается и выполняется немедленно, блокируя парсинг HTML
async
- загружается асинхронно, выполняется сразу
defer
- загружается асинхронно, выполняется после парсинга HTML
Типы данных в JavaScript?
Восемь основных типов.
string
number
bigInt
boolean
simbol
null
undefined
object
Разница между function declaration и function expression?
function declarationfunction sum(a, b) {...}
function expresionconst sum = function(a, b) {...}
function declaration может всплывать, а значит этой функцией можно воспользоваться до её объявления.
Типы таймеров в JavaScript?
setTimeout(func, время)
- вызывает функцию один раз через “время”
setInterval(func, время)
- вызывает функцию периодически через “время”
обе функции возвращают ID таймера для его удаления через clearInterval(id)
Что такое область видимости (Scope)?
Область видимости это место, откуда мы имеем доступ к переменным или функциям.
Есть три типа областей - глобальная, функциональная или локальная и блочная (внутри {}).
Как превратить любой тип данных в булевый?
Перечислите ложные значения в JS.
Boolean(значение)
!!значение
if (значение)
Ложные значения: 0
, null
, undefined
, NaN
, false
Методы строк в JavaScript?
str.length
- число, длина строки
str.charAt(1)
и str[1]
- строка, буква в этом индексе (на несуществующий индекс .charAt()
вернёт пустую строчку, а скобки []
- undefined
)
str.toUpperCase
и str.toLowerCase
- перевод в большие или маленькие буквы
str.indexOf(’a’)
и str.lastIndexOf(’a’)
- число, индекс указанного текста
str.slice(0, 3)
и str.substring(0, 3)
- строка, срез с указанных индексов, но substring не может в отрицательные значения, но может поменять местами аргументы, если начальный индекс больше конечного
str.substr(0, 6)
- строка, вырезает “от (0) индекса” и “сколько (6) вырезать”
str.replace(’a’, ‘b’)
- строка, заменяет выбранную часть на указанную часть
str.trim(’ asd ’)
- строку, срезает пробелы по краям
Методы массивов в JavaScript?
arr.length
: число, длина массива.arr.push(elem)
: число (новая длинна массива), elem
добавляется в конец.arr.unshift(elem)
: число (новая длинна массива), elem
добавляется в начало.arr.pop()
: значение элемента, удаляет последний elem
.arr.shift()
: значение элемента, удаляет первый elem
.arr.concat(arr2)
: массив, соединяет два массива.arr.splice(start, deleteCount, ...items)
: массив, изменяет содержимое массива, удаляя или заменяя существующие элементы и/или добавляя новые элементы.arr.join(separator)
: строка, превращает массив в строку с разделителем separator
.arr.includes(searchElement)
: булево, проверяет наличие searchElement
в массиве.arr.sort([compareFunction])
: ссылку на тот же массив, сортирует массив. Можно добавить свой способ сортировки через compareFunction
.arr.forEach(callback)
: ничего, позволяет выполнить функцию callback
для каждого элемента.arr.map(callback)
: массив, возвращает новый массив, содержащий результат вызова callback
для каждого элемента массива.
Что такое чистая функция?
Чистая функция
- функция, исполнения которой с одинаковыми атрибутами каждый раз приводит к одному и тому же результату и не имеет побочных эффектов.
Побочные эффекты
- любые взаимодействия с внешней средой. Файловые операции, отправка или приём данных по сети, вывод в консоль или изменения внешних переменных.
Почему в JS функции называют объектами первого класса?
Потому что они могут быть:
1. Присвоены переменным.
2. Переданы как аргументы другим функциям.
3. Возвращены из других функций.
4. Созданы во время выполнения программы (функции могут быть созданы динамически).
Как определить наличие свойства в объекте?
obj.hasOwnProperty(’свойство’)
- вернёт bolean
‘свойство’ in obj
- вернёт bolean
Что такое псевдомассив arguments
?
Коллекция аргументов, которые передаются в функцию.
Псевдомассив из-за того что он подобен массиву, но им не является. У него есть длина, но других методов массивов у него нет.
Почему результат сравнения 2х объектов это false?
Из-за того что в переменной хранится ссылка на объект и у двух объектов, которые одинаковые по содержанию - будет разная ссылка.
Что такое прототипное наследование?
Как создать объект без прототипа?
Все объекты JS имеют свойство prototype, которое является ссылкой на другой объект. Когда к свойству объекта происходит обращение, то если свойства нет у текущего объекта, то оно будет искаться у его прототипа, затем прототип прототипа и так далее. До тех пор пока не найдётся свойство или не достигается конец цепочки.
Для создания объекта без прототипа надо Object.create(null)
Что такое NaN? Как определить, что значение равно NaN?
Not a number.
Получается когда математическая функция сработала не верно, например выполнение parseIns(строка)
или Math.sqrt(-1)
(нет корня отрицательного числа).
Проверить возможно только через функцию isNaN(значнеие)
, так как NaN
=== NaN
будет false
.
Что такое объектная обертка (Wrapper Objects)?
Примитив во время исполнения кода временно преобразуется в объект. Поэтому ему и доступны все методы этого типа примитивов.
Как в JavaScript создать объект?
Объектный литерал - const obj = {…}
Функция конструктор - function Persone(name) {…}
Имя функции конструктора обязательно с большой буквы, а вызывается она через new Person(’Max’)
Метод Object.create(прототип)
Для чего используется ключевое слово new
?
Для создания объекта через функцию конструктор или класс - надо использовать new
.
Для чего используется оператор двойного отрицания (!!)?
Для приведения значения к логическому типу (boolean).
Для чего используется оператор остатка (%)?
Для получения остатка от деления. Практическое применение - определение кратности.
Как проверить, является ли значение массивом?
Array.isArray(переменная) - возвращает bolean
Как работает boxing/unboxing в JavaScript?
Так называются механизмы, которые происходят во время вызова методов на примитивах. Примитыв сначала преобразуется в объект. У объекта есть метод, он выполняется. Затем объект уничтожается и остаётся снова приметив.
Что такое мемоизация? Реализуйте базовую логику функции для мемоизации?
Мемоизация это приём создания функции, которая может запомнить результат своего выполнения и при повторном выполнении с такими же аргументами вернуть значение без вычисления результата.
const memoize = (fn) => { const cache = {} return (params) => { if (cache[params]) { return cache[params] } else { cache[params] = fn(params) return cache[params] } } }
Разница между оператором in
и методом .hasOwnProperty()
?
obj.hasOwnProperty(’prop’)
- проверит только свои собственные свойства
‘prop’ in obj
- проверит в том числе в прототипах
Разница между глубокой (deep) и поверхностной (shallow) копиями объекта? Как сделать каждую из них?
Поверхностное копирование - копирование только верхнего уровня объекта.
- const car2 = {…car1}
- const car2 = Object.assign({}, car1);
Варианты создания глубокой копии:
- const car2 = JSON.parse(JSON.stringify(car1))
- const car2 = structuredClone(car1);
Что такое цепочка вызовов функций (chaining)? Как реализовать такой подход?
Это когда у результата выполнения функции есть такие же методы, как и у самой функции.
Для кастомной реализации возможно вернуть в качестве ответа “this”.
const counter = { count: 0, plusOne() { this.count++ return this }, minusOne() { this.count-- return this } }
Что такое необъявленная переменная?
Не возможно использовать в “use strict”
- будет ошибка.
Создаётся, если присвоить значение идентификатору, который не был объявлен с использованием ключевых слов var
, let
или const
. Они объявляются в глобальной области видимости. Считается плохой практикой.
Как передаются параметры в функцию: по ссылке или по значению?
Параметры, которые передаются в функцию - передаются по значению. Однако стоит учитывать что при передаче объекта в переменной конечно же передаётся ссылка.
Как работает метод Object.create()
?
Что указывается вторым аргументом?
Object.create(obj, [descriptors])
– создаёт пустой объект со свойством [[Prototype]]
, указанным как obj
.
В качестве второго аргумента может быть дескриптор.
Разница между методами .slice()
и .splice()
?
arr.slice(от, до)
- вернёт новый массив (подмассив от индекса и до индекса), старый массив не изменит
arr.splice(от, [сколько], [что вставить])
- вернёт удалённый подмассив, изменит старый массив, на место удаления добавит новые данные
Как работают методы .find()
, .findIndex()
и .indexOf()
?
arr.find(коллбек)
- вернёт первый подходящий элемент
arr.findIndex(коллбек)
- вернёт индекс первого подходящего
arr.indexOf(значение)
- вернёт индекс найденного значения
Разница между методами .push()
, .pop()
, .shift()
и .unshift()
?
Методы массива.push
- добавляет в конец, возвращает новую длинуunshift
- добавляет в начало, возвращает новую длину
pop
- удаляет в конце, возвращает элементshift
- удаляет в начале, возвращает элемент
Плюсы и минусы иммутабельности?
Как достичь иммутабельности в JS?
Плюсы:
- Так как объекты не изменяются после создания, поведение кода становится более предсказуемым и легче тестируется
Минусы:
- Повышенные расходы на память и в целом возможное понижение производительности
Способы:
- методы, которые возвращают новый массив
- возможно заморозить объект Object.freeze()
- встроенные библиотеки
Типы всплывающих окон в JavaScript? Нативные диалоговые окна.
alert(текст)
- окно с текстом и кнопкой Ок
confirm(текст)
- вопрос с Ок и отмена, вернёт boolean в переменную
prompt(текст, [значение по умолчанию])
- окно для ввода
Типы объектов JavaScript?
- Стандартные встроенные объекты.
Object
,Array
,Number
итд. - Коллекции объектов.
Map
,Set
,WeakMap
,WeakSet
. - Объект для работы с числовыми данными.
Math
. - Объект для работы с отправкой объектов:
JSON
Типы ошибок в JavaScript?
ReferenceError
TypeError
SyntaxError
Логическая
JavaScript статически, или динамически типизированный язык?
Динамически типизированный язык. Тип переменной проверяется во время выполнения. Так же у JS слабая динамическая типизация - тип может меняться самостоятельно.
Что такое регулярное выражение (Regular Expression)?
Это шаблон для сопоставления символов в строках.
Что такое рекурсия?
Это когда функция вызывает сама себя.
Обязательные условия рекурсии:
- вызов функции самой себя
- наличие базового случай - так называется условие при котором функция выходит из рекурсии
Что такое полифил (polyfill)?
Это блок кода, который реализует логику метода, для которого был написан. Используется, например когда сам метод ещё не поддерживается браузером. Или что бы новый метод работал в старом браузере.
Что такое switch case
?
Правила использования switch case
?
Альтернатива if else
.
const score = 20 switch(score) { case 10: console.log('Score = 10') break; case 20: console.log('Score = 20') break; default: console.log('Score not 10 and not 20') }
Что такое выражения (expression) и инструкции (statement) в JavaScript?
Выражение - это фрагмент кода, которая в ходе своего выполнения приводит к возврату значения.
Инструкция - это фрагмент кода, который выполняет какое-то действие, которое является командой. Например if, else, switch, while итд.
Разница между .some()
и .every()
?
Методы проверки значений массива.
.some(коллбек)
- вернёт true, если хотя бы 1
.every(коллбек)
- вернёт true, если все
Как сгенерировать случайное число в JavaScript?
Math.random()
- вернёт случайное число от 0 до 1 (включая).
function getRandomArbitrary(min, max) { // с заданным интервалом return Math.random() * (max - min) + min; }
Типы операторов в JavaScript?
x = y
- оператор присваиванияx == y
- оператор сравненияx * y
- арифметические (если со строкой, то строковый)x && y
, x || y
, !x
- логические операторыcond ? x : y
- тернарный операторdelete x
, typeof y
… - унарный операторx in y
, x instance y
- оператор отношения
let x = 0, y = 1
- оператор запятая (вычисляет оба операнда и возвращает значение последнего операнда)
Разница между параметром и аргументом функции?
Аргументы - задаются во время описания функции и используются в теле для описания взаимодействия с ними.
Параметры - те значения, что указываются во время вызова функции.
Разница между примитивом и объектом?
Примитивы - базовые типы данных. Имеют фиксированный размер и хранятся непосредственно в переменной или передаются по значению.
Объекты - сложные структуры данных. Могут содержать пары “ключ-значение”, функции и другие объекты. Все объекты передаются “по ссылке”.
Почему typeof null возвращает object?
Это баг. Из-за необходимости обратной совместимости - его не исправляют.
Для чего используется метод .includes()
?
arr.includes(elem, [индекс])
- вернёт boolean, ищет elem начиная с индекса
str.includes(подстрока, [индекс])
- вернёт boolean, ищет подстроку начиная с индекса
Как увеличить читаемость больших чисел?
Числам можно добавить “_”
Например: let number = 1_000_000_000
Какими функциями происходит взаимодействие с DOM?
Выбор элементов?
Создание элементов?
Работа с классами?
Взаимодействие с самим элементом?
Выбор элементов:document.querySelector()
- выбор элемента через обычный селектор (первый подходящий)document.querySelectorAll()
- выбор всех элементов, возвращает псевдомассивDOM-элемент.children
- возвращает коллекцию дочерних элементов
Создание элементов:document.createElement('имя_тега')
- создаёт DOM-элемент (без расположения) и возвращает егоDOM-элемент-куда.appendChild(DOM-элемент-кого)
- помещает элемент в конец указанного родителяDOM-элемент.remove()
- удаление элемента
Работа с классами:DOM-элемент.classList.add('имя класса')
- добавляет класс элементуDOM-элемент.classList.remove('имя класса')
- убирает класс элементаDOM-элемент.classList.toggle('имя класса')
- добавляет (если его нет) или убирает (если он есть) указанный класс
Взаимодействие с самими элементами:DOM-элемент.textContent
- текстовое содержимоеDOM-элемент.атрибут
- возможно задать значение атрибута
В чём разница между событием document load
и событием document DOMContentLoaded
?
DOMContentLoaded
- запускается после создания DOM, не дожидается загрузки других ресурсов.
load
- запускается в конце загрузки документа. Все объекты находятся в DOM, все изображения и скрипты загрузились.
Можете ли вы привести пример использования стрелочных функции ()=>{}
?
Чем они отличаются от других функций?
- Упрощённый синтаксис - стрелочка, простой
return
. - Стрелочную функцию нельзя использовать как функцию конструктор.
- У стрелочной функции нет псевдомассива
arguments
. - Разный
this
:this
в обычных функциях имеет позднее связывание, это значит что контекст обычной функции определяется в момент вызова.this
в стрелочных функциях имеет раннее связывание, это значит что контекст стрелочной функции определится в момент объявления. - В случае использования стрелочной функции внутри класса - она не будет терять контекст при вызове “по ссылке”. Например:
class Hero { constructor(heroName) { this.heroName = heroName } logName = () => { console.log(this.heroName) } logNameF() { console.log(this.heroName) } } const batman = new Hero('Batman') setTimeout(batman.logName, 1000) // Batman - контекст не потеряется setTimeout(batman.logNameF, 1000) // undefined - контекст потерялся
Правила задания имён для переменных и функций в JavaScript?
- Буквы, цифры,
_
или$
- Первый символ не цифра
- Функция должна называться в соответствии с тем что она делает. Обычно глагол.
- использование camelCase
Разница между явным и неявным преобразованием (Implicit and Explicit Coercion)?
Явное преобразование - намеренное преобразование.
Неявное преобразование - изменение типа без участия разработчика.
1 + ‘6’ = ‘16’ // 1 стал строкой
false + true = 1 // 0 + 1
6 * ‘2’ = 12 // 2 стал цифрой
Для чего применяется метод Array.from()
?
Для чего служит второй и третий агрументы?
Создаёт новый массив на основе переданного объекта.
Объект должен массиво-подобным или итерируемым. Примеры: arguments
, NodeList
, HTMLCollection
.
Вторым аргументом можно передать функцию для преобразования каждого элемента, третьим значение this для функции.
Назовите способы преобразования массива в объект?
Object.assign({}, arr)
const obj = {…arr}
Перебрать массив используя arr.reduce()
или arr.forEach()
.
Для чего используется свойство .dataset
?
Позволяет считывать или устанавливать на html-элементы кастомные атрибуты.
Как работает «сборщик мусора» в JavaScript?
Проходит по всем доступным ссылкам начиная с самого корня. Все ссылки по которым прошёл - помечаются. Затем все до которых не добрался - удаляются.
Что такое утечки памяти?
Назовите основные типы утечек памяти в JavaScript?
Утечки памяти - фрагменты памяти, которые больше не нужны приложению, но при этом не были очищены и возвращены операционной системе.
Основные причины:
- Глобальные переменные.
Объявленные безlet
,const
,var
. Избежать возможно используя строгий режим. - Таймеры.
Таймеры надо очищать. - Замыкания.
- Ненужные обработчики событий
Что значит текст max call stack size exceeded
в консоли?
В браузере произошло переполнение стека вызовов и из-за этого он неможет больше выполнять этот скрипт.
Что такое и как работает debounce()
и throttle()
в JavaScript?
Подходы в JS, которые используются для контроля выполнения функции, особенно в событиях которые могут быть запущенны с высокой частотой.
debounce
- гарантирует что функция не будет выполнена, пока не пройдёт какое-то количество времени без каких-то попыток вызова этой функции (например поиск после завершения ввода в поле)
function debounce(func, wait) { let timeout return function(...args) { clearTimeout(timeout) timeout = setTimeout(() => func.apply(this, agrs), wait) } }
throttle
- гарантирует что функция будет вызвана не более 1 раза за определённое время (например изменение размера окна)
Подходы при работе с асинхронным кодом?
Асинхронные функции - это функции, которые не блокируют основной поток исполнения.
- Callback
- Promice
- async/await
Плюсы и минусы асинхронного программирования в JavaScript?
Плюсы:
- Более быстрое выполнение кода. Нет блокировки потока выполнения.
- Более плавный пользовательский интерфейс. Можем обновлять интерфейс не прерывая остальные операции.
- Удобное взаимодействие с сетевыми ресурсами.
Минусы:
- Сложность отладки. Операции могут выполняться не по порядку.
- Сложность обработки ошибок. Ошибки могут возникать в разные моменты.
- Сложность обработки состояния. Операции могут выполняться параллельно.
- Сложность изучения.
Какие проблемы может вызвать неправильное использование асинхронности в JavaScript?
- Гоночные условия.
Несколько операций делают одно и тоже - не известен результат. - Зависания
Когда операции ожидают завершения друг друга. - Потеря данных
Если запись происходит в неожиданный момент. - Трудности отладки
Что такое callback-функция? Что такое Callback Hell и как его избежать?
allback-функция - передача функции в качестве аргумента для функции.
Callback Hell - вложенность коллбеков, при которой получается несколько уровней.
Использовать promice и async/await.
Что такое async/await?
Актуальный способ написания асинхронного кода. Основан на промисах.
Для использования надо объявлять функцию как асинхронную - async function() {}.
Тогда внутри можно будет использовать await.
Такая функция вернёт промис.
Разница между Promise.all()
, Promise.any()
и Promise.race()
?
В качестве аргумента - массив промисов.
all
- вернёт массив результатов, только если все завершились успешно, либо ошибкуrace
- вернёт промис, первый выполненный (результат или ошибку)any
- вернёт промис, первый любой успешный
Расскажите про статический метод Promise.allSettled()
?
Похож на Promise.all()
, но не все должны обязательно быть успешными.
Promise.all()
- вернёт массив результатов или ошибку.
Как выполнить несколько асинхронных операций последовательно?
Цепочка промисов .then()
или async/await
Что такое fetch()
?
Как работает функция fetch()
?
fetch(url, [options])
- метод для сетевых запросов, возвращает промис
По умолчанию без объекта options
- это просто GET
запрос по указанному url
.
Процесс выполняется в 2 этапа:
- Сначала промис при выполнении отдаст объект класса
Response
. В нём содержатся заголовки ответа. На этом этапе, например, можно проверить статус HTTP-запроса, в свойствеstatus
будет код ответа. - На втором этапе промиса - для получения ответа надо воспользоваться методом, который преобразует результат в нужный тип данных. (например
response.text()
,response.json()
и др.)
let response = await fetch(url); // первый этап if (response.ok) { // если HTTP-статус в диапазоне 200-299 let json = await response.json(); // второй этап } else { alert("Ошибка HTTP: " + response.status); }
Метод чтения ответа (.json()
/ .text()
) может быть выполнен всего один раз.
Заголовки
Заголовки ответа хранятся в похожем на Map
объекте response.headers
.
Заголовки своего запроса можно поместить в объекте options
в объект в свойстве headers
.
let response = fetch(protectedUrl, { headers: { Authentication: 'secret' } });
POST-запрос
Для отправки POST
-запроса или запроса с другим методом - нужны будут дополнительные параметры options
.
Вторым параметром к вызову добавляется объект со свойствами:
method
- HTTP метод, напримерPOST
headers
- объект с заголовками
body
- основной вид это строка (например, в формате JSON), но есть и другие варианты
let response = await fetch('some/url', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(someObj) });
Что такое JSON в JavaScript? Как его можно использовать?
JSON - java script object notation формат данных, который используется для хранения и передачи данных между сервером и клиентом.
Представляет набор пар ключ-значение.
Ключи всегда строки.
Значения могут быть: строками, числами, объектами, массивами, булевыми или null.
Что такое и как работает коэффициент сжатия (compression ratio) в контексте веб-разработки?
Коэффициент сжатия - это показатель эффективности сжатия данных.
Есть какие-то механизмы сжатия данных. А чем меньше данные - тем быстрее всё загрузится.
Что такое ECMAScript? В чём отличие от JavaScript?
ECMAScript — это стандарт (набор правил) для языков программирования. JavaScript — это язык, который следует этим правилам. Таким образом, JavaScript — реализация стандарта ECMAScript.
Можно ли изменить значение определённое через const?
Нельзя. Можно только изменить объект по сохранённой ссылке.
Что такое временная мёртвая зона (temporal dead zone)?
Механизм, который позволяет делать вид, что переменные с let и const на самом деле не всплывают.
Для чего используется цикл for…of и for..in?
for..in - перечисляет индексы
for..of - перечисляет значения
Что такое Set, Map, WeakMap и WeakSet?
Set - коллекция уникальных значений.
Map - коллекция ключ значение. Отличие в том что ключtм может быть любой тип.
WeakSet и WeakMap - не препятствуют сборщику мусора удалять свои значения. Если значение есть только в коллекции и никто на него не ссылается.
Что такое итераторы?
Итератор — это объект, который предоставляет метод next()
, возвращающий следующий элемент последовательности. Вернёт объект с value
и done
.
Итерируемые объекты - объекты, которые содержат в себе итератор.
Что такое символ (Symbol
) в ES6?
Отдельный тип данных. Это уникальные и неизменяемые идентификаторы, используемые как ключи для свойств объектов. Они помогают избежать конфликтов имен свойств.
Создаются с помощью Symbol(’строка’)
Как работают дефолтные параметры в ES6?
function greet(name = 'Guest') { console.log(`Hello, ${name}!`); }
Что такое BigInt в ES2020 и для чего он используется?
Тип данных для работы с большими числами (более 64 бит).
Создать можно через BigInt(123…)
или 123n
.
Для чего используется метод .getOwnPropertyDescriptors()
?
Вернёт объект с дескрипторами всех свойств.
{ prop1: { "value": "Blah-blah", "writable": true, "enumerable": true, "configurable": true }, prop2: { value: "yada-yada", writable: true, "enumerable": true, "configurable": true } }
Дескриптор одного свойства:value
- значениеenumerable
- перечисляемыйwritable
- можно изменять значениеconfigurable
- запрещает изменять значения остальных дескрипторов (кроме значения)
Расскажите о методах .keys()
, .values()
, .entries()
?
Методы объектов.
keys
- вернёт массив ключей
values
- вернёт массив значений
entries
- вернёт массив массивов [ключ, значение]
Для чего используется метод .fromEntries()
?
Для создания объекта из результата выполнения метода .entries()
.
Для чего используются методы .flat()
и .flatMap()
?
arr.flat(число)
- сплющивает массив на указанное количество уровней (можно указать Infinity
). Так же может удалять пустые значения.
const arr = [1, [2, 3], [4, [5, 6]]]; console.log(arr.flat();); // [1, 2, 3, 4, [5, 6]]
arr.flatMap(коллбек)
- применяет коллбек к элементам, а затем делает flat
Для чего используются методы .padStart()
и .padEnd()
?
str.padStart(3, ‘=’) // ‘===test’
str.padEnd(5) // ‘test ’
Добавить в начало или в конец указанных символов.
Для чего используются методы .startsWith()
и .endsWith()
?
str.startsWith(’строка’, [длина])
- вернёт boolean, проверяет наличие подстроки в начале или в конце.
Можно указать количество символов, которые надо отбросить.
Как в JavaScript удалять пробельные символы в начале и в конце строки?
str.trim()
str.trimStart()
str.trimEnd()
Расскажите об операторе Optional Chaining (?.
)?
Используется для исключения ошибки при обращении к несуществующим свойствам и методам.
Если свойства нет - вернётся undefined
.
let user = { name: 'John', address: { city: 'New York' } }; console.log(user.address?.city); // 'New York' console.log(user.address?.street); // undefined
Для чего используется метод .replaceAll()
?
str.replace(’строка’, ‘подстрока’)
- заменит первое найденное
str.replace(regExp, ‘строка’)
- заменит всё найденное
str.replaceAll(’строка’ или regExp, ‘строка’)
- заменит всё найденное
Что такое оператор нулевого слияния (??
)?
const text = x ?? y
Это тоже самое что и:const text = (x ≠ null && x ≠ undefined) ? x : y
Если первое значение не определено, то берём второе.
В чём отличие оператора нулевого слияния (??
) и оператора “ИЛИ” (||
)?
В выражении const result = x ?? y
оператор ??
отбросит x
, только если он будет null
или undefined
В выражении const result = x || y
оператор ||
выполнит скрытое преобразование строки ''
и 0
в false
Назовите основные методы и свойства работы с коллекцией Map
?
new Map()
- создать Map.set(key. value)
- добавить пару.get(key)
- получить значение (undefined
, если не найдено).has(key)
- проверяет наличие ключа, boolean
.delete(key)
- удаляет ключ.clear()
- очистит всю коллекцию.size
- размер
Назовите основные методы и свойства работы с коллекцией Set
?
new Set(iterable)
- создать сет.size
- размер.add(value)
- добавляет значение, если оно уже есть, то не добавит (вернёт сам set в ответ).delete(value)
- удаляет значение, вернёт true
если оно было.has(value)
- проверяет наличие значения, вернёт boolean
.clear()
- очищает всю коллекцию
Как осуществить перебор элементов в коллекциях Map
и Set
?
Использовать .forEach()
и for…of
.
Как альернативный вариант получить псевдомассивы:.keys()
- ключи.values()
- значения.entries()
- пары ключ-значение
Объекты и их методы.
Как сделать копию?
Object.keys(obj)
- массив ключейObject.values(obj)
- массив значенийObject.entries(obj)
- массив ключ-значениеObject.fromEntries(arr)
- создать массив из ключ-значение
Глубокое копирование:structuredClone(старыйОбъект)
JSON.parse(JSON.stringify(старыйОбъект))
- при таком варианте без undefined
и сложных структур типа Date
.
Поверхностные копии:Object.assign(target, source1, source2, /* …, */ sourceN)
-
новыйОбъект = {…старыйОбъект}
Разница между Object
и Map
?
Map
ключи могут быть чем угодно (включая функции, объекты и любые примитивы).Object
ключи String
и Symbol
.
Ключи в Map
упорядочены в порядке вставки.
Ключи в Object
не упорядочены.
Дескрипторы объекта
- Как получить
- Как выглядит
- Как изменить
У свойств объектов помимо самого значения есть ещё дополнительные скрытые свойства.
Object.getOwnPropertyDescriptor(obj, prop)
- получить дескриптор свойства
{ "value": "John", "writable": true, "enumerable": true, "configurable": true }
Object.defineProperty(obj, prop, descriptor)
- изменить дескриптор
Object.getOwnPropertyDescriptors(obj)
- получить объект с всеми дескрипторами
{ prop1: { value: "Blah-blah", writable: false, ... }, prop2: { value: "Yald-yald" ...} }
Object.defineProperties(obj, descriptors)
- изменить все
Классы и их синтаксис
Синтаксис:
class MyClass { constructor() { ... } method1() { ... } static prop = 'bla-bla' get propName() { ... } set propName(val) { ... } }
Статическая (static
) переменная или метод, доступны только у самого класса (MyClass.prop вернёт 'bla-bla'
)
Объекты класса создаются через new
.
Класс можно расширить (наследование) через extends
:
class newClass extends MyClass { constructor(...args) { super(arg1) //конструктор родителя обязателен к вызову this.prop = 'val' method3() { super.method1() // можно вызывать методы родителя через super } } }
Если не написать конструктор, то под капотом будет конструктор с super(args)
.
Ошибки и их обработка
- Как обработать ошибку
- Как поймать асинхронную ошибку
- Что делать с логической ошибкой
- Проброс исключений
- Глобальный обработчик
- Конструкция
try..catch..finaly
catch
иfinaly
не обязательны - Асинхронные ошибки
Если ошибка вtry
произойдёт асинхронно, она не поймается. Для поимки такой ошибкиtry..catch
должен быть внутри асинхронной функции. - Генерация своих ошибок
Если происходит логическая ошибка, можно сгенерировать собственную ошибку с помощью оператораthrow
. - Проброс исключений
Принято, чтобыcatch
обрабатывал только известные ему ошибки, а остальные “пробрасывал” дальше. - Глобальный обработчик
В браузере можно использоватьwindow.onerror
, чтобы добавить функцию, которая сработает при глобальной ошибке. Обычно им ошибка отправляется разработчику.
window.onerror = function(message, url, line, col, error) { ... }
message
- сообщение об ошибке
url
- URL скрипта в котором произошла ошибка
line
,col
- номер строки и столбца в которых произошла ошибка
Для чего нужны пользовательские ошибки?
Как объявить пользовательскую ошибку?
Пользовательские ошибки нужны для создание своих классов ошибок (например HttpError
или DBError
) и своих свойств у этих ошибок (например у HttpError
код ошибки: 404
или 500
).
Оператор throw
позволяет использовать любые аргументы, но использование наследования от Error
нам даёт возможность убедиться в том что это объект ошибки через obj instanceof Error
.
Объясните, как this
работает в JavaScript.
- Глобально
- Внутри function
- Внутри ()=>{}
- Как явно указать this
- Потеря контекста
this - это текущий контекст
- Глобальный контекст
В баузерах -window
В Node.js -global
- Внутри
function
- позднее связывание, контекст в момент вызова
- обычный вызов, будет глобальным илиundefined
в строгом
- метод объекта, будет этот объект
- вызов конструктора, будет создаваемый объект - Внутри
()=>{}
- ранее связывание, контекст в момент создания
- контекст берётся из окружения - Явное указание
-fn.call(конт, [arg1, arg2...])
вызовет
-fn.apply(конт, [argsArr])
вызовет
-fn.bind(конт, [arg1, arg2...])
вернёт функцию - Возможные проблемы
- потеря контекста в коллбеках, надо стрелку илиbind
В чем разница между .call
, .apply
и .bind
?
Методы для задания контекста вызова.
- fn.call(конт, [arg1, arg2...])
вызовет
- fn.apply(конт, [argsArr])
вызовет
- fn.bind(конт, [arg1, arg2...])
вернёт функцию
Разниц между Object.freeze()
и Object.seal()
?
Object.seal(obj)
:
- запрещает добавлять/удалять свойства
- устанавливает configurable: false
для всех
- проверить Object.isSealed(obj)
, вернёт boolean
.
Object.freeze(obj)
:
- запрещает добавлять/удалять/изменять свойства
- устанавливает configurable: false, writable: false
для всех
- проверить Object.isFrozen(obj)
, вернёт boolean
.
Разница между typeof
и instanceof
?
typeof
- возвращает строку с названием типа
instanceof
- возвращает boolean
при проверки принадлежности к классу (’str’ instanceof String
)
Что такое оператор логического присваивания?
a &&= b
// тоже что и if (a) { a = b }
a ||= b
// тоже что и if (!a) { a = b }
a ??= b
// тоже что и if ( a === null || a === undefined) { a = b }
В чём разница между классом в ES6 и функцией-конструктором в ES5?
Класс это синтаксический сахар функций-конструкторов.
function Person(name) { this.name = name } class Person { constructor(name) { this.name = name } }
Основная разница возникает при использовании наследования:
- Класс можно расширить через extends:
class Student extends Person { constructor(name, studentID) { super(name) this.studentID = studentID } }
- При расширении функции-конструктора надо будет сделать больше действий:
function Student(name, studentID) { Person.call(this, name) // вызов конструктора супер-класса this.studentID = studentID // новое свойство } Student.prototype = Object.create(Person.prototype) Student.prototype.constructor = Student
Расскажите, как работает прототипное наследование.
- В чём идия наследования
- Как создать объект с наследованием
- Как проверить наследование
- Перебор свойств головного объекта
Основная идея наследования: если свойства или метода нет, то оно будет искаться у прототипа.
Object.create(другойОбъект)
- создаст новый объект с указанием “другого объекта” в качестве прототипа.
someObj instanseof ClassName
- способ проверки что someObj
является экземпляром головного объекта ClassName
У встроенных методов объекта enumerable: false
, значит что они не доступны в цикле.
Цикл for..in
перебирает как свои, так и унаследованные свойства. Остальные методы получения ключей/значений работают только с собственными свойствами объекта. При использовании именно for..in
отфильтровать свои свойства можно с помощью obj.hasOwnProperty(key)
.
Что такое замыкание?
Как его используют?
При создании функции и использовании внутри неё переменных - эти переменные доступны только локально внутри функции. Снаружи мы не можем получить к ним доступ. На хранение таких переменных выделяется определённая память. Когда функция заканчивает своё выполнение - эта память очищается. Таким образом эти переменные больше нигде не существуют.
Если одна функция определена внутри другой, то внутренняя функция имеет доступ к области видимости внешней функции.
Что бы создать замыкание нужно будет вернуть эту внутреннюю функцию:
function counter () { let count = 0 return function () { return count++ } }
Внутренняя функция замыкается на переменной внешней и не даёт памяти очиститься.
__proto__, [[Prototype]]
, prototype
У кого есть prototype?
у кого одинаковый proto?
[[Prototype]]
- ссылка на объект прототипа (тот который prototype
)
__proto__ - свойство аксессор для [[Prototype]]
prototype
- объект у функции конструктора в котором хранится набор свойств и методов класса. Есть только у Класса, функции конструктора и функций объявленных через function
(не стрелочных).
__proto__ объектов одного типа - будет одинаковым. Например ‘str1’.__proto__ === ‘str2’.__proto__
__proto__ устарело, надо использовать Object.getPrototypeOf
и Object.setPrototypeOf
Как работает контекст выполнения (execution context) в JavaScript?
Это абстрактное понятие, которое описывает окружение в котором выполняется код.
Каждый раз, когда выполняется функция - создаётся новый контекст выполнения, который содержит информацию о переменных, функциях, объекте this и других данных необходимых для работы функции.
Они образуют call stack. При вызове функции - новый контекст помещается на вершину стека. Код начинает выполняться в этом новом контексте. По завершению - контекст убирается из стека и управление возвращается к предыдущему контексту.
Как реализовать отложенную загрузку изображений?
Атрибут для тега <img>
- loading="lazy”
(auto
, lazy
, eager
- сразу).
Конкретный момент загрузки браузер определяет сам, но примерно, когда область видимости близка к изображению.
Чем отличаются события input
и change
?
Это события ввода.
Событие input
- Когда срабатывает: при любом изменении значения в элементе (например, при каждом нажатии клавиши).
- Где используется: поля ввода текста (
<input type="text">
,<textarea>
, и т.д.). - Применение: для отслеживания изменений в реальном времени.
Событие change
- Когда срабатывает: после завершения изменения значения и потери фокуса (например, после того как пользователь покинул поле ввода).
- Где используется: поля ввода текста, элементы выбора (
<select>
,<input type="checkbox">
,<input type="radio">
и т.д.). - Применение: для реакций на окончательные изменения.
Основные различия
-
input
срабатывает сразу при изменении значения. -
change
срабатывает только после завершения изменения и потери фокуса.
Что такое DOM?
Document Object Model - объектная модель документа, которую браузер создаёт в памяти на основании HTML кода.
Методы поиска элементов в DOM?
document.getElementById(’id’)
- по iddocument.getElementByName(’name’)
- по атрибуту name (используется редко)document.getElementsByTagName(’div’)
- все элементы по тегуdocument.getElementsByClassName(’class’)
- все элементы по имени классу
document.querySelector(’nav + p’)
- первый найденный по CSS селекторуdocument.querySelectorAll(’nav > ul > li’)
- все найденные по CSS селектору
Что такое BOM?
Browser Object Model - позволяет JS взаимодействовать с браузером
Содержит в себе такие объекты как location
, history
, screen
итд.
BOM не стандартизирована, поэтому может отличаться в разных браузерах.
Виды событий в JavaScript?
События мыши - mousedown
/mouseup
, click
, dblclick
, mousemove
, mouseover
События клавиатуры - keydown
/keyup
События формы и элементов управления - submit
, focus
/blur
, change
, reset
События перетаскивания
События объектов и фреймов
События анимации
События буфера обмена
События мультимедиа
События перехода
События, посылаемые сервером
События касания
События печати
Как добавить/удалить обработчик события на DOM-элемент?
- Атрибут HTML или свойство DOM-объекта -
on<событие>="код"
илиelem.onclick = function () { ...код... }
.
Убрать его можно назначивnull
-elem.onclick = null
.
Можно повесть только 1 функцию. - Метод
elem.addEventListener('событие', e => { код }, [options])
Убрать можно черезelem.removeEventListener('событие', имяФункции)
, поэтому анонимную функцию - нельзя будет удалить. - Есть необязательный объект со свойствами
[options]
, по умолчанию значенияfalse
:
once
: еслиtrue
, то выполнится один раз, затем удалится
capture
: фаза срабатывания события, еслиtrue
, то поймает на погружении
passive
: еслиtrue
, то это сигнал браузеру о том что обработчик не собирается отменять действие по умолчанию
Когда происходит событие - браузер создаёт объект события в котором записано много деталей события. Его можно передать в обработчик в качестве аргумента. В HTML объект события всегда будет event
.
Что такое распространение события (Event Propagation)?
Есть 3 фазы распространение события:
- Фаза погружения – событие сначала идёт сверху вниз.
- Фаза цели – событие достигло целевого элемента. Её нельзя обработать отдельно. При её достижении срабатывают оба варианта обработчика события.
- Фаза всплытия – событие идёт снизу вверх. По умолчанию именно на всплытие реагирует eventListener.
Разница между HTMLCollection и NodeList?
HTMLCollection - это динамическая коллекция элементов, которая автоматически обновляется при изменении структуры документа.
NodeList - это статическая коллекция узлов, которая не обновляется автоматически при изменении структуры документа.
Какая разница между узлами (Node) и элементами (Elements)?
Узел (Node)
Узлы — это базовые компоненты DOM, представляющие различные части документа (элементы, текст, комментарии, атрибуты и т.д.).
Элемент (Element)
Специфический тип узлов, представляющий HTML-теги.
Как динамически добавить элемент на HTML-страницу?
Создать элемент:const newElem = document.createElement(’p’)
Добавить к нему класс:newElem.classList.add(’someClass’)
Создать текстовый узел:const textNode = document.createTextNode(’Hello world’)
Добавить текстовый узел к элементу:newElem.appendChild(textNode)
Добавить элемент на страницу:document.getElementById(’test’).appendChild(newElem)
Разница между e.preventDefault() и e.stopPropagation()?
event.preventDefault()
- основной способ отменить действие по умолчанию.
Альтернативный метод - вернуть false
из обработчика on<событие>
. Другие возвраты не будут работать.
У клика на ссылку - отменит переход на другую страничку. У клика на кнопку подтверждения формы - отменит отправку.
event.stopPropagation()
- остановит всплытие события на этом моменте. Не стоит пользоваться без крайней необходимости, так как от остановки всплытия могут быть проблемы, например нельзя будет отследить клики на документе для аналитики.
Разница между event.target и event.currentTarget?
target - элемент, который вызвал начало всплытия события
currentTarget - элемент на котором всплытие находится в текущий момент
Разница между .stopPropagation() и .stopImmediatePropagation()?
event.stopPropagation()
- остановит всплытие события на этом моменте. Не стоит пользоваться без крайней необходимости, так как от остановки всплытия могут быть проблемы, например нельзя будет отследить клики на документе для аналитики.
event.stopImmediatePropagation()
- остановит всплытие + события на этом элементе не будут выполнены
Разница между innerHTML
и outerHTML
?
innerHTML
- свойство DOM элемента, позволяет получить или установить содержимое “внутри” выбранного элемента в виде строки
outerHTML
- свойство DOM элемента, позволяет получить или установить содержимое “внутри” выбранного элемента и самого элемента в виде строки
Разница между JSON и XML?
JSON:
- Текстовый формат обмена данными
- Ключ-значение
- Компактный
XML:
- Язык разметки, в котором есть синтаксис
- Объёмный из-за разметки
- Парсинг медленнее
Как узнать об использовании метода event.preventDefault()
?
event.defaultPrevented
- вернёт boolean.
Для чего используется свойство window.navigator?
Возвращает объект описания приложения, которое выполняет скрипт. Почти всегда это браузер.
Содержит:
- информацию о браузере
- предпочитаемый язык и массив предпочитаемых языков
- включены ли куки
Для чего используется метод .focus()
?
Устанавливает фокус на указанный элемент.
Когда элемент в фокусе - он перехватывает события клавиатуры.
Для чего используется свойство .forms
?
document.forms
вернёт HTML-коллекцию с всеми формами страницы. (можно применять только к document)
Разница между методами .submit()
и .requestSubmit()
?
Метод .submit()
позволяет программно отправить форму, но он игнорирует валидацию полей формы и не запускает обработчики события submit
на форме.
Метод .requestSubmit()
также позволяет программно отправить форму, но он учитывает валидацию полей формы (атрибут required
) и запускает обработчики события submit
на форме.
Расскажите о IntersectionObserver
?
Это браузерный API, которое позволяет отслеживать изменения в пересечении элементов с viewport или другим элементом.
Расскажите о URLSearchParams
?
URLSearchParams
- это класс, предоставляющий удобное API для формирования строки поисковых параметров
Как можно создавать пользовательское событие (custom events) в JavaScript?
Как вызвать его?
Как отличить от настоящего?
Через класс Event
и CustomEvent
можно создать объект события.new Event(type, [options])
new CustomEvent(type, [options])
type
- тип события, его “имя” по которому будем с ним потом работать
options
– объект с необязательными свойствами (по умолчанию false
):
bubbles
– если true
, тогда событие всплывает
cancelable
– если true
, тогда можно отменить действие по умолчанию
detail
– только у CustomEvent. Туда можно записать что угодно, отдельное оно - для избегания возможных конфликтов.
Через метод elem.dispatchEvent(event)
можно вызвать срабатывание любого события, в том числе и пользовательского.
Отличить “настоящее” событие от вызванного вручную возможно через свойство события isTrusted
(true
- настоящее).
Принципы ООП?
Инкапсуляция
Наследование
Абстракция
Полиморфизм
Что такое наследование (ООП)?
В ООП наследование позволяет одному классу (подклассу) наследовать свойства и методы другого класса (суперкласса). Это позволяет использовать повторно код суперкласса и расширять его функциональность в подклассах.
Что такое инкапсуляция (ООП)?
Инкапсуляция заключается в сокрытии внутреннего состояния объекта и предоставлении доступа к нему только через публичные методы.
Что такое абстракция (ООП)?
Абстракция позволяет выделить общие черты и поведение объектов и представить их в виде классов. Это упрощает работу с объектами, так как мы работаем с обобщенными моделями, а не с деталями их реализации.
class Bird { fly() { throw new Error("Should be overridden"); } } class Sparrow extends Bird { fly() { console.log("Sparrow flies"); } } class Eagle extends Bird { fly() { console.log("Eagle soars"); } }
Что такое полиморфизм (ООП)?
Это способность использовать объекты разных типов через один и тот же интерфейс.
function makeBirdFly(bird) { bird.fly(); // Полиморфный вызов метода fly } const sparrow = new Sparrow(); const eagle = new Eagle(); makeBirdFly(sparrow); // Sparrow flies makeBirdFly(eagle); // Eagle soars
Зачем нужен конструктор Proxy?
Конструктор Proxy в JavaScript позволяет перехватывать и настраивать операции с объектами, такие как чтение, запись и удаление свойств. Прокси-объекты предоставляют гибкий механизм для управления поведением объектов, обеспечивая контроль и защиту данных без изменения исходного объекта.
Что такое приватные аксессоры (геттеры и сеттеры)?
Это обычные геттеры и сеттеры, только с использованием нового символа, который обозначает приватность - #
.
Свойства и методы, помеченные #
- могут быть доступны только внутри класса. Вызвать этот метод у объекта класса - нельзя.
get #getName() { … }
set #setName() { … }
В чём разница между стеком вызовов (call stack) и очередью событий (task queue)?
Call Stack: Обрабатывает синхронные задачи. Функции добавляются и удаляются в порядке выполнения.
Task Queue: Обрабатывает асинхронные задачи, которые выполняются, когда стек вызовов пуст.
Что такое обёртывание исключений?
Как его реализовать?
Можно сделать так, что бы из функции приходил всегда один тип ошибки (аля “имяФункцииОшибка”), а в себе уже содержал ссылку на оригинальную ошибку.
Например таким образом создать класс для ошибки:
class ReadError extends Error { constructor(message, cause) { super(message); this.cause = cause; // тут будет оригинальная ошибка this.name = 'ReadError'; } }
В catch
мы обработаем все причины и “обернём” их в один тип ошибки:
try {...} catch (err) { if (err instanceof SyntaxError) { // msg + ссылка на оригинальную ошибку throw new ReadError("Синтаксическая ошибка", err); } else { throw err; } } try {...} catch (err) { if (err instanceof ValidationError) { // msg + ссылка на оригинальную ошибку throw new ReadError("Ошибка валидации", err); } else { throw err; } }
Снаружи будем ловить один тип ошибки ReadError
и если что иметь доступ к оригинальной причине ошибки через cause
. Неизвестные ошибки пробрасываем дальше.