JS Flashcards

Question

Все ли в js объекты?

Answer 1

Примитивы – не объекты. У примитивов, кроме null и undefined, есть свои методы, но они не объекты. Чтобы методы работали, при таком доступе создаётся специальный «объект-обёртка», который предоставляет нужную функциональность, а после удаляется. array, object, function - это все объекты Но при проверки через typeof function - это будет Function. Так же при проверке через typeof null покажет Object, но это примитив. typeof null, дающее ‘object’, было ошибкой в ранней реализации JavaScript. null показывает отсутствие какого-либо объектного значения. Если вы видите null (присвоенное переменной или возвращенное функцией), то в этом месте должен быть объект, но по какой-то причине объект не был создан. Не используйте оператор typeof для определения значения null. Как упоминалось ранее, используйте оператор строгого равенства myVar === null. Пример: // переменная foo существует, но она не имеет ни типа, ни значения: > var foo = null; - переменная существует - это foo // переменная foo не существует - она не была определена и никогда не инициализировалась: > foo - undefined

Answer 2

Это синтаксический сахар над тем что уже есть. Это нужно для работы с ассинхронным кодом. В js есть удобная штука для работы с таким кодом -Promise. Это объект, который может находится в одном из трех состояний - 1.pending(ожидает, если результат еще не готов, ожиданиет завершения каких-то ассинхр.операций), 2.resolved(завершение, результат доступен, что-то завершилось сове выполнение, все прошло хорошо), 3.rejected(произошла ошибка в процессе выполнения, отклонен) Как мы одного из трех состояний дожидаемся? с помощью .then, т.е. чтобы получить ответ и его обработать, мы будем использовать цепочку then-ов: promise.then( (response)=> ... ).then((data)=> ... ) Зачем нужен async/await? Дожидание , когда промис зарезолвится(resolved), те мы с помощью await дожидаемся когда промис зарезолвится, а это ожидание может происходить только в ассинхр.функции - async. Такой код выглядит короче, без этих вложенностей с коллбэками, нам не нужно использовать .then, теперь пишем так: (async () => { let response = await fetch('/article/promise-chaining/user.json'); //получили промис //если fetch не выполнится, то код ниже него не будет выполнятся let user = await response.json(); //обработали в json ... })(); -async/await всегда возвращает промис, так же необходимо такой код заворачивать в async , в данном случае можно обернуть анонимной самовызывающейся функцией. Так же проще делать обработчку ошибок try\catch

Answer 3

В JavaScript функции – это объекты. Значит это ссылочный тип данных. Функции можно не только вызывать, но и использовать их как обычные объекты: добавлять/удалять свойства, передавать их по ссылке и т.д. 1. Имя функции - методом .name function sayHi() { alert("Hi"); } alert(sayHi.name); // sayHi 2.Метод «length» содержит количество параметров функции в её объявлении. function f2(a, b) {} alert(f2.length); // 2 - длина рассчитывается по количеству параметров function many(a, b, ...more) {} alert(many.length); // 2 - rest-оператор не считается 3.Мы также можем добавить свои собственные свойства. function sayHi() { alert("Hi"); sayHi.counter++; // добавили свойство .counter }

Answer 4

Кэш позволяет хранить в папке на нашем жестком диске загружаемую с сайтов всю информацию (графическая, текстовая, мультимедийная) в тот момент, когда мы зашли на сайт впервые. А когда заходим на сайт второй раз, то браузер проверяет содержимое сайта на наличие новых данных и подгружает их к нам. Остальная же информация берется для отображения именно из нашего кэша. Для чего? Во-первых, для повышения скорости загрузки сайта, во-вторых, для снижения нагрузки на интернет-соединение, ведь доступ к данным в кэше осуществляется быстрее. Кэш можно почистить в инструментах разработчика. Заходим в раздел Приложение => Хранилище => Удалить данные сайта

Answer 5

Куки тоже хранятся на нашем ПК, как и кэш, и представляют собой данные (как правило, их небольшой фрагмент). Этот небольшой фрагмент отправляется сервером на наш компьютер при посещении сайта впервые. Мы должны дать согласие на прием куки. Выскакивает окошко для принятия куки, когда мы заходим на сайт впервые. Главное отличие куки от кэша заключается в том, что каждый раз, когда мы повторно заходим на конкретный сайт, с которого нам уже был когда-то отправлен конкретный куки, наш браузер пересылает этот фрагмент данных серверу в составе HTTP-запроса. Примеры: 1.Авторизация на сайте. Как известно большинство сайтов имеют авторизацию (ввод пароля, логина, телефона, почты и т. п.). Cookie могут применяться сервером для опознания ранее аутентифицированных пользователей. 2. Корзина в интернет-магазинах. Если не использовать куки, при выборе товара и переходе на новую страницу товар может исчезнуть. 3. Настройки. К примеру, мы выставили нужные настройки региона, языка и т. д. Без куки они могут сброситься и вернуться в статус значений по умолчанию. Куки можно почистить в инструментах разработчика. В приложение => То есть надо будет выбрать адрес сайта под строкой Cookie, нажать правую кнопку мыши, а потом «Clear».

Answer 6

Браузер делает запрос на сервер, он отправляет один файл index.html и bundle.js (В большинстве проектов собирают все javascript файлы (а иногда css и картинки тоже) в один очень большой bundle.js.(Сборщик модулей WebPack создает этот файл, собирая все файлы в единый файл). Сreate-react-app использует под капотом webpack со всеми необходимыми плагинами.) После этого кликая по ссылкам в приложении, мы уже не заправшиваем у сервера новый HTML-файл и js-файл, можем запрашивать только какие-то API-данные в формате json или xml . Реакт сам рисует компоненты, которые необходимо отобразить. Благодаря Реакт-роутеру, мы сможем отображать эти переходы к другим компонентам, вместо того, чтобы отправлять запрос на сервер.

Answer 7

Браузер не работает с HTML-страницей напрямую как с текстом, а строит для этого DOM.!!!!!!!!!!!!!!!!!!!! Document Object Model - это объектная модель документа , представляет собой древовидную структуру страницы, состоящую из узлов. Каждый узел в ней – это объект, который может иметь определённые свойства и методы. DOM-узлы образуются из всего, что есть в HTML: тегов, текстового контента, комментариев и т.д. Эти объекты связанным между собой иерархически, те родитель-ребенок и тд. Корневым узлом DOM-дерева является объект document - входная точка в DOM: document=>html=> разделяется на: head и body => и т.д. Каждый узел в DOM – это объект, который может иметь определённые свойства и методы. На свойства часто ссылаются как на то, с чем необходимо что-либо сделать (например, название узла). document.innerHTML - отобразит текст, который содержится в элементе html. На методы часто ссылаются как на то, что необходимо сделать (например, удалить узел): document.getElementById(id) - получить элемент с указанным id из всего html document.getElementsByTagName(имя) - получить все элементы с указанным названием (именем) тега из всего html document.appendChild(узел) - вставить дочерний узел в html document.removeChild(узел) - удалить дочерний узел из html Формируют древовидную структуру ТОЛЬКО узлы-элементы-теги, текстовые узлы не могут в себе содержать другие узлы и строить дальше дерево!!! Процесс формирования DOM происходит так: браузер получает HTML-код, парсит его и строит DOM. Конечной целью является построения отображения этой страницы на экране. Т.е. по сути мы видим ДОМ в браузере. Основные этапы работ, которые браузер выполняет для преобразования исходного кода HTML-документа в отображение стилизованной и интерактивной картинки на экране. Кстати, этот процесс называется «Критический путь рендеринга» Critical Rendering Path (CRP): 1. Браузер получает HTML и парсит его, в итоге построит DOM. Так же происходит и с CSS файлом, он так же парсит его и образует CSSOM - объектная модель CSS. Он выглядит так же как DOM, но с соответствующими стилями для каждого узла. 2. Когда сформировался DOM и CSSOM , происходит формирование дерева рендеринга (render tree) - это совокупность DOM и CSSOM. Это дерево, которое даёт представление о том, что в конечном итоге будет отображено на странице. Это означает, что оно захватывает только видимый контент(элементы и текст) и не включает, например, элементы, которые были скрыты с помощью CSS-правила display: none. Таким образом, render tree описывает визуальное представление DOM. 3. Далее браузер выполняет отрисовку render tree. Для этого он: ---рассчитывает положение и размеры каждого элемента в render tree, этот шаг называется Layout; Список свойств, изменение которых вызывает Layout: width и height; padding и margin; display; border; top, left, right и bottom; position; font-size и другие. ----выполняет рисование, этот шаг называется Paint. Список свойств, изменение которых вызывают Paint: color; background; visibility; border-style и другие.

Answer 8

В JavaScript у каждой выполняемой функции, блока кода и скрипта ЕСТЬ связанный с ними внутренний (скрытый) ОБЪЕКТ, называемый лексическим окружением LexicalEnvironment. Объект лексического окружения состоит из двух частей: объект и ссылка 1.Объект, в котором как свойства хранятся все локальные переменные 2.Ссылка на внешнее лексическое окружение – то есть то, которое соответствует коду снаружи (снаружи от текущих фигурных скобок). Получается, работа с переменными(например переприсваивание) - это работа со свойствами этого объекта лексического окружения. Переменные инициализируются тогда, когда до них доходит ВЫПОЛНЕНИЕ, те они записываются в объект, появляются в этом окружении. Global Environment(глобальное окружение){ car: 'bmw', - запись переменной sayHi: Function - запись функции } По-другому дела обстоят с функциями (Function Declaration) - инициализация происходит тогда, когда СОЗДАЕТСЯ лексическое окружение. По этому такие функции могут вызываться раньше, чем мы объявили функцию. При запуске функции для неё автоматически создаётся новое лексическое окружение, для хранения локальных переменных и параметров вызова. У внутреннего лексического окружения есть ссылка - outer на внешнее, те когда код хочет получить доступ к переменной – сначала происходит поиск во внутреннем лексическом окружении, затем во внешнем, затем в следующем и так далее, до глобального. Есть глобальное лексическое окружение, где записываются глобальные переменные, функции и тд. Если у такого окружения нет более глобального окружения, то он будет означать null, вместо объекта. Отсюда можем понять, что если например, у функции в своем окружении не нашлось нужной переменной, то она ищем во внешнем окружении, если там нет, то поднимается еще выше. Если в итоге не нашлось, то будет ошибка. Новое лексическое окружение функции создаётся каждый раз, когда функция выполняется. И, если функция вызывается несколько раз, то для каждого вызова будет своё лексическое окружение, со своими, специфичными для этого вызова, локальными переменными и параметрами. Function Expression - почему нельзя вызвать до ее инициализации? Потому, что в глобальном окружении она не записывается, как FD или переменные. По этому когда доходит до вызова такой функции, ее просто не существует пока что. Пример1: let name = "John"; function sayHi() { alert("Hi, " + name); } name = "Pete"; // (*) переприсвоилось значение sayHi(); // Pete //Функция получает текущее значение внешних переменных, то есть их ПОСЛЕДНЕЕ значение. Пример2: GlobalEnvironment{ counter: Function} - создалось глобальное окружение, куда записалась функция - FD. Такая запись { counter: Function} - это структура данных у окружения. Т.е. индетификатор - название переменной\функции, а значение - значение у примитива, а если функция, то Function. const counter = ()=>{ // функция counter теперь может ссылаться на глобальное окружение в поисках необходимого: counter =>GlobalEnvironment. // При ВЫЗОВЕ функции counter создается ее лексическое окружение let i=0 return () => { // возвращаем другую функцию // так же ссылается на внешнее лекс. окружение - counter //при вызове создается ее лексическое окружение // тк в этой функции нет переменной i, то она ее найдет в функции counter и сохранится там измененное значение. При каждом вызове нашей возвращающейся функции, она будет выходить к окружению функции counter и брать оттуда переменную i. console.log(++i) } } const foo = counter() // здесь мы просто проинициализировали эту нашу функцию, которая вернулась из функции counter foo() //1 // здесь мы вызываем нашу вернувшуюся функцию и в ней уже создается лекс. окружение. foo() //2 // каждый раз при новом вызове этой функции создается новое лекс. окружение ее foo() //3 Так же чтобы можно было отследить происходящие в лексическом окружении изменения, а также определить какое лексическое окружение является текущим, соответствующим данному этапу выполнения кода есть такое понятие как Контекст выполнения (execution context). Первым контекстом выполнения, который создаётся при запуске JavaScript скрипта всегда является глобальный контекст выполнения (Global Execution Context). - глобальное окружение, глобальная область видимости. Чтобы хранить и отслеживать контексты выполнения они формируются в стек контекстов выполнения (call stack) — список контекстов, организованных по принципу «последним пришёл — первым вышел». Выполняемый контекст всегда является верхним элементом этого стека. После того, как необходимый код выполнится, связанный с ним контекст выполнения удалится, управление вернется в контекст, который находился элементом ниже, и теперь он будет верхним элементом — текущим контекстом выполнения. Глобальная область видимости => Область видимости функции => Область видимости вложенной функции в предыдущую. Зайдет последняя область и выйдет первой она же, когда выполнится и т.д.

Answer 9

Способность функции запомнить свое внешнее лексическое окружение. Замыкание - это функция у которой есть доступ к своей внешней функции, даже после того, как внешняя функция прекратилась. Это говорит о том, что замыкание может запоминать и получать доступ к переменным, и аргументам своей внешней функции, даже после того, как та прекратит выполнение, т.е. функция запоминает окружение свой внешней функции и может брать оттуда то, что необходимо. При этом , когда внешняя функция отвыполнит уже свои действия, то ее окружение не уходит из памяти, тк в ее внутренней функции есть ссылка на это окружение. Пример: function getCounter() { let counter = 0; // перезаписывается значение, тк окружение как было, так и осталось, в отличие от функции-замыкания - при новом вызове ее окружение формируется на новое. return function() { return counter++; } } let count = getCounter(); // это замыкание, есть доступ к окружению внешней ее функции console.log(count()); // 0 console.log(count()); // 1 console.log(count()); // 2 Мы храним анонимную внутреннюю функцию, возвращенную функцией getCounter в переменной count. Так как функция сount теперь замыкание, она может получать доступ к переменной counter в функции getCounter, даже после того, как та завершится. Но обратите внимание, что значение counter не сбрасывается до 0 при каждом вызове count, как вроде бы она должна делать. Так происходит, потому что при каждом вызове count(), создаётся новая область видимости, но есть только одна область видимости, созданная для getCounter, так как переменная counter объявлена в области видимости getCounter(), она увеличится при каждом вызове функции count, вместо того, чтобы сброситься до 0. Примером замыкания можно назвать санку в thunk creator-е. Т.е. мы создаем thunk creator и вызываем его, в котором сидит сама санка. Санка же берет переданные данные из thunk creator-а. Таким образом получается замыкание. Пример: export const loginTC = (data: any) => //это thunk creator (dispatch: Dispatch) => { return data }//сама санка, которая берет данные из thunk creator dispatch(loginTC(data))

Answer 10

Рекурсия — это функция в своём теле вызывает саму себя. Функцию, которая вызывает сама себя, называют рекурсивной функцией. Вызов рекурсивной функции, называется рекурсивным вызовом. Пример - Вычисление факториала с помощью рекурсии: function f(n) { if (n === 1){ // необходимо задать условия выхода из рекурсии, иначе она будет бесконечна return 1; } return n * f(n - 1); // 4*f(4-1) // 3*f(3-1) = 6 // 2*f(2-1) = 2 //когда в if удовлетворится условие, то вернет число 1 } f(4); Теперь можем выполнить подсчет: возвращается 1 как результат выполнения этой функции f(2-1), соответственно, 2*1=2, затем это значение возвращаем как результат этой функции f(3-1), значит 3*2=6, и последнее - 4*6=18 Общее количество вложенных вызовов называют глубиной рекурсии. Пример2: function pow(x, n) { // лексическая область видимости: //1 шаг - {x: 2, n: 3} //2шаг - {x: 2, n: 2} //3шаг - {x: 2, n: 1} if (n == 1) { return x; //3 шаг - возврат 1 как результат предыдущего вызова функции pow } else { return x * pow(x, n - 1); } } pow(2, 3) ; //2*1 = 2 // 2*2 = 4 // 2*4 = 8

Answer 11

(function () { ..... }) ( ) Это функция, которая выполняется сразу же после того, как она была определена. Одна из целей IIFE - ограничить область видимости. Сделать так, чтобы переменные, объявленные в ней, не убежали в глобальную видимость. (function () { var aName = "Barry"; })(); // Variable name is not accessible from the outside scope aName // throws "Uncaught ReferenceError: aName is not defined" Главной идеей является то, что анонимная функция вызывается сразу после своего объявления. если нужно выполнить код один раз и сохранить его резульататы во "внешней среде" (без объявления глобальных переменных). Мы не храним нигде ссылку на эту функцию. Нигде не храним возвращаемое значение. Так только функция инициализирована, она тут же вызывается. Это может быть удобным вариантом инициализации, например, мы инициализируем и прикрепляем функции обработчиков событий один раз, после объявления функции вызываем ее, и теряем с ней связь.

Answer 12

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

Answer 13

Простой интерпретатор анализирует и тут же выполняет программу построчно (покомандно), по мере поступления её исходного кода. Недостаток - интерпретатору приходится проделывать одну и ту же работу, когда используете одинаковый код несколько раз. Например, если вы находитесь в цикле, интерпретатор будет анализировать одни и те же строки снова и снова. Также, такой интерпретатор обнаруживает ошибки в коде только при попытке выполнения строки с ошибкой. И никак не сможет сообщить об ошибке в коде с самого начала. Компилятор не выполняет программу построчно, сначала, он последовательно анализирует и разбирает код программы, производит необходимую оптимизацию и только после этого генерирует машинный код, который впоследствии начнет выполняться. Поэтому, при компиляции требуется больше времени для запуска, так как в начале должны пройти все её этапы. Но при этом компилятор оптимизирует код для увеличения скорости его работы. Например, циклы будут работать быстрее потому, что после оптимизации нет необходимости повторять одни и те же действия анализа кода для каждого прохода через цикл. Также, компилятор сразу может сообщить, что в коде присутствует ошибка. Как сейчас работает движок Js? Сначала исходный код программы последовательно анализируется и разбирается компилятором. Первым традиционным этапом работы стандартного компилятора является лексический анализ исходного кода. На этом этапе каждая строка кода посимвольно анализируется и разбивается на значимые для языка части. Эти имеющие смысл для языка части называются лексемами. var a = 2; Эта программа, вполне вероятно, будет разбита на следующие лексемы: var — объявление переменной, a — идентификатор (имя) переменной, = — оператор присваивания, 2 — число, ; — конец инструкции

Answer 14

Чтобы можно было отследить происходящие в лексическом окружении изменения, а также определить какое лексическое окружение является текущим, соответствующим данному этапу выполнения кода есть такое понятие как Контекст выполнения (execution context). Первым контекстом выполнения, который создаётся при запуске JavaScript скрипта всегда является глобальный контекст выполнения (Global Execution Context). - глобальное окружение, глобальная область видимости. Чтобы хранить и отслеживать контексты выполнения они формируются в стек контекстов выполнения (call stack) — список контекстов, организованных по принципу «последним пришёл — первым вышел». Выполняемый контекст всегда является верхним элементом этого стека. После того, как необходимый код выполнится, связанный с ним контекст выполнения удалится, управление вернется в контекст, который находился элементом ниже, и теперь он будет верхним элементом — текущим контекстом выполнения. Глобальная область видимости => Область видимости функции => Область видимости вложенной функции в предыдущую. Зайдет последняя область и выйдет первой она же, когда выполнится и т.д.

Answer 15

Это процесс, когда можно трансформировать функцию с несколькими аргументами в функцию, которая будет возвращать последовательность других функций, которые вложены друг в друга, соответственно, каждая такая функция будет последовательно принимать в параметр переданный аргумент. Пример: обычная функция: function volume(l,w,h) { return l * w * h; } const aCylinder = volume(100,20,90) // 180000l каррирование: function volume(l) { return (w) => { return (h) => { return l * w * h } } } const aCylinder = volume(100)(20)(90) // 180000 Суть в том, что самая последняя вложенная возвращаемая функция имеет доступ к окружению предыдущих функций

Answer 16

Это свойства объекта. У всех объектов(объект, массив, number, string, boolean(помним, что если поставить точку, то создается обертка, которая на время создает объект), функция, функ. выражение, стрелочная функция, класс(это навороченная функция, а значит объект)) есть proto. proto - это объект. proto, относящиеся к одному типу объектов, равны, т.к. они относятся к одному и тому же объекту proto, если разные типы, то не равны: 1. {}._proto_ === {}._proto_ // true, т.к. один тип 2. proto всех видов функций(даже класс), будут так же равны 3. function add._proto_ === const a = ()=>{}._proto_ // true, т.к. один тип 4. {}._proto_ === function add._proto_ // false , т.к. разные типы Prototype - независимый объект, у которого есть свои свойства и методы(т.е. это те, от кого все пошло)(сlass String{}, class Samurai{}, function First(){}(функции-конструкторы)). Он есть только у КЛАССА и ФУНКЦИИ-КОНСТРУТОРА. proto ссылается на прототип(prototype) того класса, с помощью которого был создан экземпляр: 1. сonst a = new String('aaa')//экземпляр класса a._proto_ === String.prototype // true //__proto__ указывает на прототип String.prototype по этому true 2. сlass YouTube{} === Function.prototype // true, т.к. создан с помощью new Function() 3. class Samurai{ }//класс const s = new Samurai()//экземпляр класса s._proto_ === Samurai.prototype // true 4. Array._proto_ === Function.prototype // true, тк все классы - это функции //здесь берется подкапотный new Array() 5. class User{ } User._proto_ === Function.prototype User._proto_._proto_ === Object.prototype User._proto_._proto_ ._proto_===null //User создается с помощью new Function //второе ._proto_ будет относится уже к Function.prototype, а создался он с помощью new Object //третье ._proto_ относится уже к Object.prototype, а его _proto_ уже никуда не ссылается, т.к. это объект Зачем эти прото и прототип? let dim = {name: Dim} dim.toString()// у объекта нет такого методы, и под капотом происходит это: dim._proto_ => Object.prototype =>{toString(){ }} // смотрит на что ссылается прото, лезет в него(Object) и если в этом объекте сидит этот метод, то берет его.

Answer 17

Но не все переменные в нашем коде одинаково доступны. Доступна ли переменная и как получить к ней доступ, определяют области видимости. Область видимости — это часть программы, в которой мы можем обратиться к переменной, функции или объекту. Этой частью может быть функция, блок или вся программа в целом — то есть мы всегда находимся как минимум в одной области видимости. 1.Глобальная область видимости — это самая внешняя коробка из всех. Когда мы «просто объявляем переменную», вне функций, вне модулей, то эта переменная попадает в глобальную область видимости. 2.Блочная область видимости ограничена программным блоком, обозначенным при помощи { и }. Например, if или switch 3.Функциональная область видимости — это область видимости в пределах тела функции. 4. Модульная область видимости - импорт\экспорт переменных между файлами. Модуль - это файлы. Переменные, объявленные в этом модуле будут доступны только там, если же их импортируют в другой модуль, то они будут доступны в этом модуле. Поведение, когда переменные родительских областей становятся доступны в дочерних, называется лексической областью видимости. Кстати, var не имеет блочной области видимости, например, объявленная в if, к ней будет доступ и за пределами if. В функции она имеет область видимость, как и остальные.

Answer 18

В стрелочных функциях this устроен иначе. Если в обычной функции решающим является момент вызова, то в стрелочной функции — момент создания. Еще можно сформулировать так — в стрелочных функциях this сохраняет значение this окружающего контекста в момент создания. class Dog { constructor(name){ this.name = name; // здесь будет сидеть 'Bim' } eat(food){ console.log('method', this) // выведет в консоль Dog {name: Bim} food.forEach((item) => { console.log('arrow func', this) // выведет в консоль Dog {name: Bim}, это доказывается, что у стрелочной функции нет своей this и она его берет из внешнего контекста console.log(`${this.name} is eating ${item}`) }); } } const bim = new Dog('Bim'); // создаем новый объект Dog bim.eat(['bone', 'cookie'])

Answer 19

Виртуальный объект DOM — облегченная копия Реального Дома. Виртуальный объект DOM имеет те же свойства, что и реальный объект DOM, но у него нет реальной возможности напрямую изменять то, что отображается на экране. По этому и называется легковесной копией. Т.е. у него есть свойства, как у Реального Дома - свойства часто ссылаются как на то, С ЧЕМ необходимо что-либо сделать (например, название узла). document.innerHTML - отобразит текст, который содержится в элементе html. Но нет методов, т.е. он не может что-то сделать с элементом: На методы часто ссылаются как на ТО, что необходимо сделать (например, удалить узел): document.getElementById(id) - получить элемент с указанным id из всего html

Answer 20

PUT подразумевает под собой, что мы отправим полностью объект, который сидит на серваке, но где-то с необходимыми обновленными свойствами PATCH - отправит только те свойства, которые хотим изменить. Плюс PATCH в том, чтобы не происходило конфликтов. Например, один человек изменил свойство в объекте и отправил через PUT , через секунду другой человек отправляет объект с измененным другим свойством, но в этом объекте по-прежнему сидит то старое свойство, которое изменил первый человек. В результате это старое свойство снова появляется на сервере. С PATCH мы точечно меняем свойства.

Answer 21

DOM имеет древовидную структуру, состоящую из ДОМ-узлов. Браузер получает HTML-файл, парсит его и вызывая document.createElement для каждого узла в DOM. Дом будет состоять из Дом-элементов - это объекты-узлы . Далее можно будет работать с ним, применяя, например, const el = document.getElementById('div') и уже что-то с этим элементом делая, например, el.innerHTML='HELLO!!!', сразу же эти изменения фиксируются в DOM и HTML-страница перерисовывается. Виртуальный Дом уже относится к Реакту, не касаясь обычного HTML-я.

Answer 22

Это метод для объекта document, позволяющий найти HTML-элемент с помощью CSS-селекторов: document.querySelector('.name') // найдет первый попавшийся HTML-элемент, который содержит этот класс С полученным элементом можно будет производить различные манипуляции: менять его текст, атрибуты, CSS стили Если совпадений не найдено, то возвращается значение null. Не допускается использование CSS псевдоэлементов, вернет так же null. Если необходимо найти несколько, то .querySelectorAll вернет массив из этих элементов.

Answer 23

Это объект, который используется для написания и обработки асинхронного кода. Выполняемые внутри промиса функции возвращает промис-обещание. Внутри этого промиса хранится какой-то результат из этой функции. Промис может находиться в одном из трёх состояний: pending — стартовое состояние, операция стартовала; fulfilled — получен результат; rejected — ошибка. У промиса есть 3 метода then(), catch() и finally(), которые позволяют использовать результат вычисления функции, которые содержатся в промисе. С помощью then() мы подписываемся на момент, когда промис зарезолвится(resolve). Таким образом, функция-коллбэк, которую передали в .then, вызывается, и в этот колбэк передаются данные, которыми зарезолвился промис. then() всегда возвращает НОВЫЙ промис. const promis = axios.get('..........') promis.then((data)=>{выполнится, когда промис зарезолвился}) Пишем более кратко: axios.get('..........').then((data)=>{выполнится, когда промис зарезолвился}) С помощью catch обрабатываем ошибку, если она произошла: axios.get('..........') .then((data)=>{выполнится, когда промис зарезолвился}) .catch(error=>{выполнится, когда промис зареджектится}) finally() выполнится в любом случае, независимо от того была ли ошибка или нет: axios.get('..........') .then((data)=>{выполнится, когда промис зарезолвился}) .catch(error=>{выполнится, когда промис зареджектится}) .finally(()=>{выполнится не зависимо от того, что произойдет}) Все те промисы, которые приходят, они созданы с помощью класса Promise через new Promise(()=>{....}) -создается экземпляр класса У самого класса Promise есть так называемые статические методы, которые относятся только к нему, а then(), catch() и finally() - относятся к экземплярам. Вот эти статические методы: 1. Promise.all: если нам нужно запустить множество промисов параллельно и дождаться, пока все они выполнятся. Принимает массив промисов и возвращает новый промис тогда, когда эти все промисы зарезолвятся. Результатом промиса будет массив из результатов каждого промиса. Promise.all([ new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1 new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2 new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3 ]).then(alert); // когда все промисы выполнятся, результат будет 1,2,3, но .then() так же вернет новый промис с этим результатом. // каждый промис даёт элемент массива. Результат будет в такой же последовательности, как и промисы вне зависимости от того, кто быстрее зарезолвился. Если хоть в каком-то промисе произошла ошибка, то итоговый промис никогда уже не зарезолвится. Будет ошибка. 2. Есть метод Promise.allSettled, который помогает обработать промис даже если в каких-то промисах произошла ошибка. Результат будет таким: [ // приходит уже не просто массив, а массив объектов, где лежат инфо о каждом промисе. Если он зарезолвился, то в value сидит ответ, если нет - то ошибка сидит. {status: 'fulfilled', value: ...объект ответа...}, {status: 'fulfilled', value: ...объект ответа...}, {status: 'rejected', reason: ...объект ошибки...} ] // по этому обрабатывать нужно как объект, а не массив: Promise.allSettled(...).then(result=>result.value) Как бы отчет по каждому промису. В старых браузерах не поддерживается, нужен полифил. 3. Метод Promise.resolved([1,2,3]) Вернет сразу зарезолвенный промис, например, может понадобиться, когда нужна заглушка, и хотим симитировать получение данных с сервера, но бэк еще не готов. Просто создаем такой промис и вставляем нужные нам данные. И далее уже можем обрабатывать с помощью .then() этот промис. 4. Метод Promise.reject({message: 'Some error'}) Cоздаем промис ошибкой. Возвращает зарежектнутый промис, который можем обрабатывать .catch() 5. Метод Promise.race([..., ...., ....]): Принимает массив промисов, ждёт только ПЕРВЫЙ выполненный промис, из которого берёт результат или ошибку. После этого остальные промисы игнорируются. 6. Метод Promise.any([..., ...., ....]): Принимает массив промисов, ждёт только ПЕРВЫЙ УСПЕШНО выполненный промис, из которого берёт результат. Если первый был с ошибкой, то берется следующий, если он успешен и т.д. Если отклонились все промисы, то возвращённый объект Promise будет отклонён с помощью AggregateError – специального объекта ошибок, который хранит все ошибки промисов в своём свойстве errors. ----------------------------------------------------------------------- Есть простой синтаксический сахар - asinc/await, который используется ВМЕСТО .then(). сonst promis = await axios.get('получим с сервера юзера под id2')//await возвращает результат зарезолвенного промиса console.log(promis ) // {name:'Vasya'} // в переменной promis будет результат зарезолвенного промиса с помощью await БЕЗ использования метода .then().То есть результат res внутри .then((res)=>console.log(res)) === результату в переменной, где применяется await. ( then((res)=>///) - res- здесь будет результат зарезолвенного промиса ) Если переменные с await-ом стоят друг за другом, то остальные после первого будут дожидаться пока первый выполнится и т.д.: const foo = async ()=>{ const pr1= await fetch('........') // выполняется... const pr2= await fetch('........')// ждет пока 1й вып. const pr3= await fetch('........')// ждет пока 2й вып. } Эти переменные можно использовать, например засетать : const [user, setUser] = useState() setUser(pr1.user) Если один из запросов с ошибкой, то следующие прерываются и ловятся ошибкой. В async функции можно использовать try\catch\finally: const foo = async ()=>{ try{ const pr1= await fetch('........') // выполняется... const pr2= await fetch('........')// ждет пока 1й вып. const pr3= await fetch('........')// ждет пока 2й вып. } catch(err){ console.log(''ERROR'', err) } } await обязательно должен быть в связке с async, по этому не забываем ставить async перед функцией. Если после await следует ниже код, то он не будет выполнятся, если не выполнится await const pr1= await fetch('........') сonsole.log('Hello!') Это тоже самое, если бы мы писали с .then(): fetch('........').then(сonsole.log('Hello!')) //если fetch не зарезолвится, то и .then не выполнится Если же мы берем данные, которые фиксированные, а не промис и пропускаем через await, то они так же поместятся в переменную, как поместился бы и промис зарезолвенный: const api={ save(){}, read(){ return {name: 'Alex'} //здесь обычный объект, не промис } async function give(){ await api.save() let data = await api.read() // эвэйтим просто данные, не промис, но в итоге в //переменную все равно записываются данные - //{name: 'Alex'} console.log(data) } give() Эвэйтить можно заранее, например, если в будущем планируется модификация объекта, где вместо этих данных будет промис, таким образом, можем заранее предугадать, чтобы потом не переписывать код. Как сделать промисификацию: const api={ save(){}, async read(){ //сделать функцию ассинхронной, любая ассинх.функция возвращает промис. return {name: 'Alex'} //либо вместо async написать new Promis(resolve=>resolve({name: 'Alex'})) //либо Promis.resolve({name: 'Alex'}) } async function give(){ await api.save() let data = await api.read() // эвэйтим просто данные, не промис, но в итоге в //переменную все равно записываются данные - //{name: 'Alex'} console.log(data) } give()

Answer 24

Так как метод .then() возвращает всегда новый промис, мы можем делать цепочку вызовов: findUsers(3)//отрезолвился промис .then(user=>user.name)//возвращает новый промис с именем пользователя//user - это response-объект. .then(name=> console.log(name)) // это имя пользователя выводится в консоль. Если будет так: findUsers(3).then(user=>user.name) findUsers(3).then(name=> console.log(name)) то это уже не цепочка промисов, когда мы каждый раз даже к одному промису применяем метод по-отдельности. Как отрабатывает .catch() в цепочке промисов: pr(1) .then(user=> return user.friend) .then(user.friend=> return pr(user.friend)) .catch(err=>{ console.log('Try later') return pr(friendId) }) .then(pr(friendId)=> console.log('hello') return) //если перед catch произошла ошибка в каком-либо из then, то catch отработает ее и после него then-ы продолжать работать. Но т.к. здесь цепочка промисов и зарезолвенные промисы передаются из одно в другой, то может произойти разрыв цепочки из-за ошибки. Чтоб такого не было, мы можем вернуть из catch что-то. То есть вернется промис.

Answer 25

Через конструкцию new Promis((resolved, reject)=>{ тело промиса}) , куда передается функция-коллбэк с двумя параметрами. Так же можем обрабатывать промис с помощью методов .then() .catch(). function getPromis(){ сonst promis = new Promis((resolved, reject)=>{ return resolve(Math.random()) //возвращаем в этом случае зарезолвенный промис }) } getPromis().then(pr=>console.log(pr)) //обработаем зарезолвенный промис

Answer 26

Это атрибуты скрипта в HTML. Обычно браузеры загружают defer : Указывает браузеру что скрипт должен выполняться после разбора документа, но ДО события DOMContentLoaded(событие DOMContentLoaded происходит, когда браузер разобрал HTML-страницу и составил DOM-дерево). Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация. Если стоят два скрипта, то первым всегда выполнится script1.js, который подключён раньше. Даже если script2.js загрузится раньше, он будет выполнен после первого скрипта:

Answer 27

API (Application Programming Interface) — язык, на котором приложения общаются между собой. С помощью API одно приложение может использовать возможности другого приложения. Например, интернет-магазин отправляет запрос банковскому приложению, передавая ему реквизиты свои и покупателя, а также сумму для оплаты. А банковское приложение возвращает ответ, в котором сообщается, прошла ли оплата успешно. REST API — это архитектурный стиль. Он описывает, как разработчику следует спроектировать интерфейс для взаимодействия своего приложения с другими. Клиент отправляет запрос на сервер. Сервер аутентифицирует клиента и проверяет его права, затем обрабатывает запрос и возвращает ответ клиенту. -------------------------------------------------------------------------- Как происходит взаимодействие клиента с сервером? 1. Запрос REST API от клиента к серверу всегда состоит из следующих элементов, которые нам необходимо знать: --конечная точка (endpoint) — адрес, по которому отправляется запрос. Например, она может выглядеть так: best-delivery.com/orders/list, чтобы посмотреть список заказов. best-delivery.com - базовый адрес /orders/list - конечная точка(endpoint) --параметры — делятся на параметры пути и параметры запроса. Например, best-delivery.com/orders/{userId}/list {userId} — это параметр пути. Вместо {userId} нужно подставить идентификатор конкретного пользователя, тогда запрос вернет список заказов этого пользователя. Или best-delivery.com/orders/list?orderId=123456 orderId — это параметр запроса. Такой запрос вернет информацию о конкретном заказе. --заголовки (headers) - там находится вся информация, необходимая для корректной обработки запроса, например, определяется формат передаваемых данных. --тело запроса (body) — данные для обработки, как правило в формате JSON. Например, запрос для службы доставки может содержать номер заказа, адрес, телефон для связи и интервал доставки, примерно так: {“orderId”:123456, “address”:”119021, Москва, ул. Льва Толстого, 16”, “phone”:”+74957397000”, “time_interval”:”9:00-11:00”}. 2.Используем такие методы как POST, GET, PUT и DELETE и OPTIONS (в ответе на запрос OPTIONS должен содержать список методов, допустимых для данной конечной точки: 'Allow: GET,POST,DELETE,OPTIONS') ----------------------------------------------------------------------- Как отвечает сервер на запрос клиенту? После выполнения REST API запроса сервер вернет клиентскому приложению ответ. Он включает код ответа, заголовки и тело ответа. --как и в запросе, в ответе в заголовке будет сидеть инфа о формате передаваемых данных, спецификацию и версию протокола обмена, и другие сведения, которые помогут клиентскому приложению правильно прочитать и понять ответ. --тело ответа — это информация, которую запрашивал клиент. Ответ тоже чаще всего передается в формате JSON. Но тело ответа может быть и пустым. --код ответа — это признак успешности выполнения запроса. 200 – ОК - Если клиентом были запрошены какие-либо данные, то они находятся в заголовке или теле сообщения. 404 – Not found. Ресурс не найден. 403 – Forbidden. Доступ к сервису запрещен. 1XX - информационные, 2XX - успешные, 3XX - перенаправления (редирект), 4XX - ошибки клиента 5XX - ошибки сервера GET - получение данных с сервера (обычно в формате JSON, или XML). Операция получения данных не может приводить к изменению состояния сервера. POST - добавление новых данных на сервер. PUT - модификация существующих данных на сервере DELETE - удаление данных на сервере OPTIONS - preflight запрос. Проверяет можем ли мы с одного адреса делать запрос на другой

Answer 28

Суть - злоумышленнику удается внедрить на страницу JavaScript-код, который не был предусмотрен разработчиками. Этот код будет выполняться каждый раз, когда жертвы (обычные пользователи) будут заходить на страницу приложения, куда этот код был добавлен. Таким образом, злоумышленнику удастся заполучить авторизационные данные пользователя и войти в его аккаунт. Или злоумышленник может незаметно для жертвы перенаправить его на другую страницу-клон. Эта страница может выглядеть идентичной. Пользователь введет свои личные данные и они окажутся доступны злоумышленнику.

Answer 29

Инкапсуляция Полиморфизм Наследование

Answer 30

Для функций, объявленных через function f( ) { }, this вычисляется в момент вызова и равен объекту перед точкой. Если такого объекта нет — тогда this будет указывать на глобальный контекст (window) Для стрелочных функций this определяется в момент их создания и больше никогда не изменяется const user = { name: 'Bob', userThis: this, func() { console.log(this); }, arrowFunc: () => { console.log(this); } }; console.log(user.userThis); // this указывает на window. user.func(); // объектом перед точкой является user, поэтому this ссылается на объект user. user.arrowFunc(); // стрелочная функция запомнила свой контекст в момент создания, то и при вызове она будет ссылаться именно на него. Таким образом мы получаем window. Еще объяснение: В случае вызова user.arrowFunc(), стрелочная функция arrowFunc создана в контексте объекта user, но она не имеет своего собственного this. Она сохраняет лексическое окружение, в котором была создана, и в данном случае, это окружение - это глобальный объект (window в браузере). Поэтому при вызове user.arrowFunc(), в консоль будет выведен глобальный объект (window).

Answer 31

call() - нет необходимости создавать вспомогательную функцию для того, чтобы передать в качестве this нужный объект. const car1 = { color: 'red', show(a, b) { console.log(this.color); console.log(a, b); } const car2 = { color: 'black', } car1.show.call(car2, 1, 2) // black, 1, 2 // вызываем сразу же метод show с помощью метода call() и передаем в аргумент другой объект car2, который будет теперь контекстом для this вместо контекста car1 // если нужно передать аргументы, то перечисляем их через запятую. Методом apply() идентичен, за исключением - что мы передаем аргументы массиве - car1.show.call(car2, [1, 2]) //передача аргументов - не обязательна и в том и другом методе. В таком случае они полностью идентичны. Метод bind() создает функцию-обертку: const b = car1.show.bind(car2, 2, 3) которую нужно будет вызвать: b() // так же аргументы по желанию --------------------------------------------------------------------- В данном случае мы не можем привязать к this контекст через call() !!! сonst user2={ name: 'Vasya' } const user = { name: 'Bob', arrowFunc: () => { console.log(this); }.call(user2) }; user.arrowFunc() // будет Bob user.arrowFunc.call(user2) // и если уберем около стрелочной функции .call(user2), то таким образом можно привязать, будет Vasya Мы не можем перепривязывать контект!!! user.arrowFunc.bind(user2).call(user3) Здесь контекст будет user2

Answer 32

1. Классы нужны для создания однотипных объектов --с помощью функции-конструктора - (например, есть функция-конструктор животное, которое имеет базовые свойства и методы(ходить, пить, есть). Теперь от такого конструктора мы можем создавать экземпляры. Рассмотрим на примере action: function DeleteUserAction(userId){//назв.с бол.б. this.type = "DELETE_USER" this.payload:{ userId: userId } //создали функцию-конструктор } сonst action1 = new DeleteUserAction(35432) сonst action2 = new DeleteUserAction(53322) //создали экземпляры --с помощью класса: class DeleteUserAction{ constructor(){ this.type = "DELETE_USER" this.payload:{ userId: userId } } } сonst action1 = new DeleteUserAction(35432) сonst action2 = new DeleteUserAction(53322) //так же вызываем и получаем экзмемпляр Как делалось раньше для функций-конструкторов: будет одна загвоздка с методами - при создании экземпляра, будет создаваться и новый методы-функции, что не очень хорошо. По этому методы лучше писать отдельно вот так: function User(name, site){ this.name = name this.site = site }//объект со свойствами User.ptototype.hello = function(){....} //присоединили к объекту метод через прото сonst u1 = new User('fg', 'ggg') сonst u2 = new User(fg', 'ggg') u1.hello()//теперь можем вызывать метод, его this будет ссылаться на юзера1. Помним, что у FD this формируется на момент вызова. u2.hello() Теперь в классах делается все проще: вместо того, чтобы цеплять к прототипу, теперь метода пишется просто в классе. Так же на один и тот же метод будут ссылаться: u1.hello() === u2.hello() //true 2. С помощью класса мы можем реализовывать ООП парадигму - наследование, инкапсуляция, полиморфизм. ---Инкапсуляция - сокрытие деталей, например, можем скрыть доступ к свойствами, например, _name, но это условная договоренность между разработчиками, мы все равно сможем получить доступ к этому свойству user._name. Можно использовать #user, в таком случае мы уже не сможем получить доступ user.#name. Наилучший вариант - геттеры и сетторы: get name(){return this.#name} //в таком случае сможем прочитать свойство set name(value){this.#name = value} //можем изменять свойство пришедшим знач-м. user.name //так обращаемся у геттеру, чтобы получить свойство user.name = 'Igor' // так обращаемся к сеттеру, чтобы установить значение для свойства ---Наследование: //класс Кодер унаследует все свойства и методы от класса Юзер сlass Coder extends User{ сonstructor(name, idUser, tech){ //передаем все свойства и Юзера и Кодера super(name, idUser) //для унаслед-х св-в this.tech = tech //для свойств Кодера } code(){console.log(this.tech)} } const coder1 = new Coder('Igor', '4773663', 'JS') //передаем значения для свойств, которые унаследовались от класса Юзер сoder1.hello() сoder1.code() // JS // так же может вызывать унаследованный метод Так ж можем и переопределить метод унаследованный или дополнить его своим кодом: hello(){ super.hello()//вызываем унаследованный метод concole.log('HI!')//дополнили свои кодом } ---Полиморфизм: например, мы собираем в массив объекты одной сущности(образовались от коренного какого-то класса неважно как, либо это экземпляр, либо с помощью расширения класса) const arr = [u1, u2, coder1] и у них всех есть то, что есть в коренном классе, например, метод hello() arr.forEach((u)=> u.hello())//вызываем у каждого элемента этот метод, зная, что они все имеют этот метод от коренного класса. Объяснение: полиморфизм даёт возможность использовать одни и те же методы для объектов разных классов. Неважно, как эти объекты устроены, — в ООП можно сказать самолёту и квадрокоптеру: «Лети», и они будут делать это как умеют: квадрокоптер закрутит лопастями, а самолёт начнёт разгон по взлётно-посадочной полосе. Грубо говоря, полиморфизм — это диспетчер в аэропорту. Ему неважно, какую топливную систему предусмотрел авиаконструктор и как работает система форсажа — он просто даёт команду: «Взлёт разрешаю». После этого на лайнере начинают происходить какие-то свои внутренние процессы, на которые диспетчер уже не влияет. Как пример можно рассмотреть классовые компоненты в Реакте: class ProfilePage extends React.Component{ //класс ПрофайлПейдж унаследуется от класса Реакта constructor(props){ super(props) //передаем к родит. компоненте React.Component пропсы, чтобы она их себе записала. } render(){ return '.....'} } //если классовую компоненту отрисовываем как тег, то сonct compl = new ProfilePage({title: 'Hi'}) // то Реакт создает экземпляр объекта на основе этого класса и если есть пропсы, то упаковывает их в объект compl.render() // и вызывает рендер сompl.render()//отрендери мне compl.componentDidMounting()

Answer 33

Когда мы захотим прочитать свойство из экземпляра, а оно отсутствует, то JavaScript автоматически берёт его из прототипа. Это называется «прототипным наследованием». ---Можно задать прототип вручную: var animal = { eats: true }; var rabbit = { jumps: true }; rabbit.__proto__ = animal; // унаследовать alert(rabbit.eats); // true alert(rabbit.jumps); // true ---Также можно создать объект с явным прототипов с помощью Object.create: var animal = { eats: true }; var rabbit = Object.create(animal); alert(rabbit.eats); // true Специальные значения null и undefined стоят особняком. У них нет объектов-обёрток, так что методы и свойства им недоступны. Также у них нет соответствующих прототипов. Цепочка прототипов, пример: Null <= [[Prototype]] <= <=Object.prototype, который имеет свои методы: toString: function other object methods <= [[Prototype]] <= <= Array.prototype, который имеет свои методы: slice: function other array methods <= [[Prototype]] <= [1, 2, 3] https://learn.javascript.ru/native-prototypes (схема есть полная и объяснение) Самое сложное происходит со строками, числами и булевыми значениями. Они не объекты. Но если мы попытаемся получить доступ к их свойствам, то тогда будет создан временный объект-обёртка с использованием встроенных конструкторов String, Number и Boolean, который предоставит методы и после этого исчезнет. Эти объекты создаются невидимо для нас, и большая часть движков оптимизирует этот процесс, но спецификация описывает это именно таким образом. Методы этих объектов также находятся в прототипах, доступных как String.prototype, Number.prototype и Boolean.prototype.

Answer 34

Переменной, объявленной через let, можно не присваивать начальное значение. Значение этой переменной можно переопределять. Переменной, объявленной через const, необходимо присвоить начальное значение. Его переопределять нельзя. Они имеют блочную область видимости - значит недоступны за пределами каких-то блоков(условия, функции и тд) Нельзя к ним обращаться до их объявления. Переменной, объявленной через var, можно обращаться ДО объявления(hosting) ее, но выведет undefined, можно не присваивать начальное значение. У нее функциональная область видимости - значит она доступна в функции, но недоступна за ее пределами.

Answer 35

this - ссылка на объект Контекстом всегда является какой-то объект из под которого был вызван метод (функция). this имеет различные значения в зависимости от того, где используется: -----Сама по себе - this относится к глобальному объекту (window). -----В методе(FD) - this относится к родительскому объекту.(в момент вызова) -----В функции - this относится к глобальному объекту. -----В функции в 'strict mode'('use strict') - this = undefined. Подробнее: В строгом режиме, значение this внутри метода объекта не будет автоматически связано с объектом(в момент вызова), а будет равно undefined. В строгом режиме это было сделано для уменьшения ошибок и предотвращения неявного связывания this с глобальным объектом (как это было в нестрогом режиме). Это требование строгого режима обеспечивает более предсказуемое поведение и помогает избежать некоторых ошибок, связанных с неправильным использованием this. !!! Вместо использования глобального объекта, в строгом режиме значение this остается undefined, что приводит к ошибке, и программист должен явно указать контекст с использованием методов !!! call() или apply(). -----В стрелочной функции - this относится к глобальному объекты (window). (там где они были созданы, в момент создания) ---- Если стрелочная находится внутри объекта, а не в глобальной области, то this будет равно undefined в этом случае - this.prop, а так this == window (там где они были созданы, в момент создания): var obj = { prop: "value", method: () => { console.log(this === window); // true (в браузере) console.log(this.prop); // undefined, так как глобальный объект не имеет свойства prop } }; obj.method(); !!!!!То есть получается, что при создании функции method ее this равен глобальному объекту, а у этого объекта нет свойства prop, по этому получается undefined.!!!!! Решением может быть привязать контекст, чтобы this ссылалась на объект с помощью bind(this) call(this) apply(this): var obj = { prop: "value", method: function() { var arrowFunction = () => { console.log(this.prop); }; // Используем bind для привязки контекста var boundArrowFunction = arrowFunction.bind(this); boundArrowFunction(); } }; obj.method(); // Вывод: "value" ------В событии - this ссылается на элемент запустивший событие. this - ссылка на контекст(объект) контекст - объект, на который ссылается this, и зависит от того, где используется this(описано выше)

Answer 36

1. Подписываемся на стор: store.subscribe(function subscriber(){}) //функция внутренняя выполнится тогда, когда обновится стор, т.е. подписчик подписывается и ожидает изменений, после чего запустит функцию. 2. Вешаем обработчик событий на элемент: button.addEventListener('click', function subscriber(){}) //функция запустится когда произойдет событие И также если отписываемся от события: (только нужно создать переменную, когда вешаем обработчик, иначе подписка и отписка будут ссылаться на разные функции) button.addEventListener('click', function subscriber(){})//неправильно button.removeEventListener('click', function subscriber(){})//неправильно const sub = button.addEventListener('click', function subscriber(){})//правильно! sub.removeEventListener('click', function subscriber(){})//правильно! 3. Подписываемся с помощью then на зарезолвенный промис: promises.then((res)=> ...) //ожидает когда промис зарезолвится и тогда выполнится внутреняя функция 4. По истечению времени выполнится функция из сетТаймаута: setTimeout(function subscriber(){}, 1000) 5. useSelector тоже является подписчиком. Он подписывается на изменения стейта. 6. Когда вешаем onClick на наш кастомный тег(компоненту): {}} /> //сработает коллбэк, когда произойдет событие

Answer 37

Полифил — это код, реализующий какую-то функциональность, которая не поддерживается в некоторых браузерах. Например, в новом синтексисе есть методы массивов, которые не поддерживаются в старых браузерах. Для поддержки пишется код, который переведет методы массивов Для перевода нового синтаксиса в старый используется: Babel – это транспилер. Он переписывает современный JavaScript-код в предыдущий стандарт. Современные сборщики проектов, такие как webpack или brunch, предоставляют возможность запускать транспилер автоматически после каждого изменения кода, что позволяет экономить время.

Answer 38

С точки зрения глубокого и поверхностного копирования можно создавать два вида переменных. Первый — это примитив. Его основные типы: строка, число, булево значение, неопределенное значение и null. Второй вид — переменная-ссылка, известная как объект. При копировании примитивного значения ему присваивается новый адрес в памяти: const variable1 = "Hello" // указывает на адрес памяти: 0x001 const variable2 = 100 // указывает на адрес памяти: 0x002 А когда копируется ссылочная переменная, новая переменная будет указывать на место скопированной в памяти. Т.е. объекты - ссылочный тип данных. Поверхностная копия - копия, которая указывает на то же место в памяти, что и оригинал.(т.е. мы просто скопировали объект в другую переменную и она продолжает ссылаться на старый объект). Глубокие копии не имеют общих ссылок с исходной переменной. Методы глубокого копирования: 1. Если объект, который нужно скопировать, находится на глубине только одного уровня, для создания глубокой копии рекомендуется использовать оператор spread. 2. Для более сложных объектов стоит применять комбинацию JSON.parse() и JSON.stringify(): const fruitStand = { apples: 3 } const fruitStandCopy = JSON.parse(JSON.stringify(fruitStand)) //сначала объект превратили в строку, затем распарсили обратно в уже новый объект fruitStandCopy.apples = 7 console.log(fruitStand.apples) // 3 console.log(fruitStandCopy.apples) // 7 Внимание!!! Однако эта техника рискованна, поскольку функции внутри исходного объекта не будут скопированы. 3. Для создания глубоких копий также можно использовать сторонние библиотеки, такие как lodash. Оттуда взять метод .cloneDeep(value) 4. Использовать глобальный метод structuredClone(), который позволяет сделать полную копию объекта. К сожалению он поддерживается только современными браузерами. Он копирует любую вложенность. Почему нельзя получить такое поведение, как глубокое копирование, автоматически при копировании ссылочной переменной? Дело в том, что размер объекта неизвестен, и в JavaScript считается более эффективным по умолчанию выполнять поверхностное копирование объектов.

Answer 39

Это всплытие вверх по иерархии. Если произошел клик по ребенку-элементу, то всплытие пойдет вверх к родителю, затем к прародителю. Будут запущены все их обработчики. Если произошел клик по родителю, то ребенок уже не будет затронут. Для обратного действия используется addEventListener() с его третьим необязательным параметром useCapture(1й- имя события, 2й - функция, которая обрабатывает). Этот параметр всегда находится в состоянии false. Если поставим его в true, то при нажатии на дочерний элемент, поток событий будет начинаться с прародителя. document.querySelector("#parent").addEventListener("click", () => { document.querySelector("#parent > p").textContent = "Parent Clicked!"; console.log("Parent Clicked"); }, true); // Параметр useCapture теперь имеет значение true

Answer 40

some() позволяет узнать, есть ли в массиве хотя бы один элемент, удовлетворяющий условию. Результат вызова будет true, если хоть один элемент имеет совпадение. Если ни одного - вернет false. every() - удовлетворяют ли все элементы в массиве условию. Если все - true, если хотя бы один не удовлетворяет - false. flat() - возвращает новый массив и уменьшает вложенность массива на заданное количество уровней. По умолчанию стоит 1 - задает число, на которое нужно уменьшить вложенность. (есть задача перепеси этого методы вручную ) includes() - у массивов и строк есть. Для массивов: проверяет, есть ли искомый элемент в массиве. Для строк: проверяет, есть ли искомая подстрока в строке. Если есть - тру, нет- фолс. indexOf() - у массивов и строк есть. Передаем то, что нужно оттыскать в массиве или в строке('чебур'), вернет индекс первого попавшегося совпадения, если не нашел, то -1 Array.from() создаёт новый массив на основе переданного объекта. Объект должен быть либо массивоподобным (как строка или объект arguments), либо итерируемым (как Set или Map). //строка const arr = Array.from('дока') console.log(arr) // ['д', 'о', 'к', 'а'] //объект Set const uniqueNumbers = new Set() uniqueNumbers.add(1) uniqueNumbers.add(2) uniqueNumbers.add(3) const arr = Array.from(uniqueNumbers) // [1, 2, 3] Array.from() принимает три аргумента, второй - функция преобразования элемента перед его добавлением в массив. Работает как метод map(). третий - значение, которое будет использоваться как this в функции из второго параметра. Вместо последовательного вызова Array.from() и .map(): const name = 'Mike' const spacedLetters = Array.from(name).map(function (letter) { return `*${letter}*` }) console.log(spacedLetters) // ['*M*', '*i*', '*k*', '*e*'] ...можно записать один вызов Array.from() со вторым аргументом: const name = 'Mike' const spacedLetters = Array.from(name, function(letter) { return `*${letter}*` }) При выполнении этого кода не создаётся промежуточный массив.!!!

Answer 41

Это методы ФУНКЦИЙ. Все они привязывают контекст bind возвращает другую функцию, которую необходимо еще и вызвать, чтобы функция запустилась с нужным контекстом. call/apply сразу запускают функцию с нужным контекстом. call принимает параметры через запятую, apply принимает массив

Answer 42

1. Что будет в консоле? Как исправить данный результат на то, что предполагалось увидеть? for(var i = 0; i<10; i++){ setTimeout(()=>{ console.log(i) }, i*1000) } //будет вывод 10 каждую секунду 10 раз, т.к. цикл for синхронен и выполнится мгновенно, в отличие от таймаутов. var - глобальная переменная в данном случае(имеет функциональную область видимости, но здесь ее нет) и каждый раз она будет перезатираться новым значением(0 на 1, 2 на 3 и тд) Таймауты запомнят ссылку на переменную i и когда придет время отрабатывать, то возьмет уже итоговую переменную i=10(проверяет, что 10 не меньше 10(10<10//false), но переменная уже 10). В итоге таймауты будут выводить итоговую переменную через каждую секунду. Как исправить? либо var меняем на let, либо делаем замыкание: for (var i = 0; i < 10; i++) { (function (index) { setTimeout(function () { console.log(index); }, index * 1000); })(i);//самовызывается } //для каждой переменной i создаем новый контекст, где на нее будет ссылаться таймаут, который сидит в этой функции. //результат- 1 2 3 4 5 6 7 8 9 //если бы применили let, то т.к. она имеет блочную область видимости, то сохранялась бы для каждого таймаута отдельно.

Answer 43

function makeCounter() { var currentCount = 1 return function () { return currentCount++ } } var counter = makeCounter() //сounter - уже функ. выражение // при вызове основной функции возвращает аноним функцию. Теперь она будет храниться в этой переменной. alert(counter()) // 1 alert(counter()) // 2 alert(counter()) // 3 //теперь можем вызвать вернувшуюся функцию, которая сидит в переменной! Каждый раз при ее вызове результат будет увеличиваться var counter2 = makeCounter() //если вызвать основную функцию и положить ее в другую переменную, то это будет уже другая функция, независимая от первой. alert(counter2()) // 1 Кстати! Чем отличается currentCount++ от ++currentCount? currentCount++ - постфиксный оператор увеличивает значение переменной currentCount на единицу, но возвращает старое значение переменной, до того как оно было увеличено.(то есть вернет 1) ++currentCount - префиксный оператор также увеличивает значение переменной currentCount на единицу, но возвращает новое увеличенное значение.(то есть вернет уже 2)

Answer 44

не выполняет функцию, возвращает другую функцию с навсегда заданным контекстом. 1. function foo() { console.log(this.name); } let a = { name: 'Dima' }; let b = { name: 'Viktor' }; const bindedFooA = foo.bind(a); const bindedFooB = foo.bind(b); //связали функцию с другими контекстами, получили две другие функции с контекстами. bindedFooA(); // 'Dima' bindedFooB(); // 'Viktor' //теперь вызываем ОБЯЗАТЕЛЬНО! эти новые функции. 2. Более сложный пример с параметрами: function foo(age, city) { console.log(`${this.name}, ${age}, ${city}`); } let a = { name: 'Dima' }; let b = { name: 'Viktor' }; const bindedFooA = foo.bind(a, 30); const bindedFooB = foo.bind(b, 18); //связали функцию с разными контекстами, получили две разные функции. Можем передать дальше аргументы, в нашем случае это попадем в age параметр... bindedFooA('Tbilisi'); // Dima, 30, Tbilisi bindedFooB('Minsk'); // 'Viktor, 18, Minsk //... вызвав новую функцию, можно еще и передать следующие аргументы! они пойдут следом за другими, которые были переданы в bind

Answer 45

То, что она ретурнет, это всегда промис! Если в такой функции явно не прописан return, то промис также возвращается! только ее зарезолвенный результат будет равен undefined!

Answer 46

сразу выполняют функцию, разница двух функций в том, как передавать параметры function foo(age, city) { console.log(`this.name, ${age}, ${city}`) } let a = { name: 'Dima' } let b = { name: 'Viktor' } foo.apply(a, [31, 'Tbilisi']) - массив foo.call(b, 18, 'Minsk') - запятая //привязываем контекст к функции и тут же сразу вызывают ее с новым контекстом. Отличие в передачи аргументов

Answer 47

map возвращает НОВЫЙ массив. map нужен, чтобы из массива, в котором содержаться элементы в оригинальном виде, получить массив той же длины, который содержит "новые" элементы, полученные на основе элементов старого массива: ['1', '2', '3'].map((el) => +el) // массив строк преобразовываем в массив чисел [18, 20, 12].map((age) => { if (age >= 18) { return { age: age, adult = true } } else { return { age, adult = false } } }) // из массива чисел получаем массив объектов, с полями: age и adult (взрослый): true\false в зависимости от того, возраст >= 18 или нет filter возвращает НОВЫЙ массив. filter нужен, чтобы получить новый отфильтрованный массив, в котором будет меньше элементов, чем в исходном, потому что мы фильтруем исходный, убираем ненужное: ['Minsk', 'Moscow', '', '', 'London', ''].filter( (el) => el !== ''); // пропускам в результирующий массив не пустые строки [{age: 18, sex: 'f', name: 'Sveta'}, {age: 17, sex: 'f', name: 'Sashka'}, {age: 19, sex: 'm', name: 'Andrew'}].filter( (person) => { return person.age >= 18 && person.sex === 'f'; }) // пропускаем на вечеринку только тех, кто девочка и кому 18+}

Answer 48

reducer пробегается по всему массиву и на выход выдаёт какое-то одно обобщённое значение, которое всегда возвращаем(return). Это может быть как новый МАССИВ, так и простое значение примитив или ОБЪЕКТ: Простой подсчет общего числа: ['Minsk', 'Moscow', '', '', 'London', ''] .reduce((acc, el) => { if (el !== '') acc++ return acc }, 0) // подсчитываем, сколько у нас в массиве не пустых строк Создание нового массива: [ { age: 18, sex: 'f', name: 'Sveta' }, { age: 17, sex: 'f', name: 'Sashka' }, { age: 19, sex: 'm', name: 'Andrew' } ].reduce((acc, person) => { if (person.age >= 18 && person.sex === 'f') { acc.push(person) } return acc }, []) // на выходе получаем новый массив, состоящий из людей, кто девочка и кому 18+ (но лучше эту задачу решать с помощью filter, но и так можно) Подсчет суммы: [1, 4, 6, 66, -12].reduce((acc, number) => { acc += number return acc }, 0) // подсчёт суммы всех чисел в массиве

Answer 49

class Animal { constructor(name) { this.name = name } walk() { alert('I walk: ' + this.name) } eat() { alert('I can eat') } } class Rabbit extends Animal { walk() { super.walk() alert('...and jump!') } } var rabbit = new Rabbit('Bunny') rabbit.walk() rabbit.eat() // 1 алерт - 'I walk: Bunny' // 2 алерт - '...and jump!' // 2 алерт - 'I can eat'

Answer 50

Вторым аргументом setState может принимать коллбэк-функцию, которая будет вызвана после завершения обновления состояния и перерисовки компонента. Может использоваться когда нужно совершить определенные действия, зависящие от обновленного состояния(которое уже обновилось только что), использование коллбэк-функции может быть полезным: import React, { useState } from 'react'; const MyComponent = () => { const [count, setCount] = useState(0); const handleClick = () => { // Обновляем состояние count setCount(count + 1, () => { // Коллбэк-функция вызовется после обновления состояния и перерисовки компонента console.log('Count has been updated:', count); //выведется 1, а не 0. //0 вывелось бы, если бы мы вызвали консоллог вне коллбэк-функции }); }; return (

Count: {count}

); }; export default MyComponent; Значение count, использованное в коллбэк-функции после setState, будет обновленное значение, а не предыдущее. Это происходит потому, что коллбэк-функция вызывается после завершения обновления состояния и перерисовки компонента. Если написать console.log('Count has been updated:', count); вне коллбэк-функции, то покажет старое значение. Это происходит потому, что функция setState является асинхронной, и обновление состояния может не произойти мгновенно. Поэтому, когда вы вызываете console.log сразу после setCount, оно выполнится до того, как состояние будет обновлено и перерисовка компонента будет завершена. Отсюда еще и момент про ассинхронность seState, когда React объединяет несколько обновлений состояния в одно для оптимизации производительности.

Answer 51

function doItAfter(seconds) { let promise = new Promise((resolve, reject) => { setInterval(() => { resolve() }, seconds * 1000) }) return promise } doItAfter(2).then(() => { console.log("This will be logged after 2 seconds"); }); //"This will be logged after 2 seconds" будет выведено через 2 секунды после вызова doItAfter(2).

Answer 52

Hoisting (поднятие) - это механизм в JavaScript, при котором объявления переменных и функций перемещаются в верхнюю часть своей области видимости перед выполнением кода. Это касается переменной var и FD (кстати, оказывается let и const тоже поднимаются, но остаются недоступны до их фактической инициализации, это временная мертвая зона). Если обратиться к переменной до ее объявления, то в значении получим undefined. Если обратиться к FD до ее объявления, то получим то, что она возвращает или выводит.

Answer 53

const numbers = [1, 45, 66, 2, 4, 6, -2, -10, -100, 100] let minValue = numbers[0] //берем самое первое число из массива for (let i = 0; i < numbers.length; i++) { if (numbers[i] < (> - для макс.) minValue) { minValue = numbers[i] } } console.log(minValue)

Answer 54

Пример: 1! = 1 2! = 2 * 1 = 2 3! = 3 * 2 * 1 = 6 4! = 4 * 3 * 2 * 1 = 24 5! = 5 * 4 * 3 * 2 * 1 = 120 //это число, умноженное на "себя минус один", затем на "себя минус два", и так далее до 1. ---------------------------------------------------------------------- function factorial(n) { return n ? n * factorial(n - 1) : 1 } alert(factorial(5)) // 120" 1. Если n равно 0 или отрицательное число, функция вернет 1. Это базовый случай рекурсии, чтобы избежать бесконечного цикла. 2. После достижения базового случая(n==0), все рекурсивные вызовы вернутся обратно, и каждый вызов вернет результат умножения n на результат предыдущего вызова (factorial(n - 1)). factorial(5) вернет 5 * factorial(4). factorial(4) вернет 4 * factorial(3). factorial(3) вернет 3 * factorial(2). factorial(2) вернет 2 * factorial(1). factorial(1) вернет 1 * factorial(0). factorial(0) вернет 1. //больше не будет вызовов Теперь все рекурсивные вызовы будут развернуты обратно: factorial(1) вернет 1 * 1 = 1. //т.е. factorial(0)*factorial(1) и тд factorial(2) вернет 2 * 1 = 2. factorial(3) вернет 3 * 2 = 6. factorial(4) вернет 4 * 6 = 24. factorial(5) вернет 5 * 24 = 120. Таким образом, результат функции будет равен произведению всех чисел от n до 1, что соответствует факториалу числа n. Объяснение рекурсии : https://www.youtube.com/watch?v=rh1mP02NFoM

Answer 55

Следующее число получается как сумма двух предыдущих. Первые два числа равны 1, затем 2(1+1), затем 3(1+2), 5(2+3) и так далее: 1, 1, 2, 3, 5, 8, 13, 21.... function fib(n) { return n <= 1 ? n : fib(n - 1) + fib(n - 2); } alert( fib(3) ); // 2 alert( fib(7) ); // 13 // fib(77); // не запускаем, подвесит браузер" 1. Если n меньше или равно 1, функция вернет n. Это базовый случай рекурсии, чтобы избежать бесконечного цикла. 2. Если n больше 1, функция выполнит два рекурсивных вызова fib(n - 1) и fib(n - 2). Таким образом, она вызывает себя с аргументами n - 1 и n - 2: При вызове fib(3) функция будет выполнена следующим образом: fib(3) вернет fib(2) + fib(1). fib(2) вернет fib(1) + fib(0). fib(1) вернет 1, так как это базовый случай. fib(0) вернет 0, так как это базовый случай. Теперь все рекурсивные вызовы будут развернуты обратно: fib(1) вернет 1. fib(0) вернет 0. fib(2) вернет 1 + 0 = 1. fib(3) вернет 1 + 1 = 2.

Answer 56

function sumTo(n) { if (n == 1) return 1//условие окончания return n + sumTo(n - 1) } alert(sumTo(100)) // 5050 sumTo(100) вернет 100 + sumTo(100 - 1) sumTo(99) вернет 99 + sumTo(99 - 1) ... Теперь все рекурсивные вызовы будут развернуты обратно: sumTo(1) вернет 1. sumTo(2) вернет 3.

Answer 57

const multArr=[1, [1,2, [3,4]], [2,4]] //многомерный массив const flatArr = (arr) =>{ let result = [ ] //переменная, куда будем складывать результат arr.forEach(el=>{ if(Array.isArray(el)){ result = [...result, ...flatArr(el)] }else{ result = [...result, el] } }) return result } console.log(flatArr(multArr)) //проходимся по каждом элементу массива и проверяем, что если элемент - массив, то в новую переменную result создаем новый массив, копируем содержимое этого массива, если оно есть и в него же вкладываем результат вызова этой же функции

Answer 58

Семантичность - способность документа передать смысловое и логическое содержание с помощью определенных тегов. Эти теги видят поисковые роботы. script позволяет подключать js-код, либо как отдельный файл через src, либо можно писать прямо в теге. Есть два атрибута: 1. async, указывающий браузеру, запускать скрипт, указанный в атрибуте src, как только он подгрузился. Т.е. асинхронно src должен быть, иначе не будет работать. 2. defer - атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа HTML. src должен быть, иначе не будет работать.

Answer 59

Это способы создания строк и др. структур данных. var singleQuoted = 'Это строка в одинарных кавычках.'; // литерал ({},[], и тд) var name = 'Иван'; var greeting = `Привет, ${name}! Как дела?`; //шаблонная строка

Answer 60

1.JSON-подобный метод: ПРЕДПОЧТИТЕЛЬНЫЙ ИЗ ВСЕХ, делает глубокую копию почти для всех типов, не использовать для специфических типов!!! var original = { a: 1, b: 2 }; var copy = JSON.parse(JSON.stringify(original)); //(JSON. parse() берет строку JSON и трансформирует ее в объект JavaScript. // JSON. stringify() берет объект JavaScript и трансформирует его в строку JSON) Минусы: --Ограниченность типами данных: Он работает ТОЛЬКО с простыми типами данных, такими как строки, числа, булевы значения и ОБЪЕКТЫ. Нельзя сохранить ссылки на !!!специфичные объекты или классы!!!. --Потеря функциональности: При стрингифайе объекта в строку JSON, все функции, методы и специальные свойства (например, функции обратного вызова) будут утеряны. 2.Object.assign(): var original = { a: 1, b: { c: 2 } }; var copy = Object.assign({}, original); copy.b.c = 3; // Это изменит исходный объект тоже Минусы: --Поверхностное копирование - если есть вложенные объекты или объекты внутри массивов, они будут скопированы по ссылке, а не по значению. --Он не копирует свойства объекта, которые определены с помощью геттеров и сеттеров. 3. Spread: var original = { a: 1, b: { c: 2 } }; var copy = { ...original }; copy.b.c = 3; // Это изменит исходный объект тоже Минусы: --Поверхностное копирование (для объектов): Подобно Object.assign(), оператор распространения выполняет поверхностное копирование объектов. -- Также работает и со вложенными массивами в массиве, копирует по ссылке

Answer 61

1. Использование библиотек: Существуют библиотеки, такие как Lodash, которые предоставляют функции для глубокого копирования объектов. Например, _.cloneDeep() из Lodash может быть использован для создания глубокой копии объекта. const _ = require('lodash'); var original = { a: 1, b: { c: 2 } }; var copy = _.cloneDeep(original); 2.Использование стандартного метода JSON.parse(JSON.stringify(obj)) (нельзя клонировать сложные типы) 3. Функция structuredClone, встроенная в среду выполнения JavaScript: В отличии от других способов, например json, можно: --клонировать широкий спектр типов JavaScript, таких как: Date, Set, Map, Error, RegExp, ArrayBuffer, Blob, File, ImageData и многие другие. const kitchenSink = { set: new Set([1, 3, 3]), map: new Map([[1, 2]]), regex: /foo/, deep: { array: [ new File(someBlobData, 'file.txt') ] }, error: new Error('Hello!') } kitchenSink.circular = kitchenSink // ✅ Выполнено полное глубокое копирование const clonedSink = structuredClone(kitchenSink) 4. Рекурсивное копирование: Вы можете создать функцию, которая рекурсивно перебирает свойства объекта и копирует их. Если свойство объекта является объектом или массивом, функция будет рекурсивно копировать его. function deepCopy(obj) { if (obj === null || typeof obj !== 'object') { return obj; }// проверка что не null и что это объект if (Array.isArray(obj)) { return obj.map(deepCopy); }//если массив то вызывается эта функция для КАЖДОГО элемента массива. Получается копирует вложенные массивы в массиве. const copy = {}; for (const key in obj) { //перебираем свойства объекта if (obj.hasOwnProperty(key)) { //метод hasOwnProperty() используется для проверки, что свойство действительно принадлежит obj, и что оно не унаследовано от его прототипа. Это важно для избежания нежелательного копирования унаследованных свойств. copy[key] = deepCopy(obj[key]); //создается копия свойства, а значение создается с помощью рекурсивного вызова функции deepCopy для значения, связанного с ключом key в объекте obj. Это позволяет глубоко скопировать значение свойства, включая вложенные объекты или массивы, если они есть. } } return copy; } var original = { a: 1, b: { c: 2 } }; var copy = deepCopy(original);

Answer 62

В JavaScript нет прямого способа проверить, был ли объект создан с использованием класса или функции-конструктора. Но можно использовать некоторые признаки или проверки. 1. Проверка наличия прототипа: Вы можете проверить наличие свойства constructor.prototype у объекта. Если это свойство существует и указывает на определенный конструктор (класс), то это может указывать на то, что объект был создан с использованием этого конструктора. function Person(name) { this.name = name; } const person = new Person('John'); if (person.constructor.prototype === Person.prototype) { console.log('Объект создан с использованием Person'); } 2.Проверка instanceof: Метод instanceof позволяет проверить, является ли объект экземпляром определенного класса (или функции-конструктора). function Person(name) { this.name = name; } const person = new Person('John'); if (person instanceof Person) { console.log('Объект является экземпляром Person'); } 3.Проверка конструктора: Вы можете проверить свойство constructor объекта и убедиться, что оно соответствует ожидаемому конструктору. function Person(name) { this.name = name; } const person = new Person('John'); if (person.constructor === Person) { console.log('Объект создан с использованием Person'); }

Answer 63

Методы управления частотой выполнения функций, особенно в контексте обработки событий, например, событий прокрутки страницы или изменения размера окна браузера. Они предназначены для оптимизации производительности и управления интенсивностью вызовов функций. Троттлинг функции означает, что функция вызывается не более одного раза в указанный период времени (например, раз в 10 секунд). Другими словами ― троттлинг предотвращает запуск функции, если она уже запускалась недавно. Троттлинг также обеспечивает регулярность выполнение функции с заданной периодичностью. Throttling ограничивает частоту выполнения функции, обеспечивая, чтобы она не выполнялась слишком часто. Например, если у вас есть функция, которая реагирует на прокрутку страницы, Троттлинг может гарантировать, что эта функция будет вызываться не чаще определенного интервала времени. Дебаунс (Debouncing): Debouncing функции означает, что все вызовы будут игнорироваться до тех пор, пока они не прекратятся на определённый период времени. Только после этого функция будет вызвана. Например, если мы установим таймер на 2 секунды, а функция вызывается 10 раз с интервалом в одну секунду, то фактический вызов произойдёт ТОЛЬКО спустя 2 секунды ПОСЛЕ крайнего (десятого) обращения к функции. Пример: Автозаполнение. Предположим, вы вводите в строку поиска «Greenwich». API автозаполнения будет вызываться при изменении текста в строке поиска. Если бы не debouncing, вызов API выполнялся бы после каждой введённой буквы, даже если вы печатаете очень быстро. Проблема в том, что нет гарантии, что API запросы будут возвращены в том порядке, в котором они были отправлены. Например, запрос автозаполнения для «Gre» может вернуться после запроса для «Green». Поэтому имеет смысл «притормозить» поиск. Debouncing функции автозаполнения на одну секунду позволит ограничить запросы, пока пользователь не перестанет печатать. Можно провести такую аналогию: Предположим, вы работаете за компьютером и в то же время чатитесь с другом в мессенджере, который отправляет вам сообщение за сообщением. Вы получаете пуш уведомления каждую минуту. В обычном случае вы бы прочитывали эти сообщения сразу, но сейчас вы заняты и не можете так часто отвлекаться. Как можно поступить? 1. Игнорировать уведомления, и прочитывать принятые сообщения раз в пять минут. 2. Игнорировать уведомления. Если в течение последних пяти минут не поступало новых уведомлений, предположим, что друг закончил свою историю и тогда проверить принятые сообщения. Первый вариант можно сравнить с throttling, а второй с debouncing. https://medium.com/nuances-of-programming/%D1%87%D1%82%D0%BE-%D1%82%D0%B0%D0%BA%D0%BE%D0%B5-throttling-%D0%B8-debouncing-4f0a839769ef

Answer 64

"утилитарные типы" Pick, Partial, Omit, Required, Readonly(доступны только для чтения ), Exclude и Extract: Exclude и Extract позволяют извлекать или исключать типы из объединений типов. type Color = 'red' | 'green' | 'blue'; type PrimaryColor = 'red' | 'blue'; type NonPrimaryColor = Exclude; // 'green' - исключили // NonPrimaryColor теперь равен 'Red' | 'Blue' type PrimaryColors = Extract; // 'red' | 'blue' - извлекли // PrimaryColors теперь равен 'red' | 'blue'

Answer 65

Если есть несколько стилей, которые применяются к одному и тому же элементу, браузер будет учитывать их приоритеты и применять стиль с более высоким весом. Если два стиля имеют одинаковый вес, то последний определенный стиль переопределит предыдущий. От низшего к наивысшему: Тип селектора (например, div, p, h1) имеет самый низкий вес. Он применяется к элементам соответствующего типа. Селектор класса и селектор атрибута: Селекторы класса (например, .example) и селекторы атрибута (например, [data-attribute]) имеют средний вес. Они более специфичны, чем типовые селекторы, но менее специфичны, чем селекторы идентификаторов. Селектор идентификатора: Селектор идентификатора (например, #uniqueId) имеет более высокий вес по сравнению с селекторами классов и типами. Идентификаторы должны быть уникальными на странице, поэтому они имеют больший приоритет. Селектор псевдокласса и селектор псевдоэлемента: Селекторы псевдокласса (например, :hover, :focus) и селекторы псевдоэлемента (например, ::before, ::after) могут иметь разный вес в зависимости от их специфичности. !important: Свойства, помеченные ключевым словом !important, имеют высший приоритет и переопределяют все предыдущие стили, даже если они менее специфичны. Инлайн-стили: Инлайн-стили, определенные непосредственно в HTML элементе с использованием атрибута style, имеют наивысший приоритет и переопределяют все другие стили.

Answer 66

Что нового в последнем ECMAScript? Метод String.prototype.replaceAll(): Этот метод позволяет заменить все вхождения подстроки в строке на другую подстроку без необходимости использования регулярных выражений. Он делает замену глобальной и без учета регистра. const originalString = "Hello, world!"; const newString = originalString.replaceAll("l", "L"); console.log(newString); // "HeLLo, worLd!" Метод Promise.any(): Promise.any() позволяет выполнить несколько промисов и вернуть первый промис, который завершится успешно. Если все промисы завершатся с ошибкой, то будет возвращен объект AggregateError, содержащий информацию обо всех ошибках. Part of the ECMAScript 2023 standard: .toReversed(): Метод .toReversed() переворачивает массив, при этом не мутируя его, создавая новый массив. Старый метод .reverse() мутирует массив, не создает новый. .toSorted(): Метод .toSorted() сортирует элементы массива, при этом не мутируя его, создавая новый массив. Старый метод .sort() мутирует массив, не создает новый. .toSpliced(): Метод .toSpliced() удаляет необходимые элементы массива, при этом не мутируя его, создавая новый массив. Старый метод .splice() мутирует массив, не создает новый. const numbers = [1, 2, 3]; const splicedNumbers = numbers.toSpliced(1, 1); console.log(splicedNumbers); // Output[1, 3] Что нового привнес в JS стандарт ES6? Стрелочный функции, классы, шаблонные строки, деструктуризация, операторы ....rest/...spread, Symbol, Генераторы, Блочная область видимости. Промисы, модули, прокси, множества Set/Map. Расширенные объектные литералы. (оператор ....rest собирает оставшиеся элементы массива в другой массив или собирает оставшиеся свойства объекта в другой объект. Он всегда идёт последним и может использоваться только раз при одной операции «распаковки» массива или объекта. В React оператор rest используется для работы с пропсами в компонентах. Пример: function MyComponent({ title, description, ...rest }) { return (

{title}

{description}

); } )

Answer 67

Critical Rendering Path (CRP) - это концепция, связанная с процессом рендеринга веб-страницы в браузере. Когда вы вводите URL-адрес в адресной строке браузера и нажимаете клавишу Enter, происходит следующий процесс в контексте CRP: Навигация: Браузер начинает процесс навигации, запросив указанный URL-адрес. Это включает в себя отправку запроса к серверу, получение ответа и загрузку необходимых ресурсов, таких как HTML, CSS, JavaScript и изображения. Создание DOM (Document Object Model): По мере загрузки HTML-документа браузер начинает создавать DOM, представляющий структуру веб-страницы. DOM - это древовидное представление HTML-документа, которое браузер использует для построения веб-страницы. Построение CSSOM (CSS Object Model): В то время как браузер загружает CSS-файлы, он начинает построение CSSOM, представляющего стили страницы. CSSOM - это древовидное представление стилей, которое соответствует DOM. Формирование Render Tree: После того как DOM и CSSOM созданы, браузер комбинирует их, чтобы создать Render Tree. Render Tree - это древовидное представление страницы, которое содержит информацию о том, как каждый элемент будет отображаться на экране, включая их размеры, позицию и стили. Расчет Layout: Браузер производит расчет макета (layout), определяя размеры и позиции каждого элемента на странице в соответствии с Render Tree. Это определяет, как элементы будут располагаться относительно друг друга. Рендеринг Paint: Затем браузер начинает процесс рендеринга (painting), который включает в себя настоящую отрисовку пикселей на экране в соответствии с макетом и стилями. Это создает окончательное изображение веб-страницы. Отображение на экране: Наконец, изображение, созданное в результате рендеринга, отображается на экране пользователя, и веб-страница становится видимой.

Answer 68

создание анимации на JavaScript, через функцию requestAnimationFrame. По большому счету существует два способа, как сделать анимацию на JS: -через методы setTimeout, setInterval -через функцию requestAnimationFrame setTimeout, setInterval: Частота кадров на мониторе и частота перерисовки браузером контента может быть не постоянной, это зависит от нагрузки, сколько одновременно запущено программ на компьютере клиента. В таких случаях можно наблюдать, как какие-то кадры замирают. Происходит рассинхронизация: setTimeout принуждает перерисовывать кадры, не синхронно со сменой кадров у компьютера. Однако самая большая проблема состоит в том, что если открыто несколько вкладок браузера, и на одной из них есть анимация, то она все равно работает, активна эта вкладка или нет. В результате, все это ведет к избыточной нагрузке на компьютер. requestAnimationFrame: Функция requestAnimationFrame была создана для решения всех вышеперечисленных проблем. У нее достаточно высокая поддержка среди браузеров. Функция requestAnimationFrame позволяет нам запускать какие-то другие функции в качестве анимаций. Она берет вашу анимацию и подстраивает ее под частоту обновления вашего браузера. Делая так, что ваша анимация будет происходить в тот момент, когда обновляется страничка. Добиваясь плавности анимации и при этом не нагружая компьютер. А если на страничке прописано несколько анимаций, то запускаться они будут одновременно. https://frontender.info/request-animation-frame-for-better-performance/

Answer 69

ARIA — это стандарт разработки, который помогает делать сайты и приложения более доступными для людей с ограниченными возможностями. В вебе ARIA-атрибуты нужны для того, чтобы помочь скринридерам разобраться с контентом на сайте и озвучить его тем, кто плохо видит или не видит совсем. 1. role атрибут добавляет семантическую информацию к элементам, особенно к тем, которые не имеют явной семантики. Атрибут role часто используется для улучшения доступности веб-сайтов и веб-приложений для пользователей, в частности, для пользователей с ограниченными возможностями. Вот некоторые примеры использования атрибута role: --role="button": Если у вас есть элемент, который выглядит как кнопка, но не является элементом ---aria-disabled. Когда пользователь на странице нажимает клавишу Tab, он по очереди переключается между интерактивными элементами — кнопками, ссылками, пунктами меню, полями ввода и так далее. Но если кнопка сейчас недоступна для нажатия, скринридер её пропустит. Такое бывает, когда мы, например, не заполнили форму ввода — кнопка станет активной только после заполнения всех полей. Если мы добавим свойство aria-disabled такой кнопке, то скринридер её увидит и тоже сможет озвучить, добавив, что нажать на неё пока нельзя. Это нужно для того, чтобы пользователь понял — кнопка на странице есть, но пользоваться ей пока не получится. ---aria-required. Когда мы создаём, например, форму подписки, у нас есть обязательные поля — имя и адрес электронной почты. Мы привыкли, что обязательные поля помечаются звёздочкой, но при чтении иногда это бывает неочевидно. Если мы хотим сообщить скринридеру, что перед ним — обязательное поле, то к нему добавляется атрибут aria-required: Примеры всех aria-атрибутов: https://doka.guide/a11y/aria-attrs/

Answer 70

robots.txt, noindex, nofollow, и sitemap.xml являются инструментами, связанными с поисковой оптимизацией и управлением поведением поисковых систем на веб-сайте. Вот их основные цели и назначения: robots.txt: Цель: robots.txt - это текстовый файл, размещенный на сервере веб-сайта, который указывает поисковым роботам (краулерам), какие страницы и разделы сайта следует или не следует индексировать. Применение: С помощью robots.txt вы можете запретить поисковым системам индексацию конкретных частей сайта или отдельных файлов. Например, вы можете запретить индексацию страниц с личной информацией или тестовыми данными. noindex и nofollow: Цель: noindex и nofollow - это мета-теги , которые можно добавить на отдельные страницы HTML для указания поисковым системам, следует ли индексировать страницу (noindex) и следует ли следовать ссылкам с этой страницы (nofollow). Применение: Вы можете использовать noindex, чтобы исключить конкретные страницы из индекса поисковых систем. nofollow позволяет управлять тем, следует ли краулерам переходить по ссылкам на этой странице. Это может быть полезно, чтобы предотвратить индексацию или проходку "страниц-мостиков" или "страниц-ловушек". sitemap.xml: Цель: sitemap.xml - это XML-файл, который содержит информацию о структуре и содержании вашего веб-сайта. Он предоставляет поисковым системам дополнительные данные о страницах, которые можно индексировать. Применение: sitemap.xml используется для улучшения процесса индексации поисковыми системами. Он может включать в себя ссылки на страницы сайта, которые поисковые роботы могли бы упустить. Это помогает поисковым системам более эффективно сканировать и индексировать сайт.

Иван Иванов · Answer 71

Микроразметка (Microdata) - это формат разметки данных на веб-страницах с целью предоставления дополнительной информации поисковым системам о содержании страницы. Микроразметка позволяет структурировать данные на странице, указывая, какие элементы являются частью структуры сайта и какие имеют специфические свойства или значения. Это помогает поисковым системам лучше понимать контент страницы и отображать его более информативно в результатах поиска. Вот некоторые типы микроразметки: ---Микроразметка "Breadcrumbs" (хлебные крошки): Используется для указания структуры навигации на веб-сайте. Это позволяет поисковым системам понимать, какие страницы находятся внутри каких разделов сайта и как пользователи могут навигировать по сайту. ---Микроразметка "Article" (статья): Помогает определить, что на странице находится статья, и предоставляет информацию о заголовке, авторе, дате публикации и тексте статьи. Это помогает поисковым системам выделять статьи и отображать их более выразительно в результатах поиска. ---Микроразметка "FAQ" (часто задаваемые вопросы): Используется для структурирования данных в разделе с часто задаваемыми вопросами и ответами. Это позволяет поисковым системам понимать, что страница содержит FAQ и какие вопросы и ответы в ней представлены. ----Микроразметка "Product" (товар): Предоставляет информацию о продуктах, такую как название, цена, наличие, описание и многое другое. Это особенно полезно для интернет-магазинов, так как помогает поисковым системам выделить информацию о продуктах в результатах поиска. ---Микроразметка "Local Business" (местный бизнес): Используется для предоставления информации о местных компаниях, включая название, адрес, телефон, часы работы и другие данные. Это помогает улучшить видимость местного бизнеса в локальных результатах поиска. Микроразметка часто реализуется с использованием структурированного формата, такого как Schema.org, который определяет стандарты для разметки данных. Она может быть добавлена к HTML-коду страницы в виде специальных атрибутов и значений, которые соответствуют конкретным типам микроразметки. Важно правильно реализовывать микроразметку, чтобы она была понятной для поисковых систем и способствовала улучшению видимости вашего контента в результатах поиска. Пример микроразметки "Article": Пример статьи с микроразметкой

Заголовок статьи

Автор: Иван Иванов

Дата публикации: 2023-10-30

Содержание статьи...

В этом примере мы использовали микроразметку Schema.org для определения структуры статьи. Здесь itemscope обозначает, что это элемент с микроразметкой, и itemtype указывает на тип микроразметки (Article). Затем мы используем itemprop для свойств статьи. Например, headline указывает на заголовок статьи, author указывает на автора, datePublished указывает на дату публикации, и articleBody указывает на сам текст статьи.

Answer 72

null обозначает отсутствие значения. Это специальное значение, которое указывает, что переменная существует, но её значение пока не определено. Например, когда вы явно присваиваете переменной null, это означает, что она является пустой или неопределенной. undefined обозначает, что значение переменной не было присвоено или переменная была объявлена, но ей не было присвоено значение. Если переменная не была инициализирована, то её значение по умолчанию будет undefined. let a; // переменная a сейчас undefined, потому что ей не было присвоено значение let b = null; // переменная b имеет значение null Одна из основных различий между ними заключается в их типах данных: null является объектом, в то время как undefined является типом данных. console.log(typeof null); // "object" console.log(typeof undefined); // "undefined" Обычно null используется в ситуациях, когда значение должно быть явно пустым, в то время как undefined чаще всего означает неопределенное значение переменной.

Answer 73

1 способ. Есть у каждого объекта метод hasOwnProperty(), параметром передается свойство искомое, если оно есть вернется true 2 способ. Использовать оператор in , вернет true, если есть свойство. Отличие их в том, что оператор in проверяет наличие свойства не только в самом объекте, но и в его прототипах, а hasOwnProperty() только в объекте

Answer 74

false, null, NaN, undefined, '', 0, BigInt(0)

Answer 75

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

Answer 76

1. Callbacks: Функции передаются в качестве аргументов других функций и вызываются по завершении асинхронной операции. Пример: function fetchData(callback) { // Асинхронная операция setTimeout(() => { callback('Data received'); }, 1000); } function processData(data) { console.log(data); } fetchData(processData); 2. Промисы (Promises): Объекты, представляющие успешное или отклоненное выполнение асинхронной операции. 3. async/await: Синтаксический сахар над промисами, позволяющий писать асинхронный код в более линейном стиле.

Answer 77

Распространение событий (Event Propagation) в JavaScript описывает процесс, при котором браузер передает события от элемента, на котором они произошли, к его родительским или дочерним элементам в DOM. Три фазы распространения событий по порядку!: Фаза захвата (Capturing Phase): --Событие передается от самого верхнего элемента в DOM к элементу, на котором произошло событие. Фаза цели (Target Phase): --Событие достигает целевого элемента, на котором оно произошло. Целевое элемент - event.target. Фаза всплытия (Bubbling Phase): --Событие начинает "всплывать" от целевого элемента к самому верхнему элементу в DOM. События двигаются от корневого к целевому(event.target) и обратно. По умолчанию все события будут ловиться на фазе всплытия!!!, но по требованию событие можно отловить и на фазе погружения с помощью третьего параметра(useCapture ) в значении true метода addEventListener('...', ()=>{}, true). Каждый обработчик имеет доступ к свойствам события event: ---event.target – самый глубокий элемент, на котором произошло событие. ---event.currentTarget (=this) – элемент, на котором в данный момент сработал обработчик (тот, на котором «висит» конкретный обработчик) ---event.eventPhase – на какой фазе он сработал (погружение=1, фаза цели=2, всплытие=3). Отличия между event.target и event.currentTarget: ----event.target указывает на элемент, на котором произошло событие (тот элемент, который фактически вызвал событие). Например, при клике на дочерний элемент внутри родительского, event.target будет указывать на этот дочерний элемент. Это свойство показывает именно тот элемент, который вызвал событие. -----event.currentTarget указывает на элемент, на котором был установлен обработчик события (тот элемент, к которому был привязан обработчик события). Например, если у вас есть вложенные элементы с обработчиками событий на родительском элементе, event.currentTarget будет указывать на родительский элемент, к которому был привязан обработчик события, даже если событие произошло на его дочернем элементе. Метод stopPropagation() используется для прекращения дальнейшего распространения события. Если вызвать event.stopPropagation(), событие не будет передаваться дальше по DOM.

Answer 78

Делегирование события — подход, который подразумевает подписку на события родительского элемента вместо нескольких подписок на однотипные дочерние. На пример игры крестики-нолики, мы навешиваем событие на родителя, например, const playSpace = document.getElementById("playSpace"); playSpace.addEventListener("click", handlerClick); где в коллбеке происходит проверка на нужный id ячейки с помощью e.target, который написан у родителя. (e.target - будет то, на что мы кликнули) const handlerClick = (e) => { const cell = e.target; // делегируем событие - исключаем все клики не относящиеся к нашим ячейкам if (cell.getAttribute("name") !== "cell") return; const cellSymbol = stepPlayer(); cell.innerHTML = cellSymbol; };

Answer 79

event.preventDefault - отключает поведение элемента по умолчанию. Например, используем на элементе form, то он предотвратит отправку формы submit. event.stopPropagation - отменяет распостранение события - всплытие или погружение Чтобы узнать можно использовать свойство event.defaultPrevented, которое возвратит логическое значение, служащее индекатором применения к элементу метода event.preventDefault().

Answer 80

----Чаще всего используются в качестве коллбэков. Передача функции в качестве аргумента в другие функции, такие как setTimeout, addEventListener, map, filter, reduce и другие. ----Коллбэки событий: Например, когда вы назначаете обработчики событий. ----Асинхронные операции: При использовании промисов, для обработки .then или .catch. somePromise.then(function(result) { console.log('Результат:', result); }).catch(function(error) { console.error('Ошибка:', error); }); ----Краткосрочные функции: Если функция используется в узком контексте и не планируется повторное использование, можно использовать анонимные функции. ----Контексты this: При необходимости зафиксировать контекст this, так как анонимные функции не создают собственный контекст this. const myObject = { value: 42, printValue: function() { setTimeout(() => { console.log(this.value); // this ссылается на myObject }, 1000); } };

Answer 81

Директива "use strict" в JavaScript позволяет использовать строгий режим. Это специальный режим, который обеспечивает более строгую и безопасную интерпретацию JavaScript кода. 1. Избегание использования неявных глобальных переменных: Без "use strict" неявные объявления переменных (не используя var, let или const) создают глобальные переменные. В строгом режиме это запрещено. 2. Запрет на удаление свойств объектов: В строгом режиме оператор delete не может удалять свойства объектов. 3. Запрет на дублирование параметров функции: Нельзя дублировать параметры функции. 4. this в функциях: В строгом режиме this в глобальной области видимости равен undefined. 5. Сокрытие eval и arguments в локальной области видимости: Переменные с именами eval и arguments не могут быть переопределены.

Answer 82

Функциональное программирование (FP) - это парадигма программирования, в которой программы строятся с использованием функций как основных элементов. Основные концепции функционального программирования включают: -- функции первого класса (их возможность передавать в качестве аргументов и возвращать из других функций), ---чистые функции (без побочных эффектов) ---функциональную иммутабельность (непеременные структуры данных и предпочтение операциям без изменения исходных данных). JavaScript, хотя и не является чистым функциональным языком программирования, обладает рядом функциональных особенностей: 1.Функции первого класса: Функции в JavaScript могут быть переданы в качестве аргументов другим функциям, возвращены из функций или присвоены переменным. Это делает функции "первого класса", что является основой для функционального стиля программирования. 2.Замыкания (Closures): Возможность функции использовать переменные из окружающего контекста создает замыкания, что делает их мощным инструментом для функционального программирования. 3.Функции высшего порядка: Возможность передавать функции в качестве аргументов и возвращать их из других функций позволяет создавать функции высшего порядка. 4.Методы массивов: JavaScript предоставляет ряд методов для работы с массивами, таких как map, filter, reduce, которые позволяют использовать функциональный подход к обработке данных. 5.Иммутабельность и неизменяемость данных: В JavaScript есть объекты и структуры данных, которые можно рассматривать как неизменяемые (например, const, Object.freeze). Это способствует функциональному стилю программирования, минимизируя побочные эффекты.

Answer 83

Термин "объекты первого класса" (First-class Objects) означает, что функции в языке программирования рассматриваются так же, как и любые другие объекты (или значения) и могут быть переданы в качестве аргументов другим функциям, возвращены из функций, присвоены переменным, сохранены в структурах данных и т. д. Когда функции считаются объектами первого класса, это означает, что они обладают следующими свойствами: Могут быть присвоены переменным: Функцию можно сохранить в переменной. Могут быть переданы в качестве аргументов: Функции могут быть переданы в другие функции в качестве аргументов. Могут быть возвращены из других функций: Функции могут возвращать другие функции. Могут быть сохранены в структурах данных: Функции могут быть частью объектов, массивов или других структур данных.

Answer 84

Это можно сделать с помощью Object.create() const obj = Object.create(null) т.е. в качестве первого параметра передается методу этому объект-прототип В JavaScript null - это примитивное значение, и у него нет своего собственного прототипа. Прототипы существуют для объектов и используются для поиска свойств и методов, когда на объекте вызываются операции чтения или записи. Так как null является примитивом, у него нет своего прототипа, и он не имеет методов, поскольку он не является объектом. Например, у null не будет методов, которые присутствуют у объектов, таких как toString() или valueOf(). Когда мы обращаемся к свойствам null, то такое обращение будет приводить к ошибке, поскольку null не имеет прототипа, который мог бы предоставить эти свойства или методы.

Answer 85

Используется в функциях-конструкторах для создания нового экземпляра класса. Делает 4 вещи: --Создает пустой объект. --Привязывает к нему значение this --Функция наследует от function.prototype --Возвращает значение this

Answer 86

Модули в программировании представляют собой логически независимые компоненты кода, которые содержат в себе переменные, функции и другие ресурсы, а также предоставляют интерфейсы для взаимодействия с другими частями программы. В контексте веб-разработки модули позволяют разбивать код на отдельные файлы (например, JavaScript файлы) и использовать их в других частях приложения. Это позволяет управлять сложными приложениями, разделять функциональность, облегчать совместную работу и избегать конфликтов имен. В JavaScript модули могут быть созданы с использованием ES6 (с использованием ключевых слов import и export). ES6 модули стали стандартом в современном JavaScript и позволяют импортировать и экспортировать функции, переменные, классы и другие объекты между файлами.

Answer 87

Примитивы строка число и булеан имеют свойства и методы , несмотря на то, что они не являются объектами. Когда вызываем методы для этих примитивов, они преобразуются в объект. У каждого примитива, кроме null/undefined, есть объект-обертка. Такими объектами являются String Number Boolean Symbol.

Answer 88

Неявное - способ приведения значения к другому типу без нашего ведома, например, складываем строку с числом Явное - сами участвуем к преобразованию.

Answer 89

typeof null возвращает 'object', это историческая ошибка в JavaScript, которая сохраняется изначально для обратной совместимости. null - это примитив, но typeof null возвращает 'object'. Чтобы проверить, является ли значение null, можно использовать строгое сравнение (===)

Answer 90

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 – возвращает текущее количество элементов. Пример: let map = new Map(); map.set("1", "str1"); // строка в качестве ключа map.set(1, "num1"); // цифра как ключ map.set(true, "bool1"); // булево значение как ключ // помните, обычный объект Object приводит ключи к строкам? // Map сохраняет тип ключей, так что в этом случае сохранится 2 разных значения: alert(map.get(1)); // "num1" alert(map.get("1")); // "str1" alert(map.size); // 3 Map может использовать объекты в качестве ключей. let john = { name: "John" }; // давайте сохраним количество посещений для каждого пользователя let visitsCountMap = new Map(); // объект john - это ключ для значения в объекте Map visitsCountMap.set(john, 123); alert(visitsCountMap.get(john)); // 123 NaN также может использоваться в качестве ключа. Для перебора коллекции Map есть 3 метода: map.keys() – возвращает итерируемый объект по ключам, map.values() – возвращает итерируемый объект по значениям, map.entries() – возвращает итерируемый объект по парам вида [ключ, значение], этот вариант используется по умолчанию в for..of. // перебор по значениям (числа) for (let amount of recipeMap.values()) { alert(amount); // 500, 350, 50 } Кроме этого, Map имеет встроенный метод forEach: // выполняем функцию для каждой пары (ключ, значение) recipeMap.forEach((value, key, map) => { alert(`${key}: ${value}`); // огурец: 500 и так далее }); Если у нас уже есть обычный объект, и мы хотели бы создать Map из него, то поможет встроенный метод Object.entries(obj), который получает объект и возвращает массив пар ключ-значение для него, как раз в этом формате. let obj = { name: "John", age: 30 }; let map = new Map(Object.entries(obj)); alert( map.get('name') ); // John Здесь Object.entries возвращает массив пар ключ-значение: [ ["name","John"], ["age", 30] ]. Это именно то, что нужно для создания Map. Есть метод Object.fromEntries, который делает противоположное: получив массив пар вида [ключ, значение], он создаёт из них объект: let prices = Object.fromEntries([ ['banana', 1], ['orange', 2], ['meat', 4] ]); // prices = { banana: 1, orange: 2, meat: 4 } alert(prices.orange); // 2 Объект 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 – возвращает количество элементов в множестве. Основная «изюминка» – это то, что при повторных вызовах set.add() с одним и тем же значением ничего не происходит, за счёт этого как раз и получается, что каждое значение появляется один раз. Например, мы ожидаем посетителей, и нам необходимо составить их список. Но повторные визиты не должны приводить к дубликатам. Каждый посетитель должен появиться в списке только один раз. let set = new Set(); let john = { name: "John" }; let pete = { name: "Pete" }; let mary = { name: "Mary" }; // считаем гостей, некоторые приходят несколько раз set.add(john); set.add(pete); set.add(mary); set.add(john); set.add(mary); // set хранит только 3 уникальных значения alert(set.size); // 3 for (let user of set) { alert(user.name); // John (потом Pete и Mary) } Тоже самое мы могли бы сделать и с помощью массива + arr.find, но в этом случае бы пробегались бы по всем элементам массива, что значительно хуже по производительности, чем с Set. Множество Set лучше оптимизировано для добавлений, оно автоматически проверяет на уникальность. Set имеет те же встроенные методы, что и Map: set.keys() – возвращает перебираемый объект для значений, set.values() – то же самое, что и set.keys(), присутствует для обратной совместимости с Map, set.entries() – возвращает перебираемый объект для пар вида [значение, значение], присутствует для обратной совместимости с Map. Мы можем перебрать содержимое объекта set как с помощью метода for..of, так и используя forEach: let set = new Set(["апельсин", "яблоко", "банан"]); for (let value of set) alert(value); // то же самое с forEach: set.forEach((value, valueAgain, set) => { alert(value); }); Перебор Map и Set всегда осуществляется в порядке добавления элементов, так что нельзя сказать, что это – неупорядоченные коллекции, но поменять порядок элементов или получить элемент напрямую по его номеру нельзя.

Answer 91

https://doka.guide/tools/how-the-browser-creates-pages/ Чтобы нарисовать на экране результат работы нашего кода, браузеру нужно выполнить несколько этапов: 1. Сперва ему нужно скачать исходники. 2. Затем их нужно прочитать и распарсить. 3. После этого браузер приступает к рендерингу — отрисовке. Рассмотрим подробнее эти этапы: 1. Получение ресурсов, Fetching. Ресурсы браузер получает с помощью запросов к серверу. В ответ он может получить как, например, данные в виде JSON, так и картинки, видео, файлы стилей и скриптов. Самый первый запрос к серверу — обычно запрос на получение HTML-страницы (чаще всего index.html). В её коде содержатся ссылки на другие ресурсы, которые браузер тоже запросит у сервера, например, файл стилей style.css; изображение hello.jpg; и скрипт index.js. 2. Парсинг, Parsing. Он состоит из 3х этапов: ---формирование DOM ---формирование CSSOM ---Render Tree - объединение дом и стилей По мере того как скачивается HTML-страница, браузер пытается её «прочитать» — распарсить. Браузер работает не с текстом разметки, а с абстракциями над ним. Одна из таких абстракций, результат парсинга HTML-кода, называется DOM. Пока браузер парсит документ и строит DOM, он натыкается на элементы типа , ,