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

В чём отличие null от undefined ? Спросят с вероятностью 17% null и undefined оба представляют значения, которые указывают на "отсутствие значения", но между ними есть ключевые отличия: undefined - Переменная была объявлена, но не была инициализирована, то есть ей не было присвоено какое-либо значение. Это значение по умолчанию для переменных, объявленных с помощью var, let или const, а также для аргументов функций, которым не были переданы значения, и для возвращаемого значения функций, которые не возвращают явно какое-либо значение. - Также является типом данных. То есть typeof undefined вернёт "undefined". null - Используется для явного указания на отсутствие объекта или значения. Это сигнал для программиста о том, что переменная должна служить для хранения объекта, но в данный момент она "пуста" или не указывает на какой-либо объект. - В отличие от undefined, он является объектом. То есть typeof null вернёт "object", что может быть немного запутывающим. Это известная особенность языка, сохраняемая для обратной совместимости. Когда использовать ✅ Используйте undefined для проверки, была ли переменная инициализирована или определена функция/параметр. ✅ Используйте null в качестве намеренного отсутствия какого-либо объектного значения. Это полезно, например, при инициализации переменной, которая позже должна быть назначена объекту. Сравнение - При нестрогом сравнении (==) null и undefined считаются равными, потому что оба представляют отсутствие значения. То есть null == undefined вернёт true. - При строгом сравнении (===), которое учитывает тип данных, они считаются различными: null === undefined вернёт false. В целом, null и undefined играют важную роль в представлении и обработке отсутствия данных, но их семантическое значение и использование различаются, что важно учитывать при разработке программ. ➡️ Примеры ответов ➡️Список всех вопросов на Frontend Developer

Открытое собеседование на Frontend разработчика Привет! Это Эйч Навыки — команда разработчиков из бигтеха. Мы помогаем фронтенд-разработчикам апнуть грейд, сменить компанию или перейти с другого стека. 3 апреля в 19:30 по мск приходи онлайн на Открытое собеседование от Эйч Навыков. Это классная возможность узнать, чего ждут от кандидатов на middle-позиции и как подготовиться к собесу, чтобы получить оффер 👀 Как это будет: 1. Дима Дорофеев, тимлид в канадском стартапе Truv Inc, ex-VK и ментор Навыков, задаст реальные вопросы разработчику-добровольцу 2. Потом Дима даст подробную обратную связь: объяснит, зачем задавал тот или иной вопрос, как лучше на него ответить или решить задачу 3. В конце можно будет задать Диме любой вопрос о трудоустройстве, менторстве или фронтенде Что узнаешь на Открытом собеседовании: - Чего ждут от кандидатов на мидл-позиции во фронтенде - Какие вопросы задают на интервью и зачем - Как подготовиться к собесу, чтобы получить заветный оффер Это бесплатно? Бесплатно Просто зарегистрируйся на открытое собеседование в нашем боте: @skills_mentee_bot Реклама: ООО “Эйч Карьера” erid: LjN8KF8i7

Что такое чистая функция ? Спросят с вероятностью 10% Чистая функция — это концепция, особенно популярная в функциональном программировании, которая описывает функцию, обладающую следующими характеристиками: 1️⃣ Детерминированность: Возвращаемое значение зависит только от её входных параметров и не изменяется при повторных вызовах с теми же параметрами. Это означает, что функция всегда возвращает один и тот же результат при одинаковых входных данных, не обращаясь при этом к внешним состояниям или данным. 2️⃣ Отсутствие побочных эффектов: Не вызывает побочных эффектов в приложении, то есть не изменяет состояние программы или внешнего окружения (например, не изменяет глобальные переменные, не записывает данные на диск, не выводит информацию на экран и т.д.). Все, что делает чистая функция — это обрабатывает входные данные и возвращает результат. Пример:

function add(a, b) {
  return a + b;
}

Функция 

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

let counter = 0;

function incrementCounter(value) {
  counter += value;
}

Функция incrementCounter не является чистой, так как она изменяет глобальную переменную counter, что является побочным эффектом. Также результат выполнения функции зависит от внешнего состояния (значения counter), что нарушает принцип детерминированности. Преимущества чистых функций: ✅ Простота тестирования: Легко тестировать, так как их поведение зависит только от входных данных. ✅ Предсказуемость: Отсутствие побочных эффектов и зависимость только от входных параметров делает поведение их предсказуемым. ✅ Повторное использование: Могут быть легко переиспользованы в различных частях программы. ✅ Модульность: Программы, построенные с использованием их, обычно обладают высокой модульностью и легкостью в поддержке и расширении. Чистые функции являются основой функционального программирования и способствуют написанию более чистого, понятного и управляемого кода. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Работать и не уставать, достигать цели, но делать это в кайф - реально! Как научиться делать дела и не выгорать? Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ✔️ Как научиться отвлекаться от работы и отдыхать? ✔️ Как совместить кучу рабочих задач и время с семьей? ✔️ Как справиться с прокрастинацией? ✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного.

Что такое операторы сравнения? Спросят с вероятностью 10% Операторы сравнения используются для сравнения двух значений и возвращают логическое значение: true (истина), если сравнение верно, и false (ложь), если нет. Они играют ключевую роль в управлении потоком выполнения программы, позволяя выполнить определённый код в зависимости от результатов сравнения. Виды: - Равенство (==): Проверяет равенство двух значений после приведения их к одному типу. Например, 5 == '5' вернёт true. - Не равно (!=): Проверяет, не равны ли два значения после приведения их к одному типу. Например, 5 != '5' вернёт false. - Строгое равенство (===): Проверяет равенство двух значений без приведения типов, то есть значения должны быть одного типа. Например, 5 === '5' вернёт false. - Строгое не равенство (!==): Проверяет, не равны ли два значения без приведения типов. Например, 5 !== '5' вернёт true. - Больше (>): Проверяет, больше ли первое значение, чем второе. Например, 5 > 3 вернёт true. - Больше или равно (>=): Проверяет, больше ли первое значение или равно второму. Например, 5 >= 5 вернёт true. - Меньше (<): Проверяет, меньше ли первое значение, чем второе. Например, 3 < 5 вернёт true. - Меньше или равно (<=): Проверяет, меньше ли первое значение или равно второму. Например, 5 <= 5 вернёт true. Примеры:

console.log(5 == '5');   // true, потому что значения равны после приведения типов
console.log(5 === '5');  // false, потому что значения разных типов
console.log(5 != '4');   // true, потому что значения не равны после приведения типов
console.log(5 !== '5');  // true, потому что значения разных типов
console.log(5 > 3);      // true
console.log(5 >= 5);     // true
console.log(3 < 5);      // true
console.log(5 <= 5);     // true

Важные моменты: - При использовании операторов равенства (== и !=) происходит автоматическое приведение типов, что может привести к неожиданным результатам. Поэтому рекомендуется использовать строгие операторы равенства (=== и !==) для точного сравнения значений. - Операторы сравнения часто используются в условных операторах (if, else if, switch) и циклах (while, for), позволяя управлять потоком выполнения программы в зависимости от результатов сравнения. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Каналы любого уважающего себя разработчика: Java Developer — поможет узнать обо всех тонкостях и секретах языка Java. Python Developer — научит программировать на Python как настоящий разработчик. Подписывайся и прокачивай свои навыки👇🏻

Что такое this ? Спросят с вероятностью 17% this является ключевым словом, которое используется в функциях и методах и указывает на объект, в контексте которого они были вызваны.Его значение зависит от того, как именно вызывается функция, и может изменяться в различных контекстах выполнения. Контексты использования: 1️⃣ Глобальный контекст: глобальном контексте (вне каких-либо функций) он ссылается на глобальный объект. В браузере глобальным объектом является window, в Node.js — global.

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

2️⃣ Функции (не строгий режим): В функциях, вызванных обычным способом (не как методы объекта), он ссылается на глобальный объект. В строгом режиме ("use strict") this будет undefined, если функция вызвана не как метод объекта.

   function show() {
      console.log(this === window); // true в браузере в нестрогом режиме
      console.log(this); // undefined в строгом режиме
    }
    show();

3️⃣ Методы объекта: Когда функция вызывается как метод объекта, он ссылается на объект, частью которого является метод.

const obj = {
      myMethod() {
        console.log(this);
      }
    };
    obj.myMethod(); // this ссылается на obj

4️⃣ Конструкторы: В функции-конструкторе, вызванной с new, он ссылается на вновь созданный объект.

function Person(name) {
      this.name = name;
    }
    const person = new Person("Alice");
    console.log(person.name); // Alice

5️⃣ Стрелочные функции: Стрелочные функции не имеют собственного контекста, вместо этого они захватывают его из внешнего лексического окружения.

const obj = {
      method: function() {
        const arrowFunc = () => console.log(this);
        arrowFunc(); // this ссылается на obj
      }
    };
    obj.method();

6️⃣ Явное привязывание: С помощью методов call, apply и bind можно явно указать контекст для функции.

function show() {
      console.log(this);
    }
    const obj = {name: "Explicit context"};
    show.call(obj); // this в show() ссылается на obj

Важность понимания this Понимание механизма его работы важно для эффективного использования, особенно при работе с объектно-ориентированным кодом и при создании сложных веб-приложений, где часто требуется контролировать контекст выполнения функций и методов. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Зачем нужны сборщики ? Спросят с вероятностью 10% Сборщики (или бандлеры) играют критически важную роль в процессе создания современных веб-приложений и сайтов. Они автоматизируют и оптимизируют множество задач, связанных с подготовкой кода к продакшену. Сборщики, такие как Webpack, Rollup, Parcel и другие, обеспечивают эффективное управление зависимостями, минификацию кода, транспиляцию и множество других возможностей. Вот основные причины, по которым сборщики являются неотъемлемой частью современной веб-разработки: 1️⃣ Управление зависимостями Позволяют управлять зависимостями проекта, автоматически разрешая их и включая в конечный бандл. Это особенно важно в больших проектах, где множество библиотек и модулей взаимодействуют друг с другом. 2️⃣ Модульность и организация кода Поддерживают использование модулей ES6, CommonJS и других форматов модулей, что позволяет разработчикам структурировать код более эффективно, делая его читаемым и легко поддерживаемым. 3️⃣ Транспиляция Позволяют использовать новейшие возможности JavaScript, компилируя код в формат, совместимый с более старыми браузерами. Это обеспечивает широкую совместимость кода без необходимости жертвовать современными возможностями языка. 4️⃣ Оптимизация производительности Могут минифицировать и углифицировать JavaScript и CSS, удаляя лишние пробелы, комментарии и сокращая имена переменных. Это уменьшает размер файлов и ускоряет загрузку веб-приложений. 5️⃣ Автоматизация задач Могут автоматизировать множество рутинных задач, таких как компиляция SASS/LESS в CSS, оптимизация изображений, генерация исходных карт (source maps) для упрощения отладки и другие. 6️⃣ Горячая замена модулей (HMR) Поддерживают горячую замену модулей (Hot Module Replacement), что позволяет разработчикам видеть изменения в коде в реальном времени без полной перезагрузки страницы, ускоряя процесс разработки. 7️⃣ Поддержка ассетов Умеют встраивать ассеты, такие как изображения, шрифты и статические файлы, непосредственно в конечный бандл или оптимизировать их подгрузку. Сборщики делают процесс разработки более организованным, эффективным и безопасным, автоматизируя множество задач и обеспечивая совместимость кода с различными средами. Они являются неотъемлемой частью современного инструментария веб-разработчика, помогая справляться с вызовами разработки сложных веб-приложений и сайтов. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Чем let отличается от var ? Спросят с вероятностью 27% Ключевые слова let и var используются для объявления переменных, но между ними есть несколько важных различий, касающихся области видимости, поднятия (hoisting) и создания блока. Область видимости (Scope) - var: Объявления переменных с использованием var имеют функциональную область видимости, что означает, что переменная, объявленная с помощью нее внутри функции, доступна везде в этой функции. - let: В отличие от var, let имеет блочную область видимости. Это означает, что переменная, объявленная с помощью нее в блоке (например, в цикле или условном операторе), будет доступна только в пределах этого блока. Поднятие (Hoisting) - var: Переменные, объявленные с ее помощью, поднимаются в начало функции или скрипта. Это означает, что они могут быть использованы до своего объявления, хотя до инициализации они будут иметь значение undefined. - let: Переменные, объявленные с ее помощью, также поднимаются, но не инициализируются. Попытка доступа к такой переменной до её объявления приведет к ошибке ReferenceError. Это поведение известно как "временная мертвая зона" (temporal dead zone, TDZ). Создание в глобальном контексте - var: Переменные, объявленные с ее помощью в глобальном контексте, становятся свойствами глобального объекта (window в браузерах). - let: Переменные, объявленные с ее помощью в глобальном контексте, не становятся свойствами глобального объекта. Примеры

if (true) {
  var varVariable = "Я доступен везде в функции";
  let letVariable = "Я доступен только в этом блоке";
}

console.log(varVariable); // Работает, потому что var имеет функциональную область видимости
console.log(letVariable); // Ошибка, потому что let имеет блочную область видимости

console.log(a); // undefined из-за поднятия
var a = 3;

console.log(b); // ReferenceError из-за временной мертвой зоны
let b = 4;

let предоставляет более строгую и предсказуемую область видимости переменных, что улучшает управляемость кодом и уменьшает вероятность ошибок, связанных с неожиданным доступом или изменением данных. var может быть полезен, когда нужна функциональная область видимости, но сейчас let и const (для объявления констант) являются предпочтительными вариантами для управления переменными. В то время как var объявляет переменную, доступную во всей функции, а let ограничивает видимость переменной блоком, в котором она объявлена. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Хотите стать фронтенд-разработчиком или бустануть свою карьеру, значительно увеличив свой доход? Евгений Шушков - Senior Frontend-разработчик из Avito и опытный ментор знает, как вам помочь. Евгений регулярно ходит на собеседования в топовые компании, чтобы всегда быть в форме и чтобы у вас была самая свежая информация по собесам. Его последний "забег" по собеседованиям принес ему 9 офферов с зарплатой от 340 тысяч рублей💰 В блоге Женя делится стратегиями и лайфхаками, которые помогли ему и десяткам его учеников достичь значительных успехов. Что вас ждет в блоге? - Советы по прохождению собеседований. - Гайды по карьерному росту, проверенные на личном опыте и опыте учеников. - Лайфстайл-советы для разработчиков, помогающие находить баланс. - И многое другое, что сделает ваш путь в фронтенд-разработку успешным и интересным. Присоединяйтесь к блогу Евгения и начните свой путь к успеху во фронтенде уже сегодня!

А вы знали, что чтобы стать крутым разработчиком нужен ментор? 🎓Станьте уверенным профессионалом с достойным уровнем дохода в IT индустрии вместе с менторами YKul. ➡️Запишитесь на курс ❗️Не важно, новичок вы или действующий специалист. С нами вы преуспеете – пройдете именно ваш путь вместе с опытным ментором, действующим программистом уровня senior. Не нужно оплачивать фиксированный курс длиной в несколько месяцев. Вы сможете: ✅ писать чистый валидный код ✅ легко верстать сайты ✅ применять JavaScript, TypeScript, HTML/CSS, GIT, npm ✅ использовать фронтенд-фреймворки и библиотеки ✅ решать реальные кейсы ❓Сколько времени это займет❓ 👨🏻‍💻Мы определяем ваш уровень подготовки, и согласуем индивидуальный план занятий. Оплачивайте занятия отдельно за каждый месяц, при необходимости делайте перерыв и возвращайтесь к практике, когда это удобно вам. 👍Мы помогаем с трудоустройством как новичкам, так и работающим специалистам - тем, кто в поиске лучших вакансий! ✅Каждое завершенное задание от YKul – успешный кейс для вашего портфолио. ✅ HR специалист YKul рассмотрит ваш опыт с точки зрения работодателя, вместе с вами подготовит убедительное резюме. ✅ Проработаем все вопросы и темы, важные для успешного прохождения собеседования. ✅ Наш сертификат станет еще одним плюсом в вашем профиле сотрудника. ➡️Запишитесь на курс Хотите протестировать? Убедитесь, что вам подходит формат и содержание занятий: первая неделя обучения – ❗️бесплатно❗️ Реклама: ИП Кулагин Андрей Николаевич, ИНН: 740411652688

Что такое макро и микро задачи ? Спросят с вероятностью 20% Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают. 1️⃣ Микро-задачи (Microtasks) Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу. Примеры: - Обещания (Promises): then, catch, finally - queueMicrotask() 2️⃣ Макро-задачи (Macrotasks) Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче. Примеры: - setTimeout - setInterval - setImmediate (Node.js) - I/O операции - Интерактивные действия, такие как клики мыши и нажатия клавиш ✅ Различия и порядок выполнения Основное различие между макро- и микро-задачами заключается в их приоритете выполнения: - После каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами. - Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к "голоданию" макро-задач, если микро-задачи постоянно добавляются. Пример:

setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));

setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));

В этом примере порядок вывода будет следующим: 1️⃣ Микро-задача 1 2️⃣ Микро-задача 2 3️⃣ Макро-задача 1 4️⃣ Макро-задача 2 Это демонстрирует, как микро-задачи имеют приоритет и выполняются до того, как event loop переходит к следующей макро-задаче. Понимание различий между макро- и микро-задачами важно для эффективной работы с асинхронным кодом, поскольку это влияет на порядок выполнения операций и может быть источником трудноуловимых ошибок или неожиданного поведения программы. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Frontend Roadmap 2024. План + Ресурсы для бесплатного обучения. План обучения фронтенд-разработчиков включает ключевые технологии, требуемые для начала работы в этой сфере, и предоставляет список бесплатных образовательных ресурсов. Предлагается выборка статей, видеороликов и курсов для самостоятельного изучения каждого направления технологий. Предложенные материалы позволяют обойтись без платных курсов и самостоятельно освоить фронтенд-разработку. Смотрите актуальный RoadMapp – https://youtu.be/9Pbm_V0MM0Y

Frontend Roadmap 2024. План + Ресурсы для бесплатного обучения. План обучения фронтенд-разработчиков включает ключевые технологии, требуемые для начала работы в этой сфере, и предоставляет список бесплатных образовательных ресурсов. Предлагается выборка статей, видеороликов и курсов для самостоятельного изучения каждого направления технологий. Предложенные материалы позволяют обойтись без платных курсов и самостоятельно освоить фронтенд-разработку. https://youtu.be/9Pbm_V0MM0Y

Какие есть типы переменных ? Спросят с вероятностью 10% Существуют различные типы данных, которые могут быть присвоены переменным. В зависимости от контекста, под "типами переменных" могут подразумеваться как типы данных, так и способы объявления переменных. Ниже рассмотрим оба аспекта. 1️⃣ Примитивные типы: - Number: представляет числа (целые или с плавающей точкой), включая специальные числовые значения Infinity, -Infinity и NaN (Not-a-Number). - String: представляет строки текста. - Boolean: имеет два значения true и false. - null: указывает на отсутствие какого-либо значения. - undefined: указывает, что значение переменной не было установлено. - Symbol: представляет уникальные идентификаторы, введен в ECMAScript 2015. - BigInt: представляет целые числа произвольной точности. 2️⃣ Ссылочные типы (объекты): - Объекты (Object): коллекция ключ/значение, включая встроенные объекты, такие как Function, Array, Date, RegExp и другие. - Массивы (Array): упорядоченная коллекция значений. - Функции (Function): блоки кода, предназначенные для многократного выполнения. Способы объявления переменных -var: Исторический способ объявления переменных. Обладает функциональной областью видимости и поднимается в начало области видимости (hoisting). -let: Введен в ES6 (ECMAScript 2015), позволяет объявлять переменные с блочной областью видимости, что делает их доступными только в рамках блока {}. -const: Также введен в ES6, позволяет объявлять константы, т.е. переменные, значение которых не может быть изменено после инициализации. Имеет блочную область видимости. Выбор типа переменной и типа данных зависит от задачи, которую вы решаете. Использование let и const предпочтительнее из-за более предсказуемой области видимости и лучшей поддержки модульности кода. Различие между типами данных помогает эффективно управлять информацией в программе, обеспечивая её гибкость и выразительность. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Жадный техдир не повышает зарплату? Давай исправим! Учиться и работать — больше не нужно. За тебя это сделал Роман Шубин, тимлид девопсов и автор канала «BashDays». Следуй за ним и через неделю вместо медной зарплатной вилки, тебе предложат золотую. Ты узнаешь: 🔸 Как меньше кодить и больше зарабатывать 🔸 Про скрытые возможности Linux и методы отладки 🔸 Как выжить среди велосипедов и костылей 🔸 Почему наличие бэкапов, не спасет упавший прод 🔸 Как при поиске виноватого, не выйти на себя И это только цветочки. А если заскучал, поиграй с друзьями в PIU-PIU и надери им бэкенд. Рекомендую! В BashDays даже джуны становятся сеньорами. Подписывайся: @bashdays

Зачем нужен менеджер состояния ? Спросят с вероятностью 10% Менеджер состояния используется для централизованного управления состоянием приложения, особенно когда речь идет о сложных или крупномасштабных приложениях с множеством компонентов, которым необходимо обмениваться данными. Состояние приложения может включать различные данные: от пользовательского ввода и серверных ответов до временных данных, таких как статус загрузки или авторизационный статус пользователя. Зачем нужен менеджер состояния: 1️⃣ Централизация состояния: Позволяют хранить все данные приложения в одном месте, делая их легкодоступными для всех компонентов приложения независимо от их места в иерархии. 2️⃣ Упрощение обмена данными между компонентами: В больших приложениях компоненты часто нуждаются в доступе к одним и тем же данным. Облегчает передачу данных между компонентами, уменьшая необходимость в пропсах или колбэках. 3️⃣ Поддержка сложных взаимодействий и асинхронности: Предоставляют механизмы для управления асинхронными действиями, такими как запросы к API, и могут обрабатывать сложные последовательности действий, обновляя состояние соответствующим образом. 4️⃣ Отладка и разработка: Большинство предлагают инструменты для отладки, которые позволяют просматривать изменения состояния в реальном времени, отслеживать действия, вызывающие эти изменения, и даже перемещаться по истории изменений состояния. 5️⃣ Повышение производительности: Централизованное управление состоянием позволяет оптимизировать обновления интерфейса, минимизируя ненужные рендеринги и улучшая общую производительность приложения. 6️⃣ Повышение масштабируемости приложения: Предоставляет структурированный подход к управлению состоянием, который облегчает масштабирование приложения и добавление новых функций. Примеры: - Redux: Один из самых популярных менеджеров состояния для React, использующий концепцию однонаправленного потока данных. - Vuex: Специализированный менеджер состояния для Vue.js. - MobX: Альтернатива Redux, предлагающая более гибкий подход к управлению состоянием через наблюдаемые объекты. - Context API и useReducer (React Hook): Встроенные механизмы в React для управления состоянием без добавления внешних библиотек. В зависимости от сложности приложения и предпочтений можно выбирать между использованием внешних библиотек для управления состоянием или применением встроенных средств фреймворка. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer

Бесплатный вебинар по chatGPT "Создай нейро-сотрудника с нуля, без опыта программирования" Вы узнаете как использовать chatGPT в профессиональных целях, создавать нейросотрудников на заказ и зарабатывать на ИИ. Регистрируйтесь прямо сейчас - будьте в курсе всех новинок из мира AI. Реклама. ООО "ТЕРРА ЭЙАЙ". ИНН 9728019395. erid: LjN8KTVLn

Ребят, в начале своего пути сложно запомнить сразу весь пройденный материал, поэтому нужно периодически повторять его У нас не всегда есть время перечитывать учебники, но вот в телеграме мы сидим очень активно 😎 А значит даже быстрый просмотр полезных материалов будет тренировать нашу память Тем более теперь есть специальный канал для этого: @FrontendPortal Наглядная теория с примерами, полезные ресурсы, шпаргалки, разбор вопросов с собеседований, викторины - все там есть ➡️ Так что советую подписаться

В чём разница между классической функцией и стрелочной ? Спросят с вероятностью 20% Классические функции (объявленные через ключевое слово function) и стрелочные функции (введённые в ES6 через => синтаксис) являются двумя способами объявления функций, но между ними есть несколько важных различий: 1️⃣ Синтаксис Классическая функция:

function add(a, b) {
  return a + b;
}

Стрелочная функция:

const add = (a, b) => a + b;

Предлагают более краткий синтаксис для написания функций, особенно если функция состоит из одного выражения. 2️⃣ Контекст this В классических функциях контекст определяется тем, как функция была вызвана. В стрелочных функциях контекст наследуется из окружающего контекста (лексический контекст this), где функция была объявлена. Пример с классической функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(function() {
      console.log(this.id); // this ссылается на глобальный объект или undefined в строгом режиме, а не на obj
    }, 1000);
  }
};

Пример со стрелочной функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(() => {
      console.log(this.id); // this корректно ссылается на obj, так как стрелочная функция наследует this из окружения
    }, 1000);
  }
};

3️⃣ Конструктор Классические функции могут использоваться с помощью ключевого слова new. Стрелочные функции не могут быть использованы как конструкторы, и попытка это сделать приведет к ошибке. Пример с классической функцией:

function Person(name) {
  this.name = name;
}
const person = new Person("Alice");

Попытка использовать стрелочную функцию как конструктор:

const Person = (name) => {
  this.name = name;
};
// const person = new Person("Alice"); // Ошибка: Person не является конструктором

4️⃣ Аргументы В классических функциях можно использовать объект arguments, который содержит аргументы, переданные функции. В стрелочных функциях нет объекта arguments, но можно использовать оператор расширения ... для достижения аналогичного результата. Основные различия между классическими и стрелочными функциями заключаются в синтаксисе, поведении this, использовании в качестве конструктора и доступе к аргументам функции. Стрелочные функции предлагают более краткий синтаксис и удобны для написания коротких функций, а также при работе с контекстом this в обратных вызовах и замыканиях. Однако для более сложных сценариев, требующих использования this в различных контекстах или создания конструкторов, предпочтительнее использовать классические функции. ➡️ Примеры ответов ➡️ Список всех вопросов на Frontend Developer