JavaScript Flashcards

Question 1

Q

Что такое Websokets?

Answer

A

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

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

Question 2

Q

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

Answer

A

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

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

Question 3

Q

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

Answer

A

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

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

Question 4

Q

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

Answer

A

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

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

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

Q

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

Answer

A

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

Функции-генераторы объявляются с помощью 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

Q

“use strict”

Answer

A

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

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

Question 7

Q

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

Answer

A

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

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

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

Question 8

Q

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

Answer

A

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

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

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

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

Question 9

Q

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

Answer

A

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

Question 10

Q

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

Answer

A

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

Question 11

Q

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

Answer

A

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

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

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

Question 12

Q

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

Answer

A

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

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

Question 13

Q

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

Answer

A

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

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

Question 14

Q

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

Answer

A

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

Question 15

Q

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

Answer

A

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

Плюсы:

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

Минусы:

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

Question 16

Q

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

Answer

A

Стандартный <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

Q

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

Answer

A

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

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

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

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

Question 18

Q

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

Answer

A

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

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

Question 19

Q

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

Answer

A

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

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

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

Question 20

Q

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

Answer

A

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

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

Question 21

Q

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

Answer

A

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

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

Question 22

Q

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

Answer

A

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

Question 23

Q

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

Answer

A

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

Question 24

Q

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

Answer

A

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

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

Question 25

Q

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

Answer

A

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

Q

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

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

Answer

A

Промисы это один из приёмов работы с асинхронным кодом в JS.

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

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

Промис создаётся через конструктор new Promise(function(resolve, reject) { … }).

Функция внутри - зовётся исполнитель (executor), после создания он автоматически сразу запускается.

resolve и reject - коллбеки, которые предоставляет JS, принимают 1 аргумент, остальные игнорируются.

В промисе обязательно должен быть выполнен resolve или reject.

resolve - выполняется при успешном завершение, в аргумент передаётся результат. Выполнение resolve не прерывает выполнение функции-исполнителя.

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

Обработка промисов всегда асинхронная, т.к. все действия промисов проходят через «очередь микрозадач».

Question 27

Q

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

Answer

A

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

then, catch и finally - методы объекта Promise.

then(f (result) {...} [, f (err) {...}]) - аргументы это функции. Первая выполняется при статусе промиса “выполнено успешно”, вторая при статусе промиса “выполнено с ошибкой”. Сами функции получают в качестве аргумента значение свойства result (аргумент resolve или reject). Второй аргумент не является обязательным.

catch(f (err) {...}) - это сокращённый вариант then(null, f (err) {...})

finally(f () {…}) - будет выполнен в любом случае и не имеет аргументов. Пропускает результат или ошибку через себя к последующим обработчикам. Не должен ничего возвращать, поэтому у finally игнорируется возвращаемое значение.

Question 28

Q

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

Answer

A

Если промис завершается с ошибкой (reject) или во время выполнения получается ошибка, то управление переходит в ближайший обработчик ошибок catch. Это работает как невидимый try…catch внутри промиса и обработчиках.

Если внутри catch произошла ошибка - она перейдёт к следующему catch. Если его нет, то будет проброс исключения.

Ошибку, которая вылетела в глобальное окружение можно поймать используя событие unhandledrejection и addEventListener по этому событию.

Question 29

Q

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

Answer

A

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

Question 30

Q

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

Answer

A

Плюсы:

Исправляют проблемы JS
Синтаксический сахар (более короткий код)
Добавление статической типизации

Минусы:

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

Question 31

Q

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

Answer

A

React и Redux:

React Devtools
Redux Devtools

JavaScript:

Chrome Devtools
Отладка при помощи console.log

Question 32

Q

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

Answer

A

Циклы for..in и for..of, метод .forEach().

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

Question 33

Q

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

Answer

A

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

Асинхронные функции не блокируют процесс выполнения скрипта.

Question 34

Q

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

Answer

A

Event loop - не является частью движка JS и предоставляется средой, например браузером.

Это бесконечный цикл, который запускается после выполнения основного кода, его алгоритм работы:

Проверяется стек вызова и выполняются все задачи из него.
Проверяется очередь задач, берётся маркозадача из очереди, помещается в стек вызова и выполняется.
Выполняются все микрозадачи.
Повторяем.

Очередь вызовов (task queue) - очередь в которую попадают макрозадачи на исполнение из Web API.

Question 35

Q

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

Answer

A

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

Микрозадачи (jobs)
- промисы
- queueMicrotask(func).

Выполнение всех микрозадач за один раз - гарантирует им общее окружение.

Question 36

Q

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

Answer

A

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

Question 37

Q

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

Answer

A

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

const и let - блочная область видимости.

const нельзя изменить, let возможно изменить.

Question 38

Q

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

Answer

A

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

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

Question 39

Q

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

Answer

A

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

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

Q

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

Answer

A

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

Question 41

Q

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

Answer

A

Spread - распаковывает массив или объект.

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

Question 42

Q

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

Answer

A

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

Question 43

Q

Объясните разницу между <script>, <script async> и <script defer>.

Answer

A

Предназначены для оптимизации загрузки скриптов.

script - загружается и выполняется немедленно, блокируя парсинг HTML

async - загружается асинхронно, выполняется сразу

defer - загружается асинхронно, выполняется после парсинга HTML

Question 44

Q

Типы данных в JavaScript?

Answer

A

Восемь основных типов.

string

number

bigInt

boolean

simbol

null

undefined

object

Question 45

Q

Разница между function declaration и function expression?

Answer

A

function declaration
function sum(a, b) {...}

function expresion
const sum = function(a, b) {...}

function declaration может всплывать, а значит этой функцией можно воспользоваться до её объявления.

Question 46

Q

Типы таймеров в JavaScript?

Answer

A

setTimeout(func, время) - вызывает функцию один раз через “время”

setInterval(func, время) - вызывает функцию периодически через “время”

обе функции возвращают ID таймера для его удаления через clearInterval(id)

Question 47

Q

Что такое область видимости (Scope)?

Answer

A

Область видимости это место, откуда мы имеем доступ к переменным или функциям.

Есть три типа областей - глобальная, функциональная или локальная и блочная (внутри {}).

Question 48

Q

Как превратить любой тип данных в булевый?
Перечислите ложные значения в JS.

Answer

A

Boolean(значение)
!!значение
if (значение)

Ложные значения: 0, null, undefined, NaN, false

Question 49

Q

Методы строк в JavaScript?

Answer

A

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 ’) - строку, срезает пробелы по краям

Question 50

Q

Методы массивов в JavaScript?

Answer

A

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 для каждого элемента массива.

Question 51

Q

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

Answer

A

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

Побочные эффекты - любые взаимодействия с внешней средой. Файловые операции, отправка или приём данных по сети, вывод в консоль или изменения внешних переменных.

Question 52

Q

Почему в JS функции называют объектами первого класса?

Answer

A

Потому что они могут быть:
1. Присвоены переменным.
2. Переданы как аргументы другим функциям.
3. Возвращены из других функций.
4. Созданы во время выполнения программы (функции могут быть созданы динамически).

Question 53

Q

Как определить наличие свойства в объекте?

Answer

A

obj.hasOwnProperty(’свойство’) - вернёт bolean

‘свойство’ in obj - вернёт bolean

Question 54

Q

Что такое псевдомассив arguments?

Answer

A

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

Question 55

Q

Почему результат сравнения 2х объектов это false?

Answer

A

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

Question 56

Q

Что такое прототипное наследование?
Как создать объект без прототипа?

Answer

A

Все объекты JS имеют свойство prototype, которое является ссылкой на другой объект. Когда к свойству объекта происходит обращение, то если свойства нет у текущего объекта, то оно будет искаться у его прототипа, затем прототип прототипа и так далее. До тех пор пока не найдётся свойство или не достигается конец цепочки.

Для создания объекта без прототипа надо Object.create(null)

Question 57

Q

Что такое NaN? Как определить, что значение равно NaN?

Answer

A

Not a number.

Получается когда математическая функция сработала не верно, например выполнение parseIns(строка) или Math.sqrt(-1) (нет корня отрицательного числа).

Проверить возможно только через функцию isNaN(значнеие), так как NaN === NaN будет false.

Question 58

Q

Что такое объектная обертка (Wrapper Objects)?

Answer

A

Примитив во время исполнения кода временно преобразуется в объект. Поэтому ему и доступны все методы этого типа примитивов.

Question 59

Q

Как в JavaScript создать объект?

Answer

A

Объектный литерал - const obj = {…}

Функция конструктор - function Persone(name) {…}
Имя функции конструктора обязательно с большой буквы, а вызывается она через new Person(’Max’)

Метод Object.create(прототип)

Question 60

Q

Для чего используется ключевое слово new?

Answer

A

Для создания объекта через функцию конструктор или класс - надо использовать new.

Question 61

Q

Для чего используется оператор двойного отрицания (!!)?

Answer

A

Для приведения значения к логическому типу (boolean).

Question 62

Q

Для чего используется оператор остатка (%)?

Answer

A

Для получения остатка от деления. Практическое применение - определение кратности.

Question 63

Q

Как проверить, является ли значение массивом?

Answer

A

Array.isArray(переменная) - возвращает bolean

Question 64

Q

Как работает boxing/unboxing в JavaScript?

Answer

A

Так называются механизмы, которые происходят во время вызова методов на примитивах. Примитыв сначала преобразуется в объект. У объекта есть метод, он выполняется. Затем объект уничтожается и остаётся снова приметив.

Answer 65

A

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

const memoize = (fn) => {
  const cache = {}
  return (params) => {
	  if (cache[params]) {
	    return cache[params]
	  } else {
		  cache[params] = fn(params)
		  return cache[params]
	  }
  }
}

Answer 66

A

obj.hasOwnProperty(’prop’) - проверит только свои собственные свойства

‘prop’ in obj - проверит в том числе в прототипах

Answer 67

A

Поверхностное копирование - копирование только верхнего уровня объекта.
- const car2 = {…car1}
- const car2 = Object.assign({}, car1);

Варианты создания глубокой копии:
- const car2 = JSON.parse(JSON.stringify(car1))
- const car2 = structuredClone(car1);

Answer 68

A

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

Для кастомной реализации возможно вернуть в качестве ответа “this”.

const counter = {
  count: 0,
  plusOne() {
	  this.count++
	  return this
  },
  minusOne() {
  	 this.count--
	   return this
  }
}

Answer 69

A

Не возможно использовать в “use strict” - будет ошибка.

Создаётся, если присвоить значение идентификатору, который не был объявлен с использованием ключевых слов var, let или const. Они объявляются в глобальной области видимости. Считается плохой практикой.

Answer 70

A

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

Answer 71

A

Object.create(obj, [descriptors]) – создаёт пустой объект со свойством [[Prototype]], указанным как obj.

В качестве второго аргумента может быть дескриптор.

Answer 72

A

arr.slice(от, до) - вернёт новый массив (подмассив от индекса и до индекса), старый массив не изменит

arr.splice(от, [сколько], [что вставить]) - вернёт удалённый подмассив, изменит старый массив, на место удаления добавит новые данные

Answer 73

A

arr.find(коллбек) - вернёт первый подходящий элемент

arr.findIndex(коллбек) - вернёт индекс первого подходящего

arr.indexOf(значение) - вернёт индекс найденного значения

Answer 74

A

Методы массива.
push - добавляет в конец, возвращает новую длину
unshift - добавляет в начало, возвращает новую длину

pop - удаляет в конце, возвращает элемент
shift - удаляет в начале, возвращает элемент

Answer 75

A

Плюсы:
- Так как объекты не изменяются после создания, поведение кода становится более предсказуемым и легче тестируется

Минусы:
- Повышенные расходы на память и в целом возможное понижение производительности

Способы:
- методы, которые возвращают новый массив
- возможно заморозить объект Object.freeze()
- встроенные библиотеки

Answer 76

A

alert(текст) - окно с текстом и кнопкой Ок

confirm(текст) - вопрос с Ок и отмена, вернёт boolean в переменную

prompt(текст, [значение по умолчанию]) - окно для ввода

Answer 77

A

Стандартные встроенные объекты. Object, Array, Number итд.
Коллекции объектов. Map, Set, WeakMap, WeakSet.
Объект для работы с числовыми данными. Math.
Объект для работы с отправкой объектов: JSON

Answer 78

A

ReferenceError

TypeError

SyntaxError

Логическая

Answer 79

A

Динамически типизированный язык. Тип переменной проверяется во время выполнения. Так же у JS слабая динамическая типизация - тип может меняться самостоятельно.

Answer 80

A

Это шаблон для сопоставления символов в строках.

Answer 81

A

Это когда функция вызывает сама себя.

Обязательные условия рекурсии:

вызов функции самой себя
наличие базового случай - так называется условие при котором функция выходит из рекурсии

Answer 82

A

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

Answer 83

A

Альтернатива 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')
}

Answer 84

A

Выражение - это фрагмент кода, которая в ходе своего выполнения приводит к возврату значения.

Инструкция - это фрагмент кода, который выполняет какое-то действие, которое является командой. Например if, else, switch, while итд.

Answer 85

A

Методы проверки значений массива.

.some(коллбек) - вернёт true, если хотя бы 1

.every(коллбек) - вернёт true, если все

Answer 86

A

Math.random() - вернёт случайное число от 0 до 1 (включая).

function getRandomArbitrary(min, max) { // с заданным интервалом
  return Math.random() * (max - min) + min;
}

Answer 87

A

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 - оператор запятая (вычисляет оба операнда и возвращает значение последнего операнда)

Answer 88

A

Аргументы - задаются во время описания функции и используются в теле для описания взаимодействия с ними.

Параметры - те значения, что указываются во время вызова функции.

Answer 89

A

Примитивы - базовые типы данных. Имеют фиксированный размер и хранятся непосредственно в переменной или передаются по значению.

Объекты - сложные структуры данных. Могут содержать пары “ключ-значение”, функции и другие объекты. Все объекты передаются “по ссылке”.

Answer 90

A

Это баг. Из-за необходимости обратной совместимости - его не исправляют.

Answer 91

A

arr.includes(elem, [индекс]) - вернёт boolean, ищет elem начиная с индекса

str.includes(подстрока, [индекс]) - вернёт boolean, ищет подстроку начиная с индекса

Answer 92

A

Числам можно добавить “_”

Например: let number = 1_000_000_000

Answer 93

A

Выбор элементов:
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-элемент.атрибут - возможно задать значение атрибута

Answer 94

A

DOMContentLoaded- запускается после создания DOM, не дожидается загрузки других ресурсов.

load - запускается в конце загрузки документа. Все объекты находятся в DOM, все изображения и скрипты загрузились.

Answer 95

A

Упрощённый синтаксис - стрелочка, простой 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 - контекст потерялся

Answer 96

A

Буквы, цифры, _ или $
Первый символ не цифра
Функция должна называться в соответствии с тем что она делает. Обычно глагол.
использование camelCase

Answer 97

A

Явное преобразование - намеренное преобразование.

Неявное преобразование - изменение типа без участия разработчика.

1 + ‘6’ = ‘16’ // 1 стал строкой

false + true = 1 // 0 + 1

6 * ‘2’ = 12 // 2 стал цифрой

Answer 98

A

Создаёт новый массив на основе переданного объекта.

Объект должен массиво-подобным или итерируемым. Примеры: arguments, NodeList, HTMLCollection.

Вторым аргументом можно передать функцию для преобразования каждого элемента, третьим значение this для функции.

Answer 99

A

Object.assign({}, arr)
const obj = {…arr}
Перебрать массив используя arr.reduce() или arr.forEach().

Answer 100

A

Позволяет считывать или устанавливать на html-элементы кастомные атрибуты.

Answer 101

A

Проходит по всем доступным ссылкам начиная с самого корня. Все ссылки по которым прошёл - помечаются. Затем все до которых не добрался - удаляются.

Answer 102

A

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

Основные причины:

Глобальные переменные.
Объявленные без let, const, var. Избежать возможно используя строгий режим.
Таймеры.
Таймеры надо очищать.
Замыкания.
Ненужные обработчики событий

Answer 103

A

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

Answer 104

A

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

debounce - гарантирует что функция не будет выполнена, пока не пройдёт какое-то количество времени без каких-то попыток вызова этой функции (например поиск после завершения ввода в поле)

function debounce(func, wait) {
  let timeout
  return function(...args) {
    clearTimeout(timeout)
    timeout = setTimeout(() => func.apply(this, agrs), wait)
  }
}

throttle - гарантирует что функция будет вызвана не более 1 раза за определённое время (например изменение размера окна)

Answer 105

A

Асинхронные функции - это функции, которые не блокируют основной поток исполнения.

Callback
Promice
async/await

Answer 106

A

Плюсы:

Более быстрое выполнение кода. Нет блокировки потока выполнения.
Более плавный пользовательский интерфейс. Можем обновлять интерфейс не прерывая остальные операции.
Удобное взаимодействие с сетевыми ресурсами.

Минусы:

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

Answer 107

A

Гоночные условия.
Несколько операций делают одно и тоже - не известен результат.
Зависания
Когда операции ожидают завершения друг друга.
Потеря данных
Если запись происходит в неожиданный момент.
Трудности отладки

Answer 108

A

allback-функция - передача функции в качестве аргумента для функции.

Callback Hell - вложенность коллбеков, при которой получается несколько уровней.

Использовать promice и async/await.

Answer 109

A

Актуальный способ написания асинхронного кода. Основан на промисах.

Для использования надо объявлять функцию как асинхронную - async function() {}.

Тогда внутри можно будет использовать await.

Такая функция вернёт промис.

Answer 110

A

В качестве аргумента - массив промисов.

all - вернёт массив результатов, только если все завершились успешно, либо ошибку
race - вернёт промис, первый выполненный (результат или ошибку)
any - вернёт промис, первый любой успешный

Answer 111

A

Похож на Promise.all(), но не все должны обязательно быть успешными.

Promise.all() - вернёт массив результатов или ошибку.

Answer 112

A

Цепочка промисов .then() или async/await

Answer 113

A

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)
});

Answer 114

A

JSON - java script object notation формат данных, который используется для хранения и передачи данных между сервером и клиентом.

Представляет набор пар ключ-значение.

Ключи всегда строки.

Значения могут быть: строками, числами, объектами, массивами, булевыми или null.

Answer 115

A

Коэффициент сжатия - это показатель эффективности сжатия данных.

Есть какие-то механизмы сжатия данных. А чем меньше данные - тем быстрее всё загрузится.

Answer 116

A

ECMAScript — это стандарт (набор правил) для языков программирования. JavaScript — это язык, который следует этим правилам. Таким образом, JavaScript — реализация стандарта ECMAScript.

Answer 117

A

Нельзя. Можно только изменить объект по сохранённой ссылке.

Answer 118

A

Механизм, который позволяет делать вид, что переменные с let и const на самом деле не всплывают.

Answer 119

A

for..in - перечисляет индексы

for..of - перечисляет значения

Answer 120

A

Set - коллекция уникальных значений.

Map - коллекция ключ значение. Отличие в том что ключtм может быть любой тип.

WeakSet и WeakMap - не препятствуют сборщику мусора удалять свои значения. Если значение есть только в коллекции и никто на него не ссылается.

Answer 121

A

Итератор — это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности. Вернёт объект с value и done.
Итерируемые объекты - объекты, которые содержат в себе итератор.

Answer 122

A

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

Создаются с помощью Symbol(’строка’)

Answer 123

A

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

Answer 124

A

Тип данных для работы с большими числами (более 64 бит).

Создать можно через BigInt(123…) или 123n.

Answer 125

A

Вернёт объект с дескрипторами всех свойств.

{
  prop1: { "value": "Blah-blah", "writable": true, "enumerable": true, "configurable": true },
  prop2: { value: "yada-yada", writable: true, "enumerable": true, "configurable": true }
}

Дескриптор одного свойства:
value - значение
enumerable - перечисляемый
writable - можно изменять значение
configurable - запрещает изменять значения остальных дескрипторов (кроме значения)

Answer 126

A

Методы объектов.

keys - вернёт массив ключей

values - вернёт массив значений

entries - вернёт массив массивов [ключ, значение]

Answer 127

A

Для создания объекта из результата выполнения метода .entries().

Answer 128

A

arr.flat(число) - сплющивает массив на указанное количество уровней (можно указать Infinity). Так же может удалять пустые значения.

const arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flat();); // [1, 2, 3, 4, [5, 6]]

arr.flatMap(коллбек) - применяет коллбек к элементам, а затем делает flat

Answer 129

A

str.padStart(3, ‘=’) // ‘===test’
str.padEnd(5) // ‘test ’

Добавить в начало или в конец указанных символов.

Answer 130

A

str.startsWith(’строка’, [длина]) - вернёт boolean, проверяет наличие подстроки в начале или в конце.

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

Answer 131

A

str.trim()

str.trimStart()

str.trimEnd()

Answer 132

A

Используется для исключения ошибки при обращении к несуществующим свойствам и методам.
Если свойства нет - вернётся undefined.

let user = {
    name: 'John',
    address: {
        city: 'New York'
    }
};

console.log(user.address?.city); // 'New York'
console.log(user.address?.street); // undefined

Answer 133

A

str.replace(’строка’, ‘подстрока’) - заменит первое найденное

str.replace(regExp, ‘строка’) - заменит всё найденное

str.replaceAll(’строка’ или regExp, ‘строка’) - заменит всё найденное

Answer 134

A

const text = x ?? y

Это тоже самое что и:
const text = (x ≠ null && x ≠ undefined) ? x : y

Если первое значение не определено, то берём второе.

Answer 135

A

В выражении const result = x ?? y оператор ?? отбросит x, только если он будет null или undefined

В выражении const result = x || y оператор || выполнит скрытое преобразование строки '' и 0 в false

Answer 136

A

new Map() - создать Map
.set(key. value) - добавить пару
.get(key) - получить значение (undefined, если не найдено)
.has(key) - проверяет наличие ключа, boolean
.delete(key) - удаляет ключ
.clear() - очистит всю коллекцию
.size - размер

Answer 137

A

new Set(iterable) - создать сет
.size - размер
.add(value) - добавляет значение, если оно уже есть, то не добавит (вернёт сам set в ответ)
.delete(value) - удаляет значение, вернёт true если оно было
.has(value) - проверяет наличие значения, вернёт boolean
.clear() - очищает всю коллекцию

Answer 138

A

Использовать .forEach() и for…of.

Как альернативный вариант получить псевдомассивы:
.keys() - ключи
.values() - значения
.entries() - пары ключ-значение

Answer 139

A

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) -
новыйОбъект = {…старыйОбъект}

Answer 140

A

Map ключи могут быть чем угодно (включая функции, объекты и любые примитивы).
Object ключи String и Symbol.

Ключи в Map упорядочены в порядке вставки.
Ключи в Object не упорядочены.

Answer 141

A

У свойств объектов помимо самого значения есть ещё дополнительные скрытые свойства.

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) - изменить все

Answer 142

A

Синтаксис:

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).

Answer 143

A

Конструкция
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 - номер строки и столбца в которых произошла ошибка

Answer 144

A

Пользовательские ошибки нужны для создание своих классов ошибок (например HttpError или DBError) и своих свойств у этих ошибок (например у HttpError код ошибки: 404 или 500).

Оператор throw позволяет использовать любые аргументы, но использование наследования от Error нам даёт возможность убедиться в том что это объект ошибки через obj instanceof Error.

Answer 145

A

this - это текущий контекст

Глобальный контекст
В баузерах - window
В Node.js - global
Внутри function
- позднее связывание, контекст в момент вызова
- обычный вызов, будет глобальным или undefined в строгом
- метод объекта, будет этот объект
- вызов конструктора, будет создаваемый объект
Внутри ()=>{}
- ранее связывание, контекст в момент создания
- контекст берётся из окружения
Явное указание
- fn.call(конт, [arg1, arg2...]) вызовет
- fn.apply(конт, [argsArr]) вызовет
- fn.bind(конт, [arg1, arg2...]) вернёт функцию
Возможные проблемы
- потеря контекста в коллбеках, надо стрелку или bind

Answer 146

A

Методы для задания контекста вызова.
- fn.call(конт, [arg1, arg2...]) вызовет
- fn.apply(конт, [argsArr]) вызовет
- fn.bind(конт, [arg1, arg2...]) вернёт функцию

Answer 147

A

Object.seal(obj) :
- запрещает добавлять/удалять свойства
- устанавливает configurable: false для всех
- проверить Object.isSealed(obj), вернёт boolean.

Object.freeze(obj) :
- запрещает добавлять/удалять/изменять свойства
- устанавливает configurable: false, writable: false для всех
- проверить Object.isFrozen(obj), вернёт boolean.

Answer 148

A

typeof - возвращает строку с названием типа

instanceof - возвращает boolean при проверки принадлежности к классу (’str’ instanceof String)

Answer 149

A

a &&= b // тоже что и if (a) { a = b }
a ||= b // тоже что и if (!a) { a = b }
a ??= b // тоже что и if ( a === null || a === undefined) { a = b }

Answer 150

A

Класс это синтаксический сахар функций-конструкторов.

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

Answer 151

A

Основная идея наследования: если свойства или метода нет, то оно будет искаться у прототипа.

Object.create(другойОбъект) - создаст новый объект с указанием “другого объекта” в качестве прототипа.

someObj instanseof ClassName - способ проверки что someObj является экземпляром головного объекта ClassName

У встроенных методов объекта enumerable: false, значит что они не доступны в цикле.

Цикл for..in перебирает как свои, так и унаследованные свойства. Остальные методы получения ключей/значений работают только с собственными свойствами объекта. При использовании именно for..in отфильтровать свои свойства можно с помощью obj.hasOwnProperty(key).

Answer 152

A

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

Если одна функция определена внутри другой, то внутренняя функция имеет доступ к области видимости внешней функции.

Что бы создать замыкание нужно будет вернуть эту внутреннюю функцию:

function counter () {
	let count = 0
	return function () {		
		return count++
	}
}

Внутренняя функция замыкается на переменной внешней и не даёт памяти очиститься.

Answer 153

A

[[Prototype]] - ссылка на объект прототипа (тот который prototype)

__proto__ - свойство аксессор для [[Prototype]]

prototype - объект у функции конструктора в котором хранится набор свойств и методов класса. Есть только у Класса, функции конструктора и функций объявленных через function (не стрелочных).

__proto__ объектов одного типа - будет одинаковым. Например ‘str1’.__proto__ === ‘str2’.__proto__

__proto__ устарело, надо использовать Object.getPrototypeOf и Object.setPrototypeOf

Answer 154

A

Это абстрактное понятие, которое описывает окружение в котором выполняется код.

Каждый раз, когда выполняется функция - создаётся новый контекст выполнения, который содержит информацию о переменных, функциях, объекте this и других данных необходимых для работы функции.

Они образуют call stack. При вызове функции - новый контекст помещается на вершину стека. Код начинает выполняться в этом новом контексте. По завершению - контекст убирается из стека и управление возвращается к предыдущему контексту.

Answer 155

A

Атрибут для тега <img> - loading="lazy” (auto, lazy, eager - сразу).

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

Answer 156

A

Это события ввода.

Событие input

Когда срабатывает: при любом изменении значения в элементе (например, при каждом нажатии клавиши).
Где используется: поля ввода текста (<input type="text">, <textarea>, и т.д.).
Применение: для отслеживания изменений в реальном времени.

Событие change

Когда срабатывает: после завершения изменения значения и потери фокуса (например, после того как пользователь покинул поле ввода).
Где используется: поля ввода текста, элементы выбора (<select>, <input type="checkbox">, <input type="radio"> и т.д.).
Применение: для реакций на окончательные изменения.

Основные различия

input срабатывает сразу при изменении значения.
change срабатывает только после завершения изменения и потери фокуса.

Answer 157

A

Document Object Model - объектная модель документа, которую браузер создаёт в памяти на основании HTML кода.

Answer 158

A

document.getElementById(’id’) - по id
document.getElementByName(’name’) - по атрибуту name (используется редко)
document.getElementsByTagName(’div’) - все элементы по тегу
document.getElementsByClassName(’class’) - все элементы по имени классу

document.querySelector(’nav + p’) - первый найденный по CSS селектору
document.querySelectorAll(’nav > ul > li’) - все найденные по CSS селектору

Answer 159

A

Browser Object Model - позволяет JS взаимодействовать с браузером

Содержит в себе такие объекты как location, history, screen итд.

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

Answer 160

A

События мыши - mousedown/mouseup, click, dblclick, mousemove, mouseover
События клавиатуры - keydown/keyup
События формы и элементов управления - submit, focus/blur, change, reset

События перетаскивания
События объектов и фреймов
События анимации
События буфера обмена
События мультимедиа
События перехода
События, посылаемые сервером
События касания
События печати

Answer 161

A

Атрибут 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.

Answer 162

A

Есть 3 фазы распространение события:

Фаза погружения – событие сначала идёт сверху вниз.
Фаза цели – событие достигло целевого элемента. Её нельзя обработать отдельно. При её достижении срабатывают оба варианта обработчика события.
Фаза всплытия – событие идёт снизу вверх. По умолчанию именно на всплытие реагирует eventListener.

Answer 163

A

HTMLCollection - это динамическая коллекция элементов, которая автоматически обновляется при изменении структуры документа.
NodeList - это статическая коллекция узлов, которая не обновляется автоматически при изменении структуры документа.

Answer 164

A

Узел (Node)
Узлы — это базовые компоненты DOM, представляющие различные части документа (элементы, текст, комментарии, атрибуты и т.д.).

Элемент (Element)
Специфический тип узлов, представляющий HTML-теги.

Answer 165

A

Создать элемент:
const newElem = document.createElement(’p’)
Добавить к нему класс:
newElem.classList.add(’someClass’)
Создать текстовый узел:
const textNode = document.createTextNode(’Hello world’)
Добавить текстовый узел к элементу:
newElem.appendChild(textNode)
Добавить элемент на страницу:
document.getElementById(’test’).appendChild(newElem)

Answer 166

A

event.preventDefault() - основной способ отменить действие по умолчанию.
Альтернативный метод - вернуть false из обработчика on<событие>. Другие возвраты не будут работать.

У клика на ссылку - отменит переход на другую страничку. У клика на кнопку подтверждения формы - отменит отправку.

event.stopPropagation() - остановит всплытие события на этом моменте. Не стоит пользоваться без крайней необходимости, так как от остановки всплытия могут быть проблемы, например нельзя будет отследить клики на документе для аналитики.

Answer 167

A

target - элемент, который вызвал начало всплытия события

currentTarget - элемент на котором всплытие находится в текущий момент

Answer 168

A

event.stopPropagation() - остановит всплытие события на этом моменте. Не стоит пользоваться без крайней необходимости, так как от остановки всплытия могут быть проблемы, например нельзя будет отследить клики на документе для аналитики.

event.stopImmediatePropagation() - остановит всплытие + события на этом элементе не будут выполнены

Answer 169

A

innerHTML - свойство DOM элемента, позволяет получить или установить содержимое “внутри” выбранного элемента в виде строки

outerHTML - свойство DOM элемента, позволяет получить или установить содержимое “внутри” выбранного элемента и самого элемента в виде строки

Answer 170

A

JSON:

Текстовый формат обмена данными
Ключ-значение
Компактный

XML:

Язык разметки, в котором есть синтаксис
Объёмный из-за разметки
Парсинг медленнее

Answer 171

A

event.defaultPrevented - вернёт boolean.

Answer 172

A

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

Содержит:
- информацию о браузере
- предпочитаемый язык и массив предпочитаемых языков
- включены ли куки

Answer 173

A

Устанавливает фокус на указанный элемент.

Когда элемент в фокусе - он перехватывает события клавиатуры.

Answer 174

A

document.forms вернёт HTML-коллекцию с всеми формами страницы. (можно применять только к document)

Answer 175

A

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

Метод .requestSubmit() также позволяет программно отправить форму, но он учитывает валидацию полей формы (атрибут required) и запускает обработчики события submit на форме.

Answer 176

A

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

Answer 177

A

URLSearchParams- это класс, предоставляющий удобное API для формирования строки поисковых параметров

Answer 178

A

Через класс Event и CustomEvent можно создать объект события.
new Event(type, [options])
new CustomEvent(type, [options])

type - тип события, его “имя” по которому будем с ним потом работать

options – объект с необязательными свойствами (по умолчанию false):
bubbles – если true, тогда событие всплывает
cancelable – если true, тогда можно отменить действие по умолчанию
detail – только у CustomEvent. Туда можно записать что угодно, отдельное оно - для избегания возможных конфликтов.

Через метод elem.dispatchEvent(event) можно вызвать срабатывание любого события, в том числе и пользовательского.

Отличить “настоящее” событие от вызванного вручную возможно через свойство события isTrusted (true - настоящее).

Answer 179

A

Инкапсуляция

Наследование

Абстракция

Полиморфизм

Answer 180

A

В ООП наследование позволяет одному классу (подклассу) наследовать свойства и методы другого класса (суперкласса). Это позволяет использовать повторно код суперкласса и расширять его функциональность в подклассах.

Answer 181

A

Инкапсуляция заключается в сокрытии внутреннего состояния объекта и предоставлении доступа к нему только через публичные методы.

Answer 182

A

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

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"); }
}

Answer 183

A

Это способность использовать объекты разных типов через один и тот же интерфейс.

function makeBirdFly(bird) {
    bird.fly();  // Полиморфный вызов метода fly
}

const sparrow = new Sparrow();
const eagle = new Eagle();

makeBirdFly(sparrow); // Sparrow flies
makeBirdFly(eagle);   // Eagle soars

Answer 184

A

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

Answer 185

A

Это обычные геттеры и сеттеры, только с использованием нового символа, который обозначает приватность - #.

Свойства и методы, помеченные # - могут быть доступны только внутри класса. Вызвать этот метод у объекта класса - нельзя.

get #getName() { … }

set #setName() { … }

Answer 186

A

Call Stack: Обрабатывает синхронные задачи. Функции добавляются и удаляются в порядке выполнения.

Task Queue: Обрабатывает асинхронные задачи, которые выполняются, когда стек вызовов пуст.

Answer 187

A

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

Например таким образом создать класс для ошибки:

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. Неизвестные ошибки пробрасываем дальше.

Brainscape's Knowledge GenomeTM

JavaScript Flashcards

Brainscape's Knowledge Genome^TM