Js

Question 1

Что такое DOM.

Answer 1

Это document object model.
Это объект для взаимодействия с HTML документами.

(((( Когда браузер первый раз читает («парсит») HTML документ, он формирует большой объект - DOM. DOM используется для взаимодействия и изменения самой структуры DOM или его отдельных элементов и узлов. В JS DOM представлен объектом Document. Объект Document имеет большое количество методов для работы с элементами, их созданием, модификацией, удалением и т.д.))))

Question 2

Что такое распространение события (Event Propagation)?

Answer 2

Событие, которое произошло в браузере, распространяется от глобального элемента window до целевого элемента и обратно.
Есть 3 фазы распространения события -
Фаза погружения,
Целевая фаза,
Фаза всплытия,

(((Когда какое-либо событие происходит в элементе DOM, оно на самом деле происходит не только в нем. Событие «распространяется» от объекта Window до вызвавшего его элемента (event.target). При этом событие последовательно пронизывает (затрагивает) всех предков целевого элемента. Распространение события имеет три стадии или фазы:
Фаза погружения (захвата, перехвата) — событие возникает в объекте Window и опускается до цели события через всех ее предков.
Целевая фаза — это когда событие достигает целевого элемента.
Фаза всплытия — событие поднимается от event.target, последовательно проходит через всех его предков и достигает объекта Window)))

Question 3

В чем разница между методами event.preventDefault() и event.stopPropagation()?
Привести примеры

Answer 3

Метод event.preventDefault() отключает поведение элемента по умолчанию.
Нажатие кнопки «Отправить» предотвращает отправку формы

Метод event.stopPropagation() отключает распространение события (его всплытие или погружение).
Используется когда нужно остановить распространение события (дальше есть какие-то листенеры/обработчики жтого события которые не нужно вызывать)

Question 4

В чем разница между операторами “==” и “===”?

Answer 4

Разница между оператором “==” (абстрактное или нестрогое равенство) и оператором “===” (строгое равенство) состоит в том, что первый сравнивает значения после их преобразования или приведения к одному типу (Coersion), а второй — без такого преобразования.

Question 5

Что такое поднятие (Hoisting)?

Answer 5

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

Question 6

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

Answer 6

Область видимости — это место, где (или откуда) мы имеем доступ к переменным или функциям.
JS имеем три типа областей видимости: глобальная, функциональная и блочная (ES6).

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

Если в глобальной области видимости переменная обнаружена, поиск прекращается, если нет — выбрасывается исключение.
Поиск осуществляется по ближайшим к текущей областям видимости и останавливается с нахождением переменной.

(((((((
Блочная -например if for
Функциональная - в теле функции
Глобальная - можно обратиться из любого место в коде к переменной

При создании области видимости она запоминает ссылку на внешнюю область видимости. Таким образом получаются цепочки области видимости. Мы из одной области видимости можем обращаться за переменными из другой области видимости
)))))))))

Question 7

Что такое замыкание (Closures)?

Answer 7

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

Question 8

Какое значение имеет this?

Answer 8

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

(((((((((
Методу объекта обычно требуется доступ к информации, хранящейся в объекте, для выполнения своей работы.
Для доступа к информации внутри объекта метод может использовать ключевое слово this.
«В данный момент» означает, что значение this меняется в зависимости от контекста выполнения, от того места, где мы используем this.
const carDetails = {
name: ‘Ford Mustang’,
yearBought: 2005,
getName() {
return this.name
}
isRegistered: true
}
console.log(carDetails.getName()) // Ford Mustang

————————————————————
var name = ‘Ford Ranger’
var getCarName = carDetails.getName

console.log(getCarName()) // Ford Ranger
Стрелочные функции не имеют собственного значения this. Они копируют значение this из внешнего лексического окружения.
))))))))))))))))

Question 9

Для чего используется метод Function.prototype.apply?

Answer 9

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

Первым аргументом передается обект, вторым масив с аргументами функции.

(((((((
greeting.apply(person, [‘Hello’]) //

const details = {
message: ‘Hello World!’
}

function getMessage() {
return this.message
}

getMessage.apply(details) // Hello World!
Этот метод похож на Function.prototype.call. Единственное отличие состоит в том, что в apply аргументы передаются в виде массива.
const person = {
name: ‘Marko Polo’
}

function greeting(greetingMessage) {
return ${greetingMessage} ${this.name}
}

greeting.apply(person, [‘Hello’]) // Hello Marko Polo

))))))))))

Question 10

Для чего используется метод Function.prototype.call?

Answer 10

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

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

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

function greeting(greetingMessage) {
return ${greetingMessage} ${this.name};
}

greeting.call(person, ‘Hello’); // Hello Marko Polo

)))))))))))

Question 11

Что такое прототип объекта?

Answer 11

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

Prototype есть только у классов и function decloration. У остальных типов данных его нету.

Объект, на который ссылается prototype, называется «прототипом».

Если мы хотим прочитать свойство obj или вызвать метод, которого не существует у obj, тогда JavaScript попытается найти его в прототипе.
Потом в прототипе прототипа и так далее до тех пор пока не будет значение null

function Person(first, last, age, gender, interests) {
// Определения методов и свойств
this.name = {
first: first,
last: last,
};
this.age = age;
this.gender = gender;
//…см. Введение в объекты для полного определения
}

var person1 = new Person(“Bob”, “Smith”, 32, “male”, [“music”, “skiing”]);

(((((
Свойства и методы определяются в свойстве prototype функции-конструкторе объекта.
)))

Question 12

Что такое функциональное программирование и какие особенности JS позволяют говорить о нем как о функциональном языке программирования?

Answer 12

ФП - это особый подход к написанию кода. Это набор концепций, правил и особенностей при написании кода

Концепции ФП:
- Деклоративность
- Чистые функции
- Функции первого класса, Функции высшего порядка
- Имутабельность (неизменяемость)

Деклоративность:
Декларируем какой результат мы хотим получить.
Есть два подхода к написанию кода: Императивный и деклоративный. В декларативном подходе мы описываем что мы хотим получить (описываем результат). В императивном мы описываем как мы хотим получить (описываем действия).

(((((((
Пример с такси

https://images.ctfassets.net/htsjgx8vu9xb/18LKaY0g2uD4lbenBH3OYv/6c3007966c1189b46e92373416d2872c/Screenshot_2024-11-09_at_15.02.41.png

Те в декларативном подходе мы на каком-то уровне пишем самодокументирующие функции, и из их названия понятен результат на выходе
https://images.ctfassets.net/htsjgx8vu9xb/4C5gxv0ONVjSBXYV3zTO6q/6ad3f2dc87c2bdcd3b16d57ce509bee9/Screenshot_2024-11-09_at_15.06.46.png
)))))))))))))

• Чистые функции
  —-При одинаковых значениях аргументов функции функция возвращает один и тот же результат
  —-Не зависят от внешних состояний и глобальных переменных
  —-Не зависит от сайд еффектов (не содержит запросов на сервер, логирование, асинхронные действия)

-Имутабельность
Мы не мутируем(изменяем) уже существующие данные, а создаем новые данные и ведем работу уже с этими данными. Хочешь изменить существующие данные - делай копию и работай с ней.

Почему мутирование плохо?
-Несогласованность данных
-Услложняет дебаг и тестирование кода

-(Функции первого класса и) функции высшего порядка:
Если мы можем передать функцию в качестве аргумента в другую функцию, вернуть функцию из функции, записать функцию в переменную, то можно говорить что функция является объектом первого класса

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

Question 13

Что такое функции высшего порядка (Higher Order Functions)?

Answer 13

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

Question 14

Что такое ECMAScript?

Answer 14

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

JavaScript -
cкриптовый язык общего назначения, соответствующий спецификации ECMAScript.

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

((((((((((((
JavaScript-движок - Программа или интерпретатор, способный понимать и выполнять JavaScript-код.
При желании, разработчики могут с помощью Babel преобразовать — транспилировать — код ES6 в функционально эквивалентную версию, использующую только функции ES5. Все основные браузеры полностью поддерживают ES5, поэтому транспилированный код будет работать без каких-либо проблем.
JavaScript был создан в 1996 году. В 1997 году Ecma International предложила стандартизировать JavaScript, и в результате появился ECMAScript. Но поскольку JavaScript соответствует спецификации ECMAScript, JavaScript является примером реализации ECMAScript.
)))))))))))))

Question 15

Cтандарт ES6 или ECMAScript2015

Answer 15

Вот что вышло в ES6:
Стрелочные функции (Arrow Functions).
Классы (Classes).
Шаблонные строки (Template Strings).
Расширенные объектные литералы (Enhanced Object literals).
Деструктуризация (Object Destructuring).
Промисы (Promises).
Генераторы (Generators).
Модули (Modules).
Symbol.
Прокси (Proxies).
Множества (Sets).
Параметры по умолчанию.
Операторы rest и spread.
Блочная область видимости (ключевые слова «let» и «const»).

Question 16

Что такое классы (Classes)?

Answer 16

Шаблондля созданияобъектов, описывающая их свойства и методы.

У класса есть гетеры сетеры, constructor, приватные свойства, статические методы

Question 17

Что такое деструктуризация объекта (Object Destructuring)?

Answer 17

Извлечения значений объекта или массива.

{{{{{{{
let { firstName, lastName, position, yearHired } = employee
}}}}}}}}

Question 18

Что такое функция обратного вызова (Callback Function)?

Answer 18

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

Question 19

В чем разница между spread-оператором и rest-оператором?

Answer 19

(rest - остальные, spread - распространение)

Операторы spread и rest имеют одинаковый синтаксис (“…”). Разница состоит в том, что с помощью spread мы передаем или распространяем данные массива на другие данные:

const myProps = { title: “Заголовок”, description: “Описание” };
return <MyComponent {…myProps} />;

а с помощью rest — получаем все параметры функции и помещаем их в массив (или извлекаем часть параметров).

function showName(firstName, lastName, …titles) {

Question 20

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

Answer 20

У каждого примитива, кроме null и undefined, есть объект-обертка.
Объект-обертка - это объект предоставляющий дополнительные методы для работы с примитивом.

Когда мы пытаемся обратится к примитиву как к объекту:
(23.456). toFixed(1);

Интерпретатор временно оборачивает, примитив в объект вызовом new Number(23.456) и потом уже у этого объекта вызывает метод toFixed()

(((((((((((((
Примитивы строка, число и boolean имеют свойства и методы, несмотря на то, что они не являются объектами:
console.log(name.toUpperCase()) // MARKO

Причина такого поведения заключается в том, что name временно преобразуется в объект.
Такими объектами являются String, Number, Boolean, Symbol и BigInt. Временный объект отбрасывается по завершении работы со свойством или методом.
))))))))

Question 21

В чем разница между явным и неявным преобразованием или приведением к типу (Implicit and Explicit Coercion)?

Answer 21

Неявное преобразование — это способ приведения значения к другому типу без нашего участия.

Явное преобразование предполагает наше участие в приведении значения к другому типу

Question 22

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

Answer 22

Array.isArray(5)

Question 23

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

Answer 23

Number.isNaN()

Question 24

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

Answer 24

const o = {
name: ‘Mark’,
greeting(){
return Hi, I'm ${this.name}
}
}

Функция-конструктор:
function Person(name){
this.name = name
}

const mark = new Person(‘Mark’)

Метод Object.create:
const n = {
greeting(){
return Hi, I'm ${this.name}
}
}

const o = Object.create(n)

o.name = ‘Mark’

console.log(o.greeting) // Hi, I’m Mark

Question 25

В чем разница между обычной функцией и функциональным выражением

Answer 25

Function extentioin поднимается в отличие от Functioin declaration.

(((((((((((
Вызов notHoistedFunc приведет к ошибке, а вызов hoistedFunc нет, потому что hoistedFunc «всплывает», поднимается в глобальную область видимости, а notHoistedFunc нет.

hoistedFunc()
notHoistedFunc()

function hoistedFunc(){
console.log(‘I am hoisted’)
}

var notHoistedFunc = function(){
console.log(‘I will not be hoisted!’)
}
))))))))))))

Question 26

Что такое запоминание или мемоизация (Memoization)?

Answer 26

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

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

Недостатком является то, что мы вынуждены выделять дополнительную память для сохранения результатов.

Question 27

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

Answer 27

Ключевое слово «new» используется в функциях-конструкторах для создания нового объекта .
Функция конструктор начинается с большой буквы

(((((((((((((
Обычный синтаксис {…} позволяет создать только один объект. Но зачастую нам нужно создать множество похожих, однотипных объектов, таких как пользователи, элементы меню и так далее.
Это можно сделать при помощи функции-конструктора и оператора “new”

Допустим, у нас есть такой код:
function Employee(name, position, yearHired){
this.name = name
this.position = position
this.yearHired = yearHired
}

const emp = new Employee(‘Marko Polo’, ‘Software Development’, 2017)

Что происходит когда выполняется new Employee:
Создает пустой объект.
Привязывает к нему значение this.
Выполняется тело функции. Обычно оно модифицирует this, добавляя туда новые свойства.
Возвращается значение this

)))))))))))))

Question 28

Сложность встроенных методов js

Answer 28

Сложность встроенных методов JavaScript
Встроенные методы JavaScript обычно имеют свои собственные характеристики сложности, которые варьируются в зависимости от конкретного метода и типа данных, с которыми они работают. Вот несколько примеров:
Массивы:
Добавление/удаление элемента в конце массива(например,push,pop): СложностьO(1). Эти операции работают быстро, так как не требуется сдвигать все элементы при добавлении или удалении элемента в начале массива.
Добавление/удаление элемента в начале массива(например,unshift,shift): СложностьO(n). При добавлении или удалении элемента в начале массива требуется сдвиг всех остальных элементов.
Доступ к элементу по индексу(например,arr[index]): СложностьO(1). Элементы массива обычно доступны напрямую по индексу, что делает эту операцию очень эффективной.

Строки:
Слияние строк(например, использование+илиconcat): Сложность может бытьO(n), так как при слиянии строк может потребоваться создание новой строки и копирование символов из оригинальных строк.
Объекты:
Доступ к свойствам объекта(например,obj.prop): Обычно сложность доступа к свойствам объекта -O(1), но это может измениться в случае использования Map или WeakMap, где сложность доступа может быть ближе кO(log n)из-за особенностей реализации.
Добавление/удаление свойств объекта: Обычно сложность добавления/удаления свойств в объекте -O(1).

Question 29

‘use strict’ или строгий режим

Answer 29

‘use strict’включает строгий режим выполнения JavaScript. Эта строка должна располагаться в самом начале скрипта, иначе строгий режим не будет работать.

Строгий режим делает следующее:
Выбрасывает ошибки, когда в коде используются некоторые небезопасные конструкции (например with, eval)
Выключает функции языка, которые запутывают код и потому не должны использоваться (Аргументы функции не могут иметь одинаковые имена)
Предотвращает использование слов, которые могут быть использованы в качестве ключевых в будущем. Те запрещает использовать зарезервированные слова ( это слова implements,interface,let,package,private,protected,public,static,yield)

Нет никакого способа отменитьuse strict
Нет директивы типа”no use strict”, которая возвращала бы движок к старому поведению.

Question 30

Модули в js

Answer 30

По мере роста нашего приложения, мы обычно хотим разделить его на много файлов, так называемых «модулей».
Модули могут загружать друг друга и использовать директивыexportиimport, чтобы обмениваться функциональностью, вызывать функции одного модуля из другого:
exportотмечает переменные и функции, которые должны быть доступны вне текущего модуля.
importпозволяет импортировать функциональность из других модулей.

В модулях всегда используется режим‘use strict’

Своя область видимости переменных
Каждый модуль имеет свою собственную область видимости. Другими словами, переменные и функции, объявленные в модуле, не видны в других скриптах.
Код в модуле выполняется только один раз при импорте
Если один и тот же модуль используется в нескольких местах, то его код выполнится только один раз, после чего экспортируемая функциональность передаётся всем импортёрам.
// 📁 alert.js
alert(“Модуль выполнен!”);

// Импорт одного и того же модуля в разных файлах

// 📁 1.js
import ./alert.js; // Модуль выполнен!

// 📁 2.js
import ./alert.js; // (ничего не покажет)
Ещё раз заметим – модуль выполняется только один раз.

Question 31

Что такое javascript

Answer 31

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

Является реализацией спецификации ECMAScript

Question 32

Переменные в js

Answer 32

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

Переменная может быть объявлена только один раз.
Повторное объявление той же переменной является ошибкой.
В JavaScript есть два ограничения, касающиеся имён переменных:
Имя переменной должно содержать только буквы, цифры или символы$и_.
Первый символ не должен быть цифрой.
Нелатинские буквы разрешены, но не рекомендуются
Можно использовать любой язык, включая кириллицу или даже иероглифы.
Существуетсписок зарезервированных слов, которые нельзя использовать в качестве имён (например let,class,returnиfunction)

Чтобы объявить константную, то есть, неизменяемую переменную, используйтеconstвместоlet.

letиconstведут себя одинаково по отношению к лексическому окружению, области видимости. Let и const имеют блочную область видимости

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

«var» допускает повторное объявление.
var user = “Пётр”;

var user; // ничего не делает, переменная объявлена раньше
// …нет ошибки

«var» обрабатываются в начале запуска функции
Это поведение называется «hoisting» (всплытие, поднятие), потому что все объявления переменныхvar«всплывают» в самый верх функции.
Объявления переменных «всплывают», но присваивания значений – нет.

Question 33

Типы данных в js

Answer 33

Есть восемь основных типов данных в JavaScript. Это number, BigInt, string, boolean, null, undefined, object, symbol .
BIGINT
В JavaScript типnumberне может безопасно работать с числами, большими, чем(253-1)(т. е.9007199254740991) или меньшими, чем-(253-1)для отрицательных чисел.
Например, эти два числа (прямо за пределами безопасного диапазона) совпадают:
console.log(9007199254740991 + 1); // 9007199254740992
console.log(9007199254740991 + 2); // 9007199254740992
ТипBigIntбыл добавлен в JavaScript, чтобы дать возможность работать с целыми числами произвольной длины.
Чтобы создать значение типаBigInt, необходимо добавитьnв конец числового литерала:
Кроме обычных чисел, существуют так называемые «специальные числовые значения», которые относятся к этому типу данных:Infinity,-InfinityиNaN.

null

Это просто специальное значение, которое представляет собой «ничего», «пусто» или «значение неизвестно».

undefined

означает, что «значение не было присвоено».
Если переменная объявлена, но ей не присвоено никакого значения, то её значением будетundefined.

object

Типobject(объект) – особенный.
Все остальные типы называются «примитивными», потому что их значениями могут быть только простые значения (будь то строка, или число, или что-то ещё). В объектах можно хранить различные типы данных

symbol

Примитивный тип данных, использующийся для создания уникальных идентификаторов.
Символы создаются вызовом функцииSymbol(), в которую можно передать описание (имя) символа.

Как узнать тип данных? Использовать typeof(имя переменной)

Question 34

Тип данных Symbol

Answer 34

«Символ» представляет собой уникальный идентификатор.
В качестве ключей для свойств объекта могут использоваться только строки или символы. Ни числа, ни логические значения не подходят, разрешены только эти два типа данных.
Создаются новые символы с помощью функцииSymbol():
// Создаём новый символ - id
let id = Symbol();
Символы гарантированно уникальны. Даже если мы создадим множество символов с одинаковым описанием, это всё равно будут разные символы. Описание – это просто метка, которая ни на что не влияет.

let id1 = Symbol(“id”);
let id2 = Symbol(“id”);

alert(id1 == id2); // false

Символы не преобразуются автоматически в строки
let id = Symbol(“id”);
alert(id.toString()); // Symbol(id), теперь работает

Symbol.keyFor(), наоборот, принимает глобальный символ и возвращает его имя.

Даже если символы имеют одно и то же имя, это – разные символы. Если мы хотим, чтобы одноимённые символы были равны, то следует использовать глобальный реестр: вызовSymbol.for(key)возвращает (или создаёт) глобальный символ сkeyв качестве имени. Многократные вызовы командыSymbol.forс одним и тем же аргументом возвращают один и тот же символ.
Символы игнорируются циклом for…in.

Question 35

Преобразование типов

Answer 35

Строковое преобразование
String(value)

Численное преобразование
Численное преобразование происходит в математических функциях и выражениях.
Также можно использовать функциюNumber(value). Если строка не может быть явно приведена к числу, то результатом преобразования будетNaN.

Логическое преобразование
Правило преобразования:
Значения, которые интуитивно «пустые», вроде0, пустой строки,null,undefinedиNaN, становятсяfalse.
Все остальные значения становятсяtrue.

Обратите внимание, если хотя бы один операнд является строкой, то второй будет также преобразован в строку.
let s = 1 + “234”;
alert(s); // “1234”
Сложение и преобразование строк — это особенность бинарного плюса+. Другие арифметические операторы работают только с числами и всегда преобразуют операнды в числа.

Question 36

Базовые операторы. Термины: «унарный», «бинарный», «операнд». Математические операторы. Приведение к числу, унарный +. Инкремент/декремент. Побитовые операторы.Оператор «запятая»

Answer 36

• Операнд– то, к чему применяется оператор. Например, в умножении5 * 2есть два операнда: левый операнд равен5, а правый операнд равен2. Иногда их называют «аргументами» вместо «операндов».
• Унарнымназывается оператор, который применяется к одному операнду. Например, оператор унарный минус”-“меняет знак числа на противоположный:
  Бинарнымназывается оператор, который применяется к двум операндам.

Поддерживаются следующие математические операторы:
Сложение+,
Вычитание-,
Умножение*,
Деление/,
Взятие остатка от деления%,
Возведение в степень**.
Результатa % b– этоостатокот целочисленного деленияaнаb.
Оператор возведения в степеньa ** bвозводитaв степеньb.
Унарный + это то же самое, что иNumber(…), только короче.

Инкремент/декремент
Инкремент++увеличивает переменную на 1:
Декремент–уменьшает переменную на 1:
Операторы++и–могут быть расположены не только после, но и до переменной.
Когда оператор идёт после переменной — это «постфиксная форма»:counter++.
«Префиксная форма» — это когда оператор идёт перед переменной:++counter.
ПРИМЕР
let counter = 1;
let a = ++counter; // (*)

alert(a); // 2

let counter = 1;
let a = counter++; // (*) меняем ++counter на counter++

alert(a); // 1

Побитые операторы
AND(и) (&)
OR(или) (|)
XOR(побитовое исключающее или) (^)
NOT(не) (~)
LEFT SHIFT(левый сдвиг) («)
RIGHT SHIFT(правый сдвиг) (»)
ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) (»>)

Оператор «запятая»
Оператор «запятая» предоставляет нам возможность вычислять несколько выражений, разделяя их запятой,. Каждое выражение выполняется, но возвращается результат только последнего.
Иногда его используют в составе более сложных конструкций, чтобы сделать несколько действий в одной строке.
for (a = 1, b = 3, c = a * b; a < 10; a++) {
…
}

Question 37

Операторы сравнения

Answer 37

Больше/меньше:a > b,a < b.
Больше/меньше или равно:a >= b,a <= b.
Равно:a == b
Не равно. a != b.
Результат сравнения имеет логический тип
Оператор строгого равенства===проверяет равенство без приведения типов. Оператор == проверяет равенство с приведением типов

Question 38

Условное ветвление: if. ’?’ Тернарный оператор

Answer 38

Иногда нам нужно выполнить различные инструкции в зависимости от условий. Для этого используем if или тернарный оператор.
Пример
if (age > 18) {
accessAllowed = true;
} else {
accessAllowed = false;
}
__________________
let result = условие ? значение1 : значение2;
__________________
let age = prompt(‘Возраст?’, 18);

let message = (age < 3) ? ‘Здравствуй, малыш!’ :
(age < 18) ? ‘Привет!’ :
(age < 100) ? ‘Здравствуйте!’ :
‘Какой необычный возраст!’;

alert( message );

Question 39

Логические операторы

Answer 39

||(ИЛИ)
Если какой-либо из аргументовtrue, он вернётtrue, в противоположной ситуации возвращаетсяfalse.
____________________________________________

&&(И) Оператор И пишется как два амперсанда&& В традиционном программировании И возвращаетtrue, если оба аргумента истинны, а иначе –false
!(НЕ)

Сначала приводит аргумент к логическому типуtrue/false
Затем возвращает противоположное значение.
______________________________________________________

Оператор нулевого слияния (??)
Результат выраженияa ?? bбудет следующим:
еслиaопределено, тоa,
еслиaне определено, тоb.
Иначе говоря, оператор??возвращает первый аргумент, если он неnull/undefined, иначе второй.

Question 40

Циклы while и for

Answer 40

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

let i = 0;
while (i < 3) {
// выводит 0, затем 1, затем 2
alert( i );
i++;
}
Проверку условия можно разместить под телом цикла, используя специальный синтаксисdo..while:
let i = 0;
do {
alert( i );
i++;
} while (i < 3);
Цикл «for»
for (let i = 0; i < 3; i++) { // выведет 0, затем 1, затем 2
alert(i);
}
Обычно цикл завершается при вычисленииусловиявfalse.
Но мы можем выйти из цикла в любой момент с помощью специальной директивыbreak. (Работает и в while и в for)
continue– при выполнении цикл не прерывается, а переходит к следующей итерации

Question 41

Конструкция “switch”

Answer 41

Конструкцияswitchзаменяет собой сразу несколькоif.
Она представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.
Конструкцияswitchимеет один или более блокcaseи необязательный блокdefault.

switch(x) {
case ‘value1’: // if (x === ‘value1’)
…
[break]

case ‘value2’: // if (x === ‘value2’)
…
[break]

default:
…
[break]
}

Можно сгруппировать несколько case. Можно пропустить break;

Question 42

Функции

Answer 42

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

function showMessage(параметры) {
alert( ‘Всем привет!’ );
return true;
}

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

Например, в коде ниже функция использует локальную переменнуюuserName. Внешняя будет проигнорирована.
Если мы хотим задать параметруtextзначение по умолчанию, мы должны указать его после=
function showMessage(from, text = “текст не добавлен”) {
alert( from + “: “ + text );
}

Функции == Комментарии
Функции должны быть короткими и делать только что-то одно. Если это что-то большое, имеет смысл разбить функцию на несколько меньших. Иногда следовать этому правилу непросто, но это определённо хорошее правило. Иногда разработчики называют такой кодсамодокументируемым.

Question 43

Синтаксисы создания функций.

Answer 43

1Function Declaration(Объявление Функции):
function sayHi() {
alert( “Привет” );
}
2 Function Expression (Функциональное Выражение).
let sayHi = function() {
alert( “Привет” );
};
3 IIFE
(function()=>{
})()
4 Стрелочная
Const asdf = ()=>{

}

Question 44

Отличия Function Expression и Function Declaration

Answer 44

независимо от того, как создаётся функция – она является значением
Function Expression создаётся, когда выполнение доходит до него, и затем уже может использоваться.

Function Declaration может быть вызвана раньше, чем она объявлена.
Другими словами, когда движок JavaScriptготовитсявыполнять скрипт или блок кода, прежде всего он ищет в нём Function Declaration и создаёт все такие функции. Можно считать этот процесс «стадией инициализации».
И только после того, как все объявления Function Declaration будут обработаны, продолжится выполнение.
В результате функции, созданные как Function Declaration, могут быть вызваны раньше своих определений.
Function Declaration - блочная области видимости.

Question 45

В чем смысл функции call back

Answer 45

Ключевая идея в том, что мы передаём функцию и ожидаем, что она вызовется обратно (от англ. «call back» – обратный вызов) когда-нибудь позже, если это будет необходимо.

Question 46

Стрелочные функции. Отличия от других функции

Answer 46

У стрелочных функций нет «this»
Стрелочные функции не имеют «arguments»
У стрелочных функций также нет переменнойarguments.

Question 47

Конструкция “with”

Answer 47

Конструкцияwithпозволяет использовать в качестве области видимости для переменных произвольный объект.
В современном JavaScript от этой конструкции отказались.

with(obj) {
…код…
}
Любое обращение к переменной внутриwithсначала ищет её среди свойствobj, а только потом – внеwith.

var a = 5;

var obj = {
a: 10
};

with(obj) {
alert( a ); // 10, из obj
}

Question 48

Функция “eval”

Answer 48

Встроенная функцияevalпозволяет выполнять строку кода.

let result = eval(code);

Пример
let code = ‘alert(“Привет”)’;
eval(code); // Привет

Question 49

Полифилы. Bable

Answer 49

Babel

Babel — это компилятор, который преобразует ваш современный JavaScript для запуска в старых браузерах.

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

Question 50

Объекты. Создание объекта. Удаление свойства

Answer 50

Один из типов данных. Используется для хранения различных значений.

Создание объекта
let user = new Object(); // синтаксис “конструктор объекта”
let user = {}; // синтаксис “литерал объекта”

Для удаления свойства мы можем использовать оператор delete:
delete user.age;

Проверка существования ключа в обекте
Также существует специальный оператор “in” для проверки существования ключа в объекте.
let user = { name: “John”, age: 30 };
alert( “age” in user ); // true, user.age существует

Question 51

for … in .. ; for … of …

Answer 51

for..in последовательно переберёт свойства объекта obj, ключ каждого свойства будет записано в key и вызвано тело цикла.

for (let key in menu) {
// …
}

for of выполняет цикл по значениям перечисляемых свойств итерируемого объекта.
for (let value of menu) {
// …
}

Инструкция for…of похожа на for…in тем, что позволяет итерироваться по коллекции. Однако, в отличие от for…in, for…of обходит только значения итерируемых свойств самого объекта.

К итерируемым объектам относятся: Array, String, Map, Set

Question 52

Копирование объектов и ссылки. Поверхностное и глубокое копирование

Answer 52

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

Переменная, которой присвоен объект, хранит не сам объект, а его «адрес в памяти» – другими словами, «ссылку» на него.

Глубокое клонирование:
structuredClone(obj)
lodash.cloneDeep(obj)
JSON.parse(JSON.stringify(obj))

Поверхностное клонирование:
Оператор Spread
Object.assign({},{})
Object.create({})

Метод structuredClone может выполнять следующие задачи:
Клонировать бесконечно вложенные объекты и массивы;
Клонировать циклические ссылки;
Клонировать различные типы JS, такие, как Date, Error, RegExp, ArrayBuffer, Blob, File, ImageData

Question 53

Сборка мусора

Answer 53

Уравление памятью в JavaScript выполняется автоматически.Мы создаём примитивы, объекты, функции… Всё это занимает память.
В движке JavaScript есть фоновый процесс, который называется сборщиком мусора. Он отслеживает все объекты и удаляет те, которые стали недоступными.

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

let john = { name: “John” };

// объект доступен, переменная john — это ссылка на него

// перепишем ссылку
john = null;

// объект будет удалён из памяти

Question 54

Опциональная цепочка ‘?.’

Answer 54

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

Question 55

Зачем нужны объект-обертки для примитивов

Answer 55

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

Вот парадокс, с которым столкнулся создатель JavaScript:

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

Выбранное решение, хотя выглядит оно немного неуклюже:
Примитивы остаются примитивами. Одно значение, как и хотелось.
Язык позволяет осуществлять доступ к методам и свойствам строк, чисел, булевых значений и символов.
Чтобы это работало, при таком доступе создаётся специальный «объект-обёртка», который предоставляет нужную функциональность, а после удаляется.

Каждый примитив имеет свой собственный «объект-обёртку», которые называются: String, Number, Boolean, Symbol и BigInt. Таким образом, они имеют разный набор методов.

Вот, как он работает:

let str = “Привет”;
alert( str.toUpperCase() ); // ПРИВЕТ

Вот, что на самом деле происходит в str.toUpperCase():
Строка str – примитив. В момент обращения к его свойству, создаётся специальный объект, который знает значение строки и имеет такие полезные методы, как toUpperCase().
Этот метод запускается и возвращает новую строку (показывается в alert).
Специальный объект удаляется, оставляя только примитив str.

Question 56

Методы чисел. Потеря точности с числами

Answer 56

num.toString(base) представляет число в строковом виде в указанной системе счисления base.
parseInt(str, base) преобразует строку в целое число в соответствии с указанной системой счисления: 2 ≤ base ≤ 36.
isNaN(value) преобразует аргумент в число и проверяет, является ли оно NaN
isFinite(value) преобразует аргумент в число и проверяет, что оно не является NaN/Infinity/-Infinity

Для преобразования значений типа 12pt и 100px в число:
Используйте parseInt/parseFloat для «мягкого» преобразования строки в число, данные функции по порядку считывают число из строки до тех пор пока не возникнет ошибка.

Для хранения числа используется 64 бита.
Наиболее часто встречающаяся ошибка при работе с числами в JavaScript – это потеря точности.
Посмотрите на это (неверное!) сравнение:
alert( 0.1 + 0.2 == 0.3 ); // false
_______________________________
alert( 0.1.toFixed(20) ); // 0.10000000000000000555
И когда мы суммируем 2 числа, их «неточности» тоже суммируются.
Вот почему 0.1 + 0.2 – это не совсем 0.3.

Question 57

Методы Строк

Answer 57

Внутренний формат для строк — всегда UTF-16, вне зависимости от кодировки страницы.

Спецсимволы
\n Перевод строки
', ", ` Кавычки
\ Обратный слеш
\t Знак табуляции

.length содержит длину строки.
Получить символ, который занимает позицию pos можно с помощью квадратных скобок: [pos].

Строки неизменяемы. Можно создать новую строку и записать её в ту же самую переменную вместо старой.

Методы
.toUpperCase()
.toLowerCase()
.indexOf //return -1 or index
.includes, //return true false
.startsWith,
.endsWith
str.slice(start [, end]) // Возвращает часть строки от start до (не включая) end.Также для start/end можно задавать отрицательные значения. Это означает, что позиция определена как заданное количество символов с конца строки

str.substring(start [, end]) //Возвращает часть строки между start и end (не включая) end.
Это — почти то же, что и slice, но можно задавать start больше end.
Отрицательные значения substring, в отличие от slice, не поддерживает, они интерпретируются как 0.

str.substr(start [, length])
Возвращает часть строки от start длины length.
В противоположность предыдущим методам, этот позволяет указать длину вместо конечной позиции:

.codePointAt
Возвращает код для символа, находящегося на позиции .fromCodePoint
Создаёт символ по его коду code

.localeCompare(str2)
возвращает число, которое показывает, какая строка больше в соответствии с правилами языка:
Отрицательное число, если str меньше str2.
Положительное число, если str больше str2.
0, если строки равны.
alert( ‘Österreich’.localeCompare(‘Zealand’) ); // -1

.trim()
убирает пробелы в начале и конце строки.
.repeat(n)
повторяет строку n раз.
.split

ВСЕ МЕТОДЫ
“substring”,
“toLowerCase”,
“toUpperCase”,
“charAt”,
“charCodeAt”,
“indexOf”,
“lastIndexOf”,
“startsWith”,
“endsWith”,
“trim”,
“trimLeft”,
“trimRight”,
“toLocaleLowerCase”,
“toLocaleUpperCase”,
“localeCompare”,
“match”,
“search”,
“replace”,
“split”,
“substr”,
“concat”,
“slice”,

Question 58

Итерируемые (Перебираемые) объекты.

Answer 58

Итерируемые объекты – это объекты, которые реализуют метод Symbol.iterator, как было описано выше.
Псевдомассивы – это объекты, у которых есть индексы и свойство length, то есть, они выглядят как массивы.

Чтобы сделать объект итерируемым (и позволить for..of работать с ним), нам нужно добавить в объект метод с именем Symbol.iterator (специальный встроенный Symbol, созданный как раз для этого).

Когда цикл for..of запускается, он вызывает этот метод один раз (или выдаёт ошибку, если метод не найден). Этот метод должен вернуть итератор – объект с методом next.
Дальше for..of работает только с этим возвращённым объектом.
Когда for..of хочет получить следующее значение, он вызывает метод next() этого объекта.
Результат вызова next() должен иметь вид {done: Boolean, value: any}, где done=true означает, что цикл завершён, в противном случае value содержит очередное значение.

Пример
let range = {
from: 1,
to: 5,
Symbol.iterator {
this.current = this.from;
return this;
},
next() {
if (this.current <= this.to) {
return { done: false, value: this.current++ };
} else {
return { done: true };
}
}
};
for (let num of range) {
alert(num); // 1, затем 2, 3, 4, 5
}

Question 59

Map и Set

Answer 59

Map
Map – это коллекция ключ/значение, как и Object. Но основное отличие в том, что Map позволяет использовать ключи любого типа.

new Map() – создаёт коллекцию.
map.set(key, value) – записывает по ключу key значение value.
map.get(key) – возвращает значение по ключу или undefined, если ключ key отсутствует.
map.has(key) – возвращает true, если ключ key присутствует в коллекции, иначе false.
map.delete(key) – удаляет элемент (пару «ключ/значение») по ключу key.
map.clear() – очищает коллекцию от всех элементов.
map.size – возвращает текущее количество элементов.

Для перебора коллекции Map есть 3 метода:
map.keys() – возвращает итерируемый объект по ключам,
map.values() – возвращает итерируемый объект по значениям,
map.entries() – возвращает итерируемый объект по парам вида [ключ, значение], этот вариант используется по умолчанию в for..of.

Set
Объект Set – это особый вид коллекции: «множество» значений (без ключей), где каждое значение может появляться только один раз.
new Set(iterable) – создаёт Set, и если в качестве аргумента был предоставлен итерируемый объект (обычно это массив), то копирует его значения в новый Set.
set.add(value) – добавляет значение (если оно уже есть, то ничего не делает), возвращает тот же объект set.
set.delete(value) – удаляет значение, возвращает true, если value было в множестве на момент вызова, иначе false.
set.has(value) – возвращает true, если значение присутствует в множестве, иначе false.
set.clear() – удаляет все имеющиеся значения.
set.size – возвращает количество элементов в множестве.

Question 60

WeakMap и WeakSet

Answer 60

WeakMap – это Map-подобная коллекция, позволяющая использовать в качестве ключей только объекты, и автоматически удаляющая их вместе с соответствующими значениями, как только они становятся недостижимыми иными путями.

WeakSet – это Set-подобная коллекция, которая хранит только объекты и удаляет их, как только они становятся недостижимыми иными путями.

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

WeakMap и WeakSet используются как вспомогательные структуры данных в дополнение к «основному» месту хранения объекта. Если объект удаляется из основного хранилища и нигде не используется, кроме как в качестве ключа в WeakMap или в WeakSet, то он будет удалён автоматически.

let john = { name: “John” };
let weakMap = new WeakMap();
weakMap.set(john, “…”);
john = null; // перезаписываем ссылку на объект
// объект john удалён из памяти!
В map ключ не будет удален из памяти
Можно использовать в кешировании

Question 61

Object.keys, values, entries

Answer 61

Для простых объектов доступны следующие методы:

Object.keys(obj) – возвращает массив ключей.
Object.values(obj) – возвращает массив значений.
Object.entries(obj) – возвращает массив пар [ключ, значение].

Question 62

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

Answer 62

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

Полный синтаксис для объекта:
let {prop : varName = defaultValue, …rest} = object

Полный синтаксис для массива:
let [item1 = defaultValue, item2, …rest] = array

Question 63

Формат JSON. JSON.stringify, JSON.parse

Answer 63

JSON (JavaScript Object Notation) – это общий формат для представления значений и объектов.
JSON.stringify для преобразования объектов в JSON.
JSON.parse для преобразования JSON обратно в объект.

JSON.stringify(value, replacer, space) – это количество пробелов, используемых для удобного форматирования.
replacer - служит для изменения определенных ключей при вызове json

Question 64

Рекурсия

Answer 64

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

Question 65

Стeк (LIFO) и Очередь (FIFO)

Answer 65

Стек — это структура данных, которая работает по принципу LIFO (Last In, First Out), что означает «последним пришёл — первым вышел». К примеру, вы моете посуду и ставите тарелки друг на друга. Если захотите вытереть их, то первой возьмёте последнюю помытую тарелку. Это и есть принцип работы стека.

Очередь — это структура данных, которая работает по принципу FIFO (First In, First Out), что означает «первым пришёл — первым обслужен». Её можно сравнить с очередью за вкусными пироженками: первый человек, который пришёл, будет первым, кто получит пирожное.

Question 66

Глобальный объект

Answer 66

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

Это включает в себя как встроенные объекты, например, Array, так и характерные для окружения свойства, например, window.innerHeight – высота окна браузера.

Глобальный объект имеет универсальное имя – globalThis.
…Но чаще на него ссылаются по-старому, используя имя, характерное для данного окружения, такое как window (браузер) и global (Node.js).

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

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

Для того, чтобы код был проще и в будущем его легче было поддерживать, следует обращаться к свойствам глобального объекта напрямую, как window.x.

Question 67

setTimeout и setInterval

Answer 67

setTimeout позволяет вызвать функцию один раз через определённый интервал времени.

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

function sayHi(phrase, who) {
alert( phrase + ‘, ‘ + who );
}
setTimeout(sayHi, 1000, “Привет”, “Джон”); // Привет, Джон

Отмена через clearTimeout
let timerId = setTimeout(…);
clearTimeout(timerId);

Question 68

Флаги и дескрипторы свойств

Answer 68

Флаги свойств
Помимо значения value, свойства объекта имеют три специальных атрибута (так называемые «флаги»).

writable – если true, свойство можно изменить, иначе оно только для чтения.
enumerable – если true, свойство перечисляется в циклах, в противном случае циклы его игнорируют.
configurable – если true, свойство можно удалить, а эти атрибуты можно изменять, иначе этого делать нельзя.
Когда мы создаём свойство «обычным способом», все они имеют значение true. Но мы можем изменить их в любое время.

Возвращаемое значение – это объект, так называемый «дескриптор свойства»: он содержит значение свойства и все его флаги.

Метод Object.getOwnPropertyDescriptor позволяет получить полную информацию о свойстве.
Его синтаксис:
let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
/* дескриптор свойства:
{
“value”: “John”,
“writable”: true,
“enumerable”: true,
“configurable”: true
}
*/

Чтобы изменить флаги, мы можем использовать метод Object.defineProperty.

Object.defineProperty(
user,
“name”,
{
value: “John”
});

Глобальное запечатывание объекта
Object.preventExtensions(obj)
Запрещает добавлять новые свойства в объект.
Object.seal(obj)
Запрещает добавлять/удалять свойства. Устанавливает configurable: false для всех существующих свойств.
Object.freeze(obj)
Запрещает добавлять/удалять/изменять свойства. Устанавливает configurable: false, writable: false для всех существующих свойств.

А также есть методы для их проверки:
Object.isExtensible(obj)
Возвращает false, если добавление свойств запрещено, иначе true.
Object.isSealed(obj)
Возвращает true, если добавление/удаление свойств запрещено и для всех существующих свойств установлено configurable: false.
Object.isFrozen(obj)
Возвращает true, если добавление/удаление/изменение свойств запрещено, и для всех текущих свойств установлено configurable: false, writable: false.
На практике эти методы используются редко.

Question 69

Геттеры и сеттеры

Answer 69

Есть два типа свойств объекта.
Первый тип это свойства-данные (data properties). Мы уже знаем, как работать с ними. Все свойства, которые мы использовали до текущего момента, были свойствами-данными.
Второй тип свойств мы ещё не рассматривали. Это свойства-аксессоры (accessor properties). По своей сути это функции, которые используются для присвоения и получения значения, но во внешнем коде они выглядят как обычные свойства объекта.

Свойства-аксессоры представлены методами: «геттер» – для чтения и «сеттер» – для записи. При литеральном объявлении объекта они обозначаются get и set:
let obj = {
get propName() {
// геттер, срабатывает при чтении obj.propName
},
set propName(value) {
// сеттер, срабатывает при записи obj.propName = value
}
};

Question 70

Прототипное наследование. [[Prototype]], .__proto__

Answer 70

Prototype есть только у функции конструкторов у классов и function decloration. У остальных типов данных его нету.

__proto__ seter/geter который ссылается на прототип функции конструктора с потощью которой этот объект был создан.

В JavaScript все объекты имеют скрытое свойство [[Prototype]], которое является либо другим объектом, либо null.

Можем использовать obj.__proto__ для доступа к нему (исторически обусловленный геттер/сеттер)

Объект, на который ссылается [[Prototype]], называется «прототипом».

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

let animal = {
eats: true
};
let rabbit = {
jumps: true
};
rabbit.__proto__ = animal; // (*)

// теперь мы можем найти оба свойства в rabbit:
alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true

Question 71

Класс: базовый синтаксис

Answer 71

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

class MyClass {
prop = value; // свойство
constructor(…) { // конструктор
// …
}
method(…) {} // метод
get something(…) {} // геттер
set something(…) {} // сеттер
}

В constructor() мы можем инициализировать объект.
constructor запускается с заданным аргументом и сохраняет его в this.name

let user = new MyClass(“Class name”);

Question 72

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

Answer 72

Наследование классов – это способ расширения одного класса другим классом.

Таким образом, мы можем добавить новый функционал к уже существующему.

Синтаксис для расширения другого класса следующий: class Child extends Parent.
Давайте создадим class Rabbit, который наследуется от Animal:

class Rabbit extends Animal {
hide() {
alert(${this.name} прячется!);
}
}

let rabbit = new Rabbit(“Белый кролик”);
rabbit.run(5); // Белый кролик бежит со скоростью 5.
rabbit.hide(); // Белый кролик прячется!

Question 73

Статические свойства и методы

Answer 73

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

В объявление класса они добавляются с помощью ключевого слова static, например:

class User {
static staticMethod() {
alert(this === User);
}
}

User.staticMethod(); // true

Обычно статические методы используются для реализации функций, которые будут принадлежать классу в целом, но не какому-либо его конкретному объекту.
class Article {
constructor(title, date) {
this.title = title;
this.date = date;
}

static compare(articleA, articleB) {
return articleA.date - articleB.date;
}
}

// использование
let articles = [
new Article(“HTML”, new Date(2019, 1, 1)),
new Article(“CSS”, new Date(2019, 0, 1)),
new Article(“JavaScript”, new Date(2019, 11, 1))
];

articles.sort(Article.compare);

alert( articles[0].title ); // CSS

Статические свойства также возможны, они выглядят как свойства класса, но с static в начале:
class Article {
static publisher = “Илья Кантор”;
}
alert( Article.publisher ); // Илья Кантор
Это то же самое, что и прямое присваивание Article:
Article.publisher = “Илья Кантор”;

Статические свойства и методы наследуются.

Question 74

Приватные и защищённые методы и свойства класса

Answer 74

В JavaScript есть два типа полей (свойств и методов) объекта:
Публичные: доступны отовсюду. Они составляют внешний интерфейс. До этого момента мы использовали только публичные свойства и методы.
Приватные: доступны только внутри класса. Они для внутреннего интерфейса.

Приватное свойство и приватный метод

Приватные свойства и методы должны начинаться с #. Они доступны только внутри класса.
class CoffeeMachine {
#waterLimit = 200;

#checkWater(value) {
if (value < 0) throw new Error(“Отрицательный уровень воды”);
if (value > this.#waterLimit) throw new Error(“Слишком много воды”);
}
}

let coffeeMachine = new CoffeeMachine();
// снаружи нет доступа к приватным методам класса
coffeeMachine.#checkWater(); // Error
coffeeMachine.#waterLimit = 1000; // Error

Question 75

Проверка класса: “instanceof”

Answer 75

Оператор instanceof позволяет проверить, принадлежит ли объект указанному классу, с учётом наследования.

class Rabbit {}
let rabbit = new Rabbit();

// это объект класса Rabbit?
alert( rabbit instanceof Rabbit ); // true

Question 76

Обработка ошибок, “try..catch”

Answer 76

Конструкция try..catch позволяет обрабатывать ошибки во время исполнения кода. Она позволяет запустить код и перехватить ошибки, которые могут в нём возникнуть.

try {
// исполняем код
} catch(err) {
// если случилась ошибка, прыгаем сюда
// err - это объект ошибки
} finally {
// выполняется всегда после try/catch
}

Секций catch или finally может не быть, то есть более короткие конструкции try..catch и try..finally также корректны.

Если объект ошибки не нужен, мы можем пропустить его, используя catch { вместо catch(err) {.

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

Question 77

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

Answer 77

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

Промис может находиться в одном из трёх состояний:
pending — стартовое состояние, операция стартовала;
fulfilled — получен результат;
rejected — ошибка.

После создания, промис находится в состоянии ожидания pending. Когда асинхронная операция завершается, функция переводит промис в состояние успеха fulfilled или ошибки rejected.
С помощью методов then(), catch() и finally() мы можем реагировать на изменение состояния промиса и использовать результат его выполнения.

Question 78

Promise API. Promise.all, Promise.allSettled, Promise.race, Promise.any, Promise.resolve/reject,

Answer 78

Promise.all(promises) – ожидает выполнения всех промисов и возвращает массив с результатами. Если любой из указанных промисов вернёт ошибку, то результатом работы Promise.all будет эта ошибка, результаты остальных промисов будут игнорироваться.

Promise.allSettled(promises) (добавлен недавно) – ждёт, пока все промисы завершатся и возвращает их результаты в виде массива с объектами, у каждого объекта два свойства:
status: “fulfilled”, если выполнен успешно или “rejected”, если ошибка,
value – результат, если успешно или reason – ошибка, если нет.

Promise.race(promises) – ожидает первый выполненный промис, который становится его результатом, остальные игнорируются.

Promise.any(promises) (добавлен недавно) – ожидает первый успешно выполненный промис, который становится его результатом, остальные игнорируются. Если все переданные промисы отклонены, AggregateError становится ошибкой Promise.any.

Promise.resolve(value) – возвращает успешно выполнившийся промис с результатом value.

Promise.reject(error) – возвращает промис с ошибкой error.

Question 79

Async/await

Answer 79

Существует специальный синтаксис для работы с промисами, который называется «async/await»

async перед функцией гарантирует, что эта функция в любом случае вернёт промис.

Ключевое слово await заставит интерпретатор JavaScript ждать до тех пор, пока промис справа от await не выполнится. После чего оно вернёт его результат, и выполнение кода продолжится.

Когда промис завершается успешно, await promise возвращает результат. Когда завершается с ошибкой – будет выброшено исключение. Как если бы на этом месте находилось выражение throw.

Question 80

Генераторы

Answer 80

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

function* generateSequence() {
yield 1;
yield 2;
return 3;
}

let generator = generateSequence();

let one = generator.next();

alert(JSON.stringify(one)); // {value: 1, done: false}

Генераторы создаются при помощи функций-генераторов function* f(…) {…}.
Внутри генераторов и только внутри них существует оператор yield.
Внешний код и генератор обмениваются промежуточными результатами посредством вызовов next/yield.

Question 81

Динамические импорты

Answer 81

let obj = await import(‘./say.js’);

Question 82

Event loop (цикл событий). Микрозадачи и макрозадачи

Answer 82

ЦИКЛ СОБЫТИЙ——–
JS- однопоточный язык. В текущий момент времени может выполняться только одна задача. Но возникает необходимость выполнять код асинхронно (допустим для выполнения трудоемкой функции) ДЛя этого и появляется event loop.
Event loop это бесконечный цикл который выполняет задачи, ожидается задачи если все задачи выполнены, как только они появились опять их выполняет.

Есть основной поток выполнения.
После основного потока выполняются микрозадачи.
После микрозадач выполняются макрозадачи

Микрозадачи - промисы, функции добавленные с помощью queueMicrotask(func)

Макрозадачи -
setTimeout
setInterval
Запросы к серверу через XMLHttpRequest или fetch

Это бесконечный цикл, в котором выполняются различные события. События распределяются по очередям (fifo) microtask и macrotask.

По выполнению сначало выполняется весь синхронный код, затем выполняются все микротаски, Затем выполняется одна макротаска И все заново.
Выполняется весь синхронный код…

синхронный код у нас попадает в callstack (lifo с помощью которой можно отслеживать порядок вызова функций). Выполняется и убирается из callstack

Question 83

PROXY и PREFL…