Frontend | Вопросы собесов

Хочешь освоить или улучшить свои навыки JavaScript? Отличные новости — тебе теперь есть где тренироваться! В канале @codewars_js публикуют задачи разной сложности по JavaScript Подписывайся и развивайся, всего за 5-10 минут в день!

Хочешь освоить или улучшить свои навыки JavaScript? Отличные новости — тебе теперь есть где тренироваться! В канале @codewars_js публикуют задачи разной сложности по JavaScript Подписывайся и развивайся, всего за 5-10 минут в день!

Что такое контекст в функции ? Спросят с вероятностью 13% Контекст в функции определяет, как ссылка this будет доступна внутри этой функции. Он относится к объекту, в контексте которого выполняется текущий код, и может изменяться в зависимости от того, как и где вызывается функция. Как работает this в разных ситуациях: 1️⃣ В глобальном контексте: Вне любой функции он ссылается на глобальный объект. В браузере это будет window, а в Node.js — global. 2️⃣ Внутри функции: - При обычном вызове функции он также ссылается на глобальный объект (в строгом режиме this будет undefined, что предотвращает случайное изменение глобального объекта). - В методе объекта он ссылается на объект, для которого вызывается метод. 3️⃣ При использовании конструктора (с new): Будет ссылаться на вновь созданный объект. 4️⃣ При использовании call(), apply(), bind(): Эти методы позволяют явно задать контекст для этой в функции. Примеры: Глобальный контекст

console.log(this === window); // true в браузере

Функция внутри объекта

const person = {
  name: 'Иван',
  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // Вывод: Иван

В этом примере this внутри sayName ссылается на объект person. Изменение контекста с bind()

const person = {
  name: 'Иван',
};

function sayName() {
  console.log(this.name);
}

const sayNameForPerson = sayName.bind(person);
sayNameForPerson(); // Вывод: Иван

Здесь мы явно задаем контекст для this с помощью bind(), чтобы функция sayName могла ссылаться на person. Понимание его важно для эффективной работы с функциями и методами объектов, особенно когда требуется управление контекстом this. Оно позволяет более гибко использовать функции и методы в разных объектах, а также контролировать поведение программы более предсказуемым образом. Контекст функции определяет, к чему относится this внутри этой функции. Он может изменяться в зависимости от того, как и где вызывается функция, что позволяет более гибко управлять поведением программы. Для явного указания контекста используются методы call(), apply(), и bind(). ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Ребят, наткнулся на телеграм канал по фронтенду. Там обнаружил много полезного контента, например, нашëл эти шпаргалки Держите ссылку @FrontendPortal

❓ Какие есть пример микрозадач ? Спросят с вероятностью 7% Микрозадачи — это задачи, которые планируются для выполнения после завершения текущего выполнения скрипта, но до того, как браузер продолжит другие задачи, такие как рендеринг или обработка событий. Они имеют более высокий приоритет по сравнению с макрозадачами и выполняются немедленно после текущего стека вызовов, но перед любыми другими событиями или рендерингом. Примеры включают обработку промисов и выполнение функций, отложенных с помощью queueMicrotask. С промисами Используют механизм таких задач для своих колбэков then, catch, и finally. Когда промис переходит в состояние выполнено (fulfilled) или отклонено (rejected), соответствующие колбэки планируются как микрозадачи. Это означает, что они будут выполнены сразу после текущего стека вызовов, но до того, как движок возьмется за выполнение следующей макрозадачи, например, обработку событий или таймеров.

console.log('Начало');

Promise.resolve().then(() => {
    console.log('Обработан промис');
});

console.log('Конец');

Вывод будет следующим:

Начало
Конец
Обработан промис

Сначала выполняется синхронный код (Начало и Конец), и только после его завершения, но до того как браузер перейдет к другим задачам, выполняются микрозадачи, связанные с промисами (Обработан промис). С queueMicrotask Эта функция позволяет явно добавить микрозадачу в очередь микрозадач. Это может быть полезно для разделения вычислений на более мелкие асинхронные операции, не блокируя поток выполнения и интерфейс.

console.log('Перед queueMicrotask');

queueMicrotask(() => {
    console.log('Выполнено в микрозадаче');
});

console.log('После queueMicrotask');

Вывод будет аналогичным:

Перед queueMicrotask
После queueMicrotask
Выполнено в микрозадаче

Сначала выполняется основной поток кода, затем микрозадача, добавленная через queueMicrotask. Микрозадачи обеспечивают способ эффективного управления асинхронными операциями, позволяя избежать блокирования потока выполнения и улучшить отзывчивость приложений. ➡ Примеры ответов ➡ Список всех вопросов на Frontend Developer

‼Всем кодерам посвящается‼ Code Ready — твоя готовая библиотека кода: JS шпаргалки, разработка веб-приложений. Лучшие подборки эффектов, анимаций, и многое другое для твоих проектов, сразу с готовым кодом и примером их использования. 🌐 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready

❓ Что происходит во фронтенде ? Спросят с вероятностью 3% Во фронтенде происходит взаимодействие пользователя с веб-сайтом или веб-приложением через веб-браузер. Фронтенд-разработка включает в себя создание пользовательского интерфейса и пользовательского опыта (UI/UX), а также реализацию логики взаимодействия на клиентской стороне. Вот основные аспекты того, что происходит во фронтенде: 1️⃣ Рендеринг страницы Когда пользователь заходит на веб-сайт, его браузер запрашивает HTML, CSS и JavaScript файлы с сервера. Браузер анализирует эти файлы и отображает страницу в соответствии с их указаниями. Этот процесс включает в себя: - Построение DOM-дерева: Браузер строит DOM (Document Object Model) дерево из HTML-кода. - Построение CSSOM-дерева: Аналогично, браузер строит CSSOM (CSS Object Model) дерево из CSS-кода. - Рендеринг: С использованием DOM и CSSOM деревьев браузер рендерит страницу. 2️⃣ Интерактивность Используется для добавления интерактивности на веб-страницу. Это может включать в себя: - Обработку событий, таких как клики мыши и нажатия клавиш. - Изменение DOM в ответ на действия пользователя. - Асинхронные запросы к серверу с помощью AJAX или Fetch API для динамического обновления контента без перезагрузки страницы. 3️⃣ Адаптивный дизайн Используют адаптивный дизайн для обеспечения корректного отображения и удобства использования веб-сайтов на различных устройствах, включая мобильные телефоны, планшеты и настольные компьютеры. Это достигается за счет медиа-запросов, которые позволяют применять разные стили в зависимости от размера экрана и других факторов. 4️⃣ Оптимизация производительности Является важной частью фронтенд-разработки. Это включает в себя: - Минификацию и объединение файлов CSS и JavaScript. - Оптимизацию изображений. - Ленивую загрузку медиа-контента. - Использование кэширования и сервис-воркеров. 5️⃣ Обеспечение безопасности Также участвуют в обеспечении безопасности веб-приложений, реализуя меры защиты от XSS (межсайтового скриптинга), CSRF (межсайтовой подделки запроса) атак и других угроз. 6️⃣ Использование фреймворков и библиотек Для упрощения и ускорения разработки часто используются фреймворки и библиотеки, такие как React, Angular, Vue.js, Svelte и другие. Они предоставляют готовые компоненты и утилиты для разработки интерфейса и логики веб-приложений. Фронтенд-разработка постоянно развивается, появляются новые инструменты, технологии и подходы, что делает её динамичной и интересной областью в мире веб-разработки. ➡ Примеры ответов ➡ Список всех вопросов на Frontend Developer

❓ В чём разница между let и const ? Спросят с вероятностью 13% let и const являются двумя ключевыми словами, используемыми для объявления переменных, но с важными различиями в их использовании и поведении. Основные различия: 1️⃣ Область видимости: И let, и const имеют блочную область видимости, что означает, что переменная, объявленная внутри блока {}, будет доступна только внутри этого блока. Это отличает их от var, который имеет функциональную область видимости. 2️⃣ Переназначение: Переменные, объявленные с помощью let, могут быть переназначены, т.е. им можно присвоить новое значение после их объявления. В отличие от этого, переменные, объявленные с помощью const, должны быть инициализированы при объявлении, и их значение не может быть изменено позже, то есть они константы. Пример использования let:

let a = 10;
console.log(a); // Вывод: 10
a = 20;
console.log(a); // Вывод: 20

В этом примере переменная a, объявленная с помощью let, сначала инициализируется значением 10, а затем ей присваивается новое значение 20. Пример использования const:

const b = 10;
console.log(b); // Вывод: 10
// b = 20; // Это вызовет ошибку, потому что b объявлена с помощью const и не может быть переназначена.

В этом примере переменная b, объявленная с помощью const, инициализируется значением 10, и попытка изменить это значение приведет к ошибке. Почему это важно? Использование let и const вместо var предоставляет более строгий и понятный контроль над областями видимости переменных, что уменьшает вероятность ошибок из-за непреднамеренного доступа или изменения данных. const особенно полезен для объявления значений, которые не должны изменяться после инициализации, что делает код более безопасным и предсказуемым. let позволяет объявлять переменные, которые могут быть переназначены, а const используется для объявления констант, значения которых не могут быть изменены после инициализации. Оба они имеют блочную область видимости и предлагают более строгий контроль над переменными по сравнению с var. Другими словами, используйте let для переменных, значение которых может измениться, и const для переменных, значение которых останется неизменным. ➡ Примеры ответов ➡ Список всех вопросов на Frontend Developer

❓ Что такое virtual dom ? Спросят с вероятностью 27% Virtual DOM (виртуальный Document Object Model) - это концепция, широко используемая в разработке интерфейсов, особенно в библиотеке React от Facebook, а также в других современных фронтенд-фреймворках. DOM - это структура данных, используемая браузерами для представления веб-страниц. Она позволяет программам изменять структуру, стиль и содержание веб-страницы, взаимодействуя с HTML и CSS. Проблема обычного DOM заключается в том, что он может быть довольно медленным при частых обновлениях, поскольку изменения в нем приводят к перерисовке элементов страницы, что может быть ресурсоёмким процессом. Эта концепция призвана решить данную проблему. Вместо того чтобы напрямую взаимодействовать с реальным DOM при каждом изменении, изменения сначала применяются к виртуальному, который является лёгкой копией реального DOM. После этого, с помощью процесса, называемого согласованием (reconciliation), виртуальный DOM сравнивается с предыдущей его версией, чтобы определить, какие именно изменения необходимо внести в реальный. Это позволяет минимизировать количество операций с реальным DOM, что значительно увеличивает производительность приложения. Пример без Virtual DOM:

const element = document.getElementById('myElement');
element.textContent = 'Новый текст';

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

Пример с использованием Virtual DOM (пример на React):

class MyComponent extends React.Component {
  render() {
    return <div>Новый текст</div>;
  }
}
```

В этом случае, при изменении состояния компонента, React сначала применяет изменения к виртуальному DOM, а затем, используя согласование, оптимально обновляет реальный. Виртуальный Document Object Model позволяет писать код, как если бы можно было менять любую часть веб-страницы в любой момент, не беспокоясь о производительности. Это делает разработку интерфейсов более интуитивно понятной и эффективной. Virtual DOM - это технология для оптимизации обновлений веб-интерфейсов, позволяющая ускорить и упростить разработку сложных пользовательских интерфейсов, минимизируя взаимодействие с медленным реальным DOM. ➡ Примеры ответов ➡ Список всех вопросов на Frontend Developer

❓ Какие типы данных существуют ? Спросят с вероятностью 27% Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты. Примитивные типы: - Number: представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14. - String: представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!". - Boolean: имеет два значения, true и false, и используется для работы с логическими операциями. - Undefined: переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения. - Null: специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript. - Symbol: уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах. - BigInt: тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number. Объекты: - Object: могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов. Специальные типы: - Массивы: используются для хранения упорядоченных коллекций данных. - Функции: объекты первого класса, поддерживающие вызов. - Дата: для работы с датами и временем. - Регулярные выражения: для работы с регулярными выражениями. Важно понимать разницу между примитивными типами и объектами, поскольку это влияет на способ работы с переменными и передачу данных в функции. ➡ Примеры ответов ➡ Список всех вопросов на Frontend Developer

❓ Что такое promise и какие состояния у него есть ? Спросят с вероятностью 47% Promise (обещание) — это объект, представляющий завершение (или неудачу) асинхронной операции и её результат. Он позволяет ассоциировать обработчики с асинхронным действием, тем самым избавляя от необходимости использовать обратные вызовы (callback-функции). Они упрощают работу с асинхронными операциями, такими как AJAX-запросы или чтение файлов, позволяя написать код, который проще понять и поддерживать. Состояния: 1️⃣ Pending (Ожидание): Начальное состояние; асинхронная операция не завершена. 2️⃣ Fulfilled (Исполнено): Операция завершена успешно, и promise возвращает результат. 3️⃣ Rejected (Отклонено): Операция завершена с ошибкой, и promise возвращает причину отказа. Пример:

let обещание = new Promise(function(resolve, reject) {
    // Эмуляция асинхронной операции, например, запроса к серверу
    setTimeout(() => {
        // Условие успешного выполнения операции
        if (/* условие успеха */) {
            resolve("данные получены");
        } else {
            reject("ошибка при получении данных");
        }
    }, 1000);
});

обещание.then(
    function(результат) { console.log(результат); }, // обработчик успеха
    function(ошибка) { console.log(ошибка); } // обработчик ошибки
);

Promise поддерживает цепочки вызовов (then), что позволяет организовывать асинхронный код последовательно и читабельно. Кроме того, существуют вспомогательные методы, такие как Promise.all, Promise.race, Promise.resolve, и Promise.reject, которые облегчают работу с группами асинхронных операций. Promise — это способ организации асинхронного кода, который предоставляет более удобный и понятный интерфейс для работы с асинхронными операциями, чем традиционные callback-функции. У каждого обещания есть три состояния: ожидание, исполнено и отклонено, которые помогают управлять результатом асинхронных операций. ➡ Примеры ответов ➡ Список всех вопросов на Frontend Developer

❓Что такое замыкание ? Спросят с вероятностью 47% Замыкание — это функция, которая запоминает своё лексическое окружение даже после того, как она выполняется вне своей области видимости. Другими словами, функция, объявленная в определённой области видимости, сохраняет доступ к переменным этой области, даже когда она вызывается за пределами своего первоначального контекста. Это важно по нескольким причинам: 1️⃣ Инкапсуляция данных: Позволяют скрыть переменные внутри функции, делая их недоступными извне, кроме как через другую функцию, созданную в той же области видимости. 2️⃣ Сохранение состояния: Позволяют сохранять состояние между вызовами функции, без использования глобальных переменных. 3️⃣ Кадрирование и функциональное программирование: Облегчают каррирование и другие техники функционального программирования, позволяя функциям работать с переменными, которые были в их области видимости в момент создания. Пример:

function создатьСчетчик() {
    let количество = 0; // переменная количество "замкнута" внутри функции увеличить

    function увеличить() {
        количество += 1;
        return количество;
    }

    return увеличить;
}

const счетчик = создатьСчетчик();
console.log(счетчик()); // 1
console.log(счетчик()); // 2

В этом примере, функция увеличить имеет доступ к переменной количество, даже после того как создатьСчетчик завершила выполнение. Это происходит благодаря механизму замыканий: увеличить "запоминает" переменные, которые были в её области видимости в момент создания. Замыкание — это когда функция запоминает и имеет доступ к переменным из своей области видимости, даже после того, как она выполняется в другом контексте. Это позволяет функциям сохранять данные между вызовами и обеспечивать инкапсуляцию состояния, что очень полезно для создания приватных переменных и управления состоянием в программе. ➡ Примеры ответов ➡ Список всех вопросов на Frontend Developer

❓ Что такое event loop ? Спросят с вероятностью 67% Event Loop (цикл событий) — это один из ключевых аспектов асинхронного программирования, обеспечивающий возможность выполнения JavaScript-кода в однопоточном режиме, не блокируя выполнение других операций. Это достигается за счёт использования цикла, который постоянно проверяет, есть ли задачи для выполнения, и если они есть, то выполняет их одну за другой. JavaScript работает в одном потоке, что означает, что в любой момент времени может выполняться только одна операция. Однако, благодаря Event Loop, он способен обрабатывать асинхронные действия, такие как запросы к серверу, таймеры или обработка событий пользовательского интерфейса, не останавливаясь для ожидания их завершения. Работает Event Loop следующим образом: 1️⃣ Call Stack (Стек вызовов): Содержит текущий стек выполнения функций. Когда функция вызывается, она добавляется в стек вызовов, а когда выполнение функции заканчивается, она удаляется из стека. 2️⃣ Callback Queue (Очередь обратных вызовов): Когда асинхронная операция завершается, её callback (функция обратного вызова) помещается в очередь обратных вызовов. 3️⃣ Event Loop: Цикл событий непрерывно проверяет стек вызовов на наличие функций для выполнения. Если стек вызовов пуст, Event Loop извлекает первую функцию из очереди обратных вызовов и помещает её в стек вызовов для выполнения. Это позволяет JavaScript обрабатывать длительные операции, такие как загрузка данных, не блокируя главный поток и обеспечивая отзывчивость приложения. Пример кода:

console.log('Первое сообщение');
setTimeout(() => {
    console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');

В этом примере, несмотря на то что setTimeout имеет задержку в 0 миллисекунд, вывод в консоль будет следующим:

Первое сообщение
Второе сообщение
Сообщение из setTimeout

Это происходит потому, что вызов setTimeout помещает его callback в очередь обратных вызовов, который будет выполнен только после того, как выполнение текущего кода в стеке вызовов завершится и стек станет пустым. Event Loop позволяет JavaScript выполнять асинхронные операции, обрабатывая их по мере завершения, не блокируя при этом главный поток выполнения. Это делает возможным создание отзывчивых и асинхронных веб-приложений. ➡Примеры ответов ➡ Список всех вопросов на Frontend Developer