100pr вопросы Flashcards
Event loop (цикл событий). Микрозадачи и макрозадачи
ЦИКЛ СОБЫТИЙ
Цикл событий предоставляется средой выполнения. например браузер или node js. Представляет собой две очереди из микро и макро задач.
Как выполняется код в js.
Синхронные события попадают в call stack. Асинхронные События распределяются по очередям (fifo) microtask и macrotask.
По выполнению сначало выполняется весь синхронный код, затем выполняются все микротаски, Затем выполняется одна макротаска И все заново.
Выполняется весь синхронный код…
Микрозадачи - промисы, функции добавленные с помощью queueMicrotask(func)
MutationObserver
Макрозадачи - setTimeoutsetInterval
Запросы к серверу через XMLHttpRequest или fetch
(((((((
синхронный код у нас попадает в callstack (lifo с помощью которой можно отслеживать порядок вызова функций). Выполняется и убирается из callstack
JS- однопоточный язык. В текущий момент времени может выполняться только одна задача. Но возникает необходимость выполнять код асинхронно (допустим для выполнения трудоемкой функции) ДЛя этого и появляется event loop.
Event loop это бесконечный цикл который выполняет задачи, ожидается задачи если все задачи выполнены, как только они появились опять их выполняет.
Есть основной поток выполнения.
После основного потока выполняются микрозадачи.
После микрозадач выполняются макрозадачи
))))))
В event loop может быть переполнения стека вызова.
Цикл событий предоставляется средой выполнения. например браузер или node js
Если call stack предоставляет js, а event loop предоставляет среда выполнения, как они общаются между собой? У каждого браузера есть Web api, которое предоставляет setTimeout, отправку фетч запросов, это все не спецификации js, это все функции браузера.
Копирование объектов и ссылки. Поверхностное и глубокое копирование
Одно из фундаментальных отличий объектов от примитивов заключается в том, что объекты хранятся и копируются «по ссылке», тогда как примитивные значения: строки, числа, логические значения и т.д. – всегда копируются «как целое значение».
Переменная, которой присвоен объект, хранит не сам объект, а его «адрес в памяти» – другими словами, «ссылку» на него.
Глубокое клонирование:
structuredClone(obj)
lodash.cloneDeep(obj)
JSON.parse(JSON.stringify(obj))
(копирует не все данные, date and function, symbol превратятся в undefined)
Поверхностное клонирование:
Оператор Spread
Object.assign({},{})
Object.create({})
Метод structuredClone может выполнять следующие задачи:
Клонировать бесконечно вложенные объекты и массивы;
Клонировать циклические ссылки;
Клонировать различные типы JS, такие, как Date, Error, RegExp, ArrayBuffer, Blob, File, ImageData
Что такое замыкание (Closures)?
По сути, замыкание — это способность функции во время создания запоминать ссылки на переменные , находящиеся в текущей области видимости.
Что такое поднятие (Hoisting)?
Поднятие — это термин, описывающий подъем переменной или функции в глобальную или функциональную области видимости.
Var и function всплывают в самый верх функциональной области видимости.
Что такое область видимости (Scope)?
Область видимости — это место, где (или откуда) мы имеем доступ к переменным или функциям.
JS имеем три типа областей видимости: глобальная, функциональная и блочная (ES6).
Если переменной не существует в текущей области видимости, ее поиск производится выше, во внешней по отношению к текущей области видимости.
Если и во внешней области видимости переменная отсутствует, ее поиск продолжается вплоть до глобальной области видимости.
Если в глобальной области видимости переменная обнаружена, поиск прекращается, если нет — выбрасывается исключение.
Поиск осуществляется по ближайшим к текущей областям видимости и останавливается с нахождением переменной.
(((((((
Блочная -например if for
Функциональная - в теле функции
Глобальная - можно обратиться из любого место в коде к переменной
При создании области видимости она запоминает ссылку на внешнюю область видимости. Таким образом получаются цепочки области видимости. Мы из одной области видимости можем обращаться за переменными из другой области видимости
)))))))))
В чем разница между обычной функцией и функциональным выражением
Function extentioin поднимается в отличие от Functioin declaration.
(((((((((((
Вызов notHoistedFunc приведет к ошибке, а вызов hoistedFunc нет, потому что hoistedFunc «всплывает», поднимается в глобальную область видимости, а notHoistedFunc нет.
hoistedFunc()
notHoistedFunc()
function hoistedFunc(){
console.log(‘I am hoisted’)
}
var notHoistedFunc = function(){
console.log(‘I will not be hoisted!’)
}
))))))))))))
Что такое запоминание или мемоизация (Memoization)?
useCallback и useMemo, их отличия
Мемоизация — это прием создания функции, способной запоминать ранее вычисленные результаты или значения.
Преимущество мемоизации заключается в том, что мы избегаем повторного выполнения функции с одинаковыми аргументами.
Недостатком является то, что мы вынуждены выделять дополнительную память для сохранения результатов.
Стрелочные функции. Отличия от других функции
- У стрелочных функций нет «this»
- Стрелочные функции не имеют «arguments»
- Стрелочные функции не допускают дублирования имен аргументов
Стeк (LIFO) и Очередь (FIFO)
Стек — это структура данных, которая работает по принципу LIFO (Last In, First Out), что означает «последним пришёл — первым вышел». К примеру, вы моете посуду и ставите тарелки друг на друга. Если захотите вытереть их, то первой возьмёте последнюю помытую тарелку. Это и есть принцип работы стека.
Очередь — это структура данных, которая работает по принципу FIFO (First In, First Out), что означает «первым пришёл — первым обслужен». Её можно сравнить с очередью за вкусными пироженками: первый человек, который пришёл, будет первым, кто получит пирожное.
Что такое промис
Промис (Promise) — специальный объект JavaScript, который используется для написания и обработки асинхронного кода.
Асинхронные функции возвращают объект Promise в качестве значения. Внутри промиса хранится результат вычисления, которое может быть уже выполнено или выполнится в будущем.
Промис может находиться в одном из трёх состояний:
pending — стартовое состояние, операция стартовала;
fulfilled — получен результат;
rejected — ошибка.
После создания, промис находится в состоянии ожидания pending. Когда асинхронная операция завершается, функция переводит промис в состояние успеха fulfilled или ошибки rejected.
С помощью методов then(), catch() и finally() мы можем реагировать на изменение состояния промиса и использовать результат его выполнения.
Async/await
Существует специальный синтаксис для работы с промисами, который называется «async/await»
async перед функцией гарантирует, что эта функция в любом случае вернёт промис.
Ключевое слово await заставит интерпретатор JavaScript ждать до тех пор, пока промис справа от await не выполнится. После чего оно вернёт его результат, и выполнение кода продолжится.
Когда промис завершается успешно, await promise возвращает результат. Когда завершается с ошибкой – будет выброшено исключение. Как если бы на этом месте находилось выражение throw.
Селекторы CSS
В CSS-селекторы используются для стилизации HTML элементов на веб-странице.
Разные типы селекторов имеют разный приоритет.
Селектор по тегу: 1
Селектор по классу (html атрибуты): 10
Селектор по ID: 100
Inline-стиль: 1000
!important - служит для того чтобы применить этот стиль игнорируя приоритеты
Псевдоклассы, псевдоелементы
Псевдоэдементы - в основном
::before
::after
::placeholder
Псевдоэдементы - можно использовать для добавления стилей или какого-либо контента
Псевдоклассы -
:hover
:first-child
:last-child
Псевдоклассы - это селектор, который выбирает элементы, находящиеся в специфическом состоянии.
Методы жизненного цикла компонента?
Методы жизненного цикла – это способ подключения к различным этапам жизненного цикла компонента, позволяющий выполнять определенный код в определенное время. Вот список основных методов:
constructor – первый метод, вызываемый при создании компонента. Он используется для инициализации состояния. В функциональных компонентах для аналогичных целей используется хук useState.
render – отвечает за рендеринг JSX-разметки и возвращает содержимое, которое будет выведено на экран.
componentDidMount – вызывается сразу после рендеринга компонента в DOM. Обычно используется для задач инициализации, таких как вызов API или настройка слушателей событий.
componentDidUpdate – вызывается при изменении реквизитов или состояния компонента. Позволяет выполнять побочные эффекты, обновлять компонент на основе изменений или запускать дополнительные вызовы API.
componentWillUnmount – вызывается непосредственно перед удалением компонента из DOM. Используется для очистки ресурсов, которые были установлены в
componentDidMount, например, для удаления слушателей событий или отмены таймеров.
Что такое React.memo()
React.memo() – это компонент высшего порядка, который используется для оптимизации производительности веб-приложений. Если компонент, который вы хотите оптимизировать, всегда отображает один и тот же результат с неизменными реквизитами (props), вы можете обернуть его вызов в React.memo, чтобы запомнить его результат. Таким образом, React может использовать последний отрендеренный результат этого компонента вместо того, чтобы снова его рендерить, если входные данные не изменились. Это помогает оптимизировать производительность, так как повторный рендеринг может быть затратным по ресурсам. Важно отметить, что React.memo влияет только на изменение входных данных (реквизитов): если функциональный компонент, обернутый в React.memo, использует useState, useReducer или useContext для изменения своего состояния или контекста, он все равно будет перерисован при изменении этих состояний или контекстов.
