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

Какие есть типы переменных ?
Спросят с вероятностью 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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Зачем нужен менеджер состояния ?
Спросят с вероятностью 10%

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

Зачем нужен менеджер состояния:

1️⃣ Централизация состояния: Позволяют хранить все данные приложения в одном месте, делая их легкодоступными для всех компонентов приложения независимо от их места в иерархии.

2️⃣ Упрощение обмена данными между компонентами: В больших приложениях компоненты часто нуждаются в доступе к одним и тем же данным. Облегчает передачу данных между компонентами, уменьшая необходимость в пропсах или колбэках.

3️⃣ Поддержка сложных взаимодействий и асинхронности: Предоставляют механизмы для управления асинхронными действиями, такими как запросы к API, и могут обрабатывать сложные последовательности действий, обновляя состояние соответствующим образом.

4️⃣ Отладка и разработка: Большинство предлагают инструменты для отладки, которые позволяют просматривать изменения состояния в реальном времени, отслеживать действия, вызывающие эти изменения, и даже перемещаться по истории изменений состояния.

5️⃣ Повышение производительности: Централизованное управление состоянием позволяет оптимизировать обновления интерфейса, минимизируя ненужные рендеринги и улучшая общую производительность приложения.

6️⃣ Повышение масштабируемости приложения: Предоставляет структурированный подход к управлению состоянием, который облегчает масштабирование приложения и добавление новых функций.

Примеры:

- Redux: Один из самых популярных менеджеров состояния для React, использующий концепцию однонаправленного потока данных.
- Vuex: Специализированный менеджер состояния для Vue.js.
- MobX: Альтернатива Redux, предлагающая более гибкий подход к управлению состоянием через наблюдаемые объекты.
- Context API и useReducer (React Hook): Встроенные механизмы в React для управления состоянием без добавления внешних библиотек.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

В чём разница между классической функцией и стрелочной ?
Спросят с вероятностью 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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое cors ?
Спросят с вероятностью 10%

CORS (Cross-Origin Resource Sharing — «совместное использование ресурсов между разными источниками») — это механизм, который позволяет веб-страницам запрашивать ресурсы с другого домена, отличного от домена, с которого была загружена сама страница. По умолчанию, в целях безопасности, веб-браузеры ограничивают кросс-доменные запросы с использованием так называемой политики одного источника (Same-Origin Policy). Он предоставляет веб-серверам возможность явно разрешить некоторые кросс-доменные запросы, сохраняя при этом безопасность.

Как он работает

Когда веб-приложение пытается сделать запрос к ресурсу, который находится на другом домене (кросс-доменный запрос), браузер автоматически добавляет к запросу заголовок Origin. Этот заголовок содержит домен, с которого был сделан запрос. Веб-сервер, к которому направлен запрос, затем проверяет этот заголовок и решает, разрешить ли запрос. Если сервер разрешает запросы из этого источника, он отвечает с соответствующими CORS заголовками, указывающими, какие действия разрешены. Один из таких заголовков — Access-Control-Allow-Origin, который может быть установлен в (что означает разрешение для всех доменов) или в конкретный домен.

Примеры:

✅ Access-Control-Allow-Origin: Указывает, какие домены могут получать доступ к ресурсу. Может быть установлен в конкретный домен или для разрешения всех доменов.
✅ Access-Control-Allow-Methods: Указывает, какие HTTP методы разрешены при доступе к ресурсу.
✅ Access-Control-Allow-Headers: Указывает, какие HTTP заголовки могут быть использованы во время запроса.

Почему CORS важен

Решает важную проблему безопасности, позволяя контролировать, какие веб-сайты могут использовать ресурсы вашего веб-сайта. Это предотвращает множество видов атак, таких как CSRF (Cross-Site Request Forgery — подделка межсайтовых запросов), позволяя при этом легитимным сайтам запрашивать данные через браузер.

Проблемы с CORS

Хотя он повышает безопасность, неправильная настройка CORS может привести к уязвимостям. Например, слишком широкое использование Access-Control-Allow-Origin: * может случайно разрешить небезопасные кросс-доменные запросы. Разработчики должны тщательно настраивать политики CORS, чтобы избежать потенциальных проблем с безопасностью.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какими способами можно скрыть элемент ?
Спросят с вероятностью 10%

Скрыть элемент на веб-странице можно несколькими способами. Разные методы подходят для различных сценариев использования, например, когда нужно полностью удалить элемент из потока документа или просто сделать его невидимым для пользователя, но сохранить в потоке документа. Вот некоторые из наиболее часто используемых способов:

1️⃣ display: none

Самый прямолинейный способ. Это свойство полностью убирает элемент из потока документа, и он не занимает никакого пространства.

.element {
  display: none;
}

2️⃣ visibility: hidden

Элемент остаётся в потоке документа и продолжает занимать своё пространство, но становится невидимым. В отличие от display: none, visibility: hidden сохраняет место элемента в макете.

.element {
  visibility: hidden;
}

3️⃣ opacity: 0

Устанавливает уровень прозрачности элемента. Значение 0 делает элемент полностью прозрачным, но, как и в случае с visibility: hidden, элемент остаётся видимым для DOM и продолжает занимать место.

.element {
  opacity: 0;
}

4️⃣ Использование абсолютного позиционирования

Можно абсолютно позиционировать элемент за пределами видимой области экрана, сделав его таким образом невидимым для пользователя.

.element {
  position: absolute;
  left: -9999px;
}

5️⃣ height: 0 и overflow: hidden

Если задать элементу высоту 0 и установить overflow: hidden, содержимое элемента скроется, но сам элемент по-прежнему будет присутствовать в потоке документа, не занимая при этом видимого пространства.

.element {
  height: 0;
  overflow: hidden;
}

6️⃣ clip или clip-path

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

.element {
  position: absolute;
  clip: rect(0 0 0 0);
}

Выбор метода зависит от конкретной задачи:
✅ Если элемент не должен занимать место в макете и его не нужно восстанавливать с помощью JavaScript, подходит display: none.
✅ Если элемент должен сохранить своё место, но быть невидимым, используйте visibility: hidden или opacity: 0.
✅ Для временного скрытия элемента с возможностью быстрого восстановления без изменения макета страницы можно использовать visibility: hidden или opacity: 0.

Каждый метод имеет свои особенности и подходит для определённых ситуаций, поэтому выбор зависит от целей скрытия элемента и требований к взаимодействию с ним.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что известно о различии между function expression и function declaration ?
Спросят с вероятностью 20%

Существует два основных способа объявления функций: Function Declaration (Объявление Функции) и Function Expression (Функциональное Выражение). Хотя оба подхода определяют функции, между ними есть несколько ключевых различий, влияющих на поведение и использование функций в коде.

Function Declaration (Объявление Функции)
Способ объявления функции, при котором используется ключевое слово function, за которым следует имя функции.

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

Особенности:

- Поднятие (Hoisting): Поднимаются вверх их области видимости перед выполнением кода, что позволяет вызывать функции до их объявления в коде.
- Область видимости: Определяется её местом в коде: в глобальной области видимости, в области видимости другой функции или в блочной области видимости (в строгом режиме).
- Мутабельность: Имя функции является неизменным и не может быть переназначено.

Function Expression (Функциональное Выражение)
Способ объявления функции, при котором функция создаётся в рамках выражения. Функциональные выражения могут быть анонимными или именованными.

const sum = function(a, b) {
  return a + b;
};

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

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое контекст ?
Спросят с вероятностью 10%

Контекст выполнения (Execution Context) относится к окружению, в котором выполняется текущий код. Он содержит информацию о том, где и как выполняется код, включая значения переменных и this. Однако, когда говорят о нем в более узком смысле, чаще всего имеют в виду контекст this.

this

Ключевое слово ссылается на объект, в контексте которого выполняется текущий код. Значение его зависит от того, как вызывается функция:

1️⃣ В глобальном контексте выполнения (вне любых функций), он ссылается на глобальный объект. В браузере глобальным объектом является window.

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

3️⃣ В методе объекта Он ссылается на объект, к которому принадлежит метод.

4️⃣ В конструкторе (функции, вызванной с ключевым словом new), он ссылается на вновь созданный объект.

5️⃣ Через методы call,apply и bind можно явно задать данное значение для вызова функции.


Примеры:

function show() {
  console.log(this);
}

const obj = {
  show: function() {
    console.log(this);
  }
};

show(); // В глобальном контексте, this будет глобальным объектом или undefined в строгом режиме
obj.show(); // В контексте объекта, this будет ссылаться на obj

function Person(name) {
  this.name = name;
}

const person = new Person('Alice'); // Здесь this внутри Person будет ссылаться на новый объект person

const externalShow = show.bind(obj);
externalShow(); // this будет ссылаться на obj благодаря bind

Зачем нужен контекст this

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

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Для чего нужно замыкание ?
Спросят с вероятностью 10%

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

Для чего нужны замыкания:

1️⃣ Инкапсуляция данных: Позволяют скрыть переменные внутри функции, делая их недоступными снаружи, кроме как через определённые предоставленные функции. Это форма инкапсуляции данных, которая помогает избежать загрязнения глобальной области видимости и случайного изменения данных.

2️⃣ Создание приватных переменных: До введения классов с модификаторами доступа (private поля в классах, предложенные в ES2020) замыкания были основным способом создания приватных переменных для объектов и функций.

3️⃣ Фабрики функций: Позволяют создавать функции, которые могут генерировать другие функции, уже с предустановленными параметрами или конфигурациями. Это полезно для настройки поведения функций в зависимости от контекста.

4️⃣ Модульность и управление состоянием: Обеспечивают механизм для создания модулей и библиотек, позволяя определить приватные переменные и функции, которые недоступны извне, и предоставить публичное API через возвращаемые функции.

5️⃣ Кадрирование и частичное применение функций: Используются для реализации каррирования и частичного применения функций, когда функция принимает несколько аргументов, один или несколько из которых уже предустановлены.

Пример:

function createCounter() {
  let count = 0; // Приватная переменная, доступная только внутри createCounter
  return function() {
    count += 1;
    return count;
  };
}

const counter = createCounter(); // counter — это функция, замыкающая в себе переменную count
console.log(counter()); // 1
console.log(counter()); // 2
// Переменная count остается доступной для counter(), но недоступна напрямую извне

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

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

В чем различие методов call apply bind ?
Спросят с вероятностью 20%

Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении.

call
Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.

Пример:

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

Здесь он используется для вызова функции greet с this, установленным в "Earth", и двумя дополнительными аргументами "Hello" и "Alice".

apply
Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

В этом случае он вызывает функцию greet с this, установленным в "Earth", и аргументами, переданными в виде массива.

bind
Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

Здесь он используется для создания новой функции greetEarth, которая при вызове выводит тот же результат, что и предыдущие примеры, но с тем отличием, что контекст this и аргументы были заранее заданы.

- call вызывает функцию с указанным контекстом this и отдельными аргументами.
- apply аналогичен call, но принимает аргументы в виде массива.
- bind создаёт новую функцию с предустановленным контекстом this и аргументами, если они были предоставлены, но не вызывает её немедленно.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое async и await ?
Спросят с вероятностью 10%

async/await — это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).

- Ключевое слово async

Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.

async function fetchData() {
  return 'данные';
}

fetchData().then(data => console.log(data)); // выводит "данные"

- Ключевое слово await

Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.

async function fetchData() {
  let data = await fetch('https://api.example.com/data');
  let json = await data.json();
  return json;
}

В этом примере функция fetchData сначала ожидает завершения HTTP-запроса к серверу, а затем ожидает завершения преобразования ответа в формат JSON. Весь этот процесс асинхронный, но благодаря await код выглядит как синхронный.

Преимущества использования:

✅ Улучшение читаемости кода: Асинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание.
✅ Упрощение обработки ошибок: В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее.
✅ Избегание "callback hell": Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.

Важно помнить:

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

async/await сделал написание асинхронного кода более интуитивно понятным и удобным, существенно улучшив разработку асинхронных приложений.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Зачем используют vuex ?
Спросят с вероятностью 10%

Vuex — это библиотека управления состоянием для приложений, предназначенная для централизованного хранения всех данных, используемых в приложении. В больших и сложных приложениях, где множество компонентов нуждаются в доступе к общим данным и должны реагировать на их изменения в реальном времени, простого пропс-дренажа (props drilling) и событийного взаимодействия недостаточно для эффективного управления состоянием. Вот основные причины использования Vuex в таких случаях:

1️⃣ Централизованное управление состоянием

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

2️⃣ Реактивность

Состояние, хранящееся в нем, реактивно. Это означает, что он автоматически отслеживает его изменения и обновляет представление, когда состояние изменяется. Это делает разработку интерактивных интерфейсов более интуитивно понятной и менее подверженной ошибкам.

3️⃣ Удобство отладки и разработки

Поддерживает инструменты, позволяя отслеживать, как и когда изменяется состояние приложения. Это значительно упрощает отладку и позволяет лучше понять поток данных в приложении.

4️⃣ Поддержка масштабируемости

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

5️⃣ Упрощение управления сложными взаимодействиями

Упрощает управление сложными взаимодействиями и потоками данных между компонентами, например, при выполнении асинхронных операций, таких как запросы к серверу, и последующем обновлении состояния в зависимости от ответа.

Пример:

// Создание хранилища Vuex
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

// Использование хранилища в компоненте Vue
new Vue({
  el: '#app',
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    increment() {
      store.commit('increment');
    }
  }
});

Этот простой пример демонстрирует, как Vuex может быть использован для централизованного управления состоянием и его изменениями.

Использование Vuex целесообразно в сложных приложениях, где требуется эффективное управление и обмен данными между компонентами. Оно обеспечивает реактивность, удобство отладки, масштабируемость и структурированность, делая управление состоянием приложения более организованным и удобным.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Почему react лучше, чем jquerry ?
Спросят с вероятностью 7%

Сравнивать React и jQuery не совсем корректно, поскольку они решают разные задачи в разработке веб-приложений. jQuery — это библиотека, которая упрощает манипуляции с DOM, обработку событий, анимации и Ajax-запросы, делая код более кратким и понятным. React — это библиотека для создания пользовательских интерфейсов, которая позволяет строить интерактивные UI с использованием компонентного подхода.

Тем не менее, можно выделить несколько причин, по которым можно предпочесть React jQuery для современных веб-приложений:

1️⃣ Компонентный подход: Основан на компонентах, что позволяет создавать переиспользуемые, независимые части интерфейса. Это делает код более организованным и упрощает его поддержку.

2️⃣ Виртуальный DOM: Использует виртуальный DOM, что позволяет оптимизировать обновление интерфейса и повысить производительность приложения, минимизируя количество манипуляций с реальным DOM.

3️⃣ Однонаправленный поток данных: Реализует паттерн однонаправленного потока данных, который облегчает понимание того, как данные передаются через приложение и как состояние компонента влияет на его отображение.

4️⃣ Широкие возможности для разработки сложных приложений: Лучше подходит для разработки больших и сложных веб-приложений, где требуется высокая степень интерактивности и динамичности интерфейса.

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

6️⃣ Интеграция с современными архитектурами и инструментами разработки: Легко интегрируется с современными архитектурами веб-разработки, такими как Redux для управления состоянием приложения, и с инструментами разработки, такими как Webpack, Babel и другие.

7️⃣ Поддержка из коробки: Создание интерактивных пользовательских интерфейсов с ним часто требует меньше кода и меньше усилий для поддержания его в актуальном состоянии по сравнению с использованием jQuery для тех же целей.

Хотя React предлагает множество преимуществ для разработки современных веб-приложений, выбор между React и jQuery зависит от конкретных требований проекта. Для простых веб-сайтов или задач, где необходимо быстро добавить интерактивность без переписывания существующего кода, jQuery может быть более подходящим выбором. Для создания сложных пользовательских интерфейсов с высокой степенью взаимодействия React предлагает более современный и мощный инструментарий.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие способы изоляции стилей существуют ?
Спросят с вероятностью 20%

Изоляция стилей в веб-разработке важна для предотвращения конфликтов CSS и обеспечения того, чтобы стили одного компонента или раздела страницы не влияли на другие. Существует несколько таких подходов:

1️⃣ Использование уникальных имен классов
Это самый простой способ избежать конфликтов. Может быть достигнуто с помощью методологий именования, таких как BEM (Блок, Элемент, Модификатор), которая предлагает чёткую структуру для именования классов.

2️⃣ CSS-модули
Они представляют собой подход, при котором классы и идентификаторы, определенные в CSS-файле, автоматически преобразуются в уникальные имена. Это позволяет избежать конфликтов имен классов между различными компонентами. Они поддерживаются в сборщиках, таких как Webpack, и во фреймворках, например, в Create React App.

3️⃣ CSS-in-JS
Библиотеки CSS-in-JS, такие как Styled-components и Emotion, позволяют писать CSS прямо в JavaScript-файлах. Это обеспечивает полную изоляцию стилей, поскольку стили применяются непосредственно к компонентам, и конфликты имен классов исключаются.

4️⃣ Shadow DOM
Технология, позволяющая инкапсулировать DOM-дерево и стили компонента так, что они не влияют на основной документ. Это ключевая часть Web Components и позволяет создавать полностью изолированные компоненты.

5️⃣ Scoped CSS
Некоторые современные фреймворки и инструменты, такие как Vue.js, предлагают возможность использования scoped стилей, где CSS применяется исключительно к компоненту, в котором он объявлен, без воздействия на остальную часть приложения.

6️⃣ Использование IFRAME
Размещение контента внутри <iframe> позволяет полностью изолировать его стили от остальной части страницы. Это крайний способ, который может быть полезен для встраивания стороннего контента, но он приносит дополнительную сложность и ограничения.

7️⃣ CSS-переменные для темизации
Сами по себе не обеспечивают изоляцию, их можно использовать для создания гибкой системы тем, которая позволяет контролировать влияние глобальных стилей на компоненты и облегчает поддержание стилевой согласованности.

Изоляция стилей — важный аспект разработки надёжных и масштабируемых веб-приложений. Выбор метода зависит от конкретных требований проекта, технологического стека и предпочтений разработчика. Использование современных инструментов и подходов, таких как CSS-модули, CSS-in-JS и Web Components, может значительно упростить управление стилями и повысить качество конечного продукта.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие существуют уязвимости ?
Спросят с вероятностью 7%

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

1️⃣ SQL-инъекции (SQL Injection): Происходят, когда злоумышленник может внедрить или "инъецировать" вредоносный SQL-код в запрос, который изменяет стандартное выполнение запроса к базе данных. Это может привести к несанкционированному доступу к данным, их изменению или удалению.

2️⃣ Cross-Site Scripting (XSS): Позволяет злоумышленникам внедрять клиентский скрипт в веб-страницы, просматриваемые другими пользователями. Это может привести к краже cookie-файлов, сессий, персональных данных и других атак на клиентскую сторону.

3️⃣ Cross-Site Request Forgery (CSRF): Заставляет пользователя выполнить нежелательные действия на веб-сайте, на котором он в настоящее время аутентифицирован, например, отправить запрос на смену пароля или выполнить платеж от имени пользователя.

4️⃣ Разглашение информации: Происходит, когда веб-приложение раскрывает чувствительную информацию, такую как технические детали своей работы, структуры баз данных или креденциалы, что может быть использовано злоумышленниками.

5️⃣ Небезопасная десериализация: Это уязвимость, при которой недостаточно проверенные или небезопасные данные могут быть десериализованы и выполнены как код, что может привести к удаленному выполнению кода, внедрению вредоносных скриптов или атакам отказа в обслуживании.

6️⃣ Использование компонентов с известными уязвимостями: Включает использование сторонних библиотек и зависимостей, которые содержат известные уязвимости. Это может подвергнуть приложение риску атак.

7️⃣ Недостатки в управлении сессиями: Уязвимости, связанные с управлением сессиями и аутентификацией, могут позволить злоумышленникам перехватывать или подделывать сессии пользователей, получать несанкционированный доступ к учетным записям.

8️⃣ Security Misconfiguration (Неправильная настройка безопасности): Это самый широкий класс уязвимостей, который включает в себя неправильно настроенные разрешения, стандартные учетные записи с известными паролями, открытые облачные хранилища и другие ошибки в конфигурации.

9️⃣ Недостатки в контроле доступа: Происходят, когда пользователи могут получить доступ к функциям или данным, к которым у них не должно быть доступа. Это может включать доступ к данным других пользователей, выполнение функций администратора и т.д.

🔟 Внедрение вредоносного кода (Malware Upload): Уязвимости, позволяющие злоумышленникам загружать и выполнять вредоносный код на сервере или у клиентов.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие проблемы решает react ?
Спросят с вероятностью 10%

React — это популярная библиотека для разработки пользовательских интерфейсов. Она предлагает разработчикам эффективный и гибкий способ создавать интерактивные веб-приложения. React решает множество задач и проблем, с которыми разработчики сталкиваются при построении современных веб-приложений:

1️⃣ Создание динамических интерфейсов

Позволяет легко создавать динамические веб-интерфейсы с использованием компонентов. Благодаря декларативному подходу и использованию JSX (синтаксис, похожий на HTML внутри JavaScript), разработка становится более интуитивно понятной и менее подверженной ошибкам.

2️⃣ Управление состоянием компонентов

Предоставляет механизмы для управления состоянием (state) внутри компонентов, что позволяет разработчикам легко отслеживать и управлять изменениями данных в приложении. Это упрощает создание интерактивных интерфейсов, таких как формы, фильтры, навигация и т.д.

3️⃣ Оптимизация производительности

Использует виртуальный DOM (Virtual DOM), что позволяет оптимизировать обновления в реальном DOM. Это снижает затраты производительности при обновлении пользовательского интерфейса, особенно при работе с большими объемами данных и сложными интерфейсами.

4️⃣ Компонентный подход

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

5️⃣ Универсальность и изоморфизм

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

6️⃣ Мощный экосистема и сообщество

Обладает большим и активным сообществом разработчиков, а также мощной экосистемой инструментов и библиотек, таких как Redux для управления состоянием приложения, React Router для навигации, Next.js для серверного рендеринга и многих других.

7️⃣ Гибкость и интеграция

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

React предлагает разработчикам удобные инструменты для создания эффективных, масштабируемых и поддерживаемых веб-приложений, решая множество проблем современной веб-разработки, начиная от управления состоянием и заканчивая производительностью интерфейсов.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что такое замыкание ?
Спросят с вероятностью 7%

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

Как они работают

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

function создатьФункциюПриветствия(имя) {
  var приветствие = 'Привет';
  return function() {
    console.log(приветствие + ', ' + имя);
  };
}

var приветАлиса = создатьФункциюПриветствия('Алиса');
приветАлиса(); // Выводит: "Привет, Алиса"

В этом примере приветАлиса является функцией, замыкающей в себе переменные приветствие и имя из области видимости функции создатьФункциюПриветствия, даже после того, как выполнение функции создатьФункциюПриветствия завершено.

Зачем нужны замыкания

1️⃣ Инкапсуляция данных: Позволяют скрывать переменные внутри функции, делая их недоступными извне, что способствует созданию приватных переменных и методов.

2️⃣ Создание функций с привязанными параметрами: Могут использоваться для создания новых функций на основе существующих, но с заранее заданными или "зафиксированными" аргументами.

3️⃣ Работа с асинхронным кодом: Часто используются в обработчиках событий и колбэках для доступа к переменным из внешней области видимости.

4️⃣ Модульность и управление состоянием: Позволяют создавать модули и фабрики функций, которые могут иметь собственное внутреннее состояние, недоступное напрямую извне.

Важные моменты:

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

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Что делает box-sizing: border-box ?
Спросят с вероятностью 7%

Свойство box-sizing определяет, как будут рассчитываться размеры элемента: включая ли в эти размеры внутренние отступы (padding) и границы (border) или нет. Данное значение изменяет традиционное поведение расчета ширины и высоты элемента.

Как работает

Когда вы устанавливаете для элемента box-sizing: border-box;, ширина и высота элемента начинают включать в себя внутренние отступы и толщину границ. Это означает, что фактический размер элемента (как он отображается на странице) будет соответствовать заданным ширине (width) и высоте (height), независимо от толщины границ и размеров внутренних отступов.

Без border-box

По умолчанию, если не указано значение, используется значение content-box. Это означает, что указанные ширина и высота применяются только к контентной области элемента. Внутренние отступы и границы добавляются к этим размерам, увеличивая общий размер элемента. Например:

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  /* box-sizing: content-box; по умолчанию */
}

Здесь фактический размер элемента будет 350px по ширине (300px контент + 40px отступы + 10px границы) и 250px по высоте.

C border-box

Если вы установите такое значение, размеры элемента будут включать в себя и внутренние отступы, и границы:

.box {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
}

В этом случае фактический размер элемента останется 300px по ширине и 200px по высоте, несмотря на наличие внутренних отступов и границ. Это делает расчет размеров более предсказуемым и упрощает верстку, особенно при работе с гибкими и адаптивными макетами.

Зачем использовать

Использование border-box упрощает работу с макетами, так как разработчику не нужно постоянно пересчитывать размеры элементов при изменении внутренних отступов или толщины границ. Это делает код более чистым и понятным, а процесс разработки — более быстрым и эффективным.

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

В чем разница == и === ?
Спросят с вероятностью 20%

Операторы == (равно) и === (строго равно) используются для сравнения значений, но работают по-разному, что важно понимать для написания надёжного и предсказуемого кода.

Оператор == (равно)
Сравнивает значения двух переменных, но перед сравнением производит приведение типов, если переменные относятся к разным типам. Это означает, что если вы сравниваете число с строкой, JavaScript попытается преобразовать строку в число, а затем сравнить эти два значения. Этот процесс может привести к неинтуитивным результатам.

Примеры:

'2' == 2 // true, так как строка '2' преобразуется в число 2 перед сравнением
0 == false // true, так как 0 и false считаются эквивалентными
null == undefined // true, специальное правило языка

Оператор ===(строго равно)
В отличие от ==, он сравнивает и значения, и типы без приведения типов. Если типы различаются, оператор немедленно возвращает false, не пытаясь преобразовать один тип в другой. Это делает сравнение более строгим и предсказуемым.

Примеры:

'2' === 2 // false, так как типы различаются
0 === false // false, разные типы: число и булево значение
null === undefined // false, разные типы

Почему важно знать разницу

Понимание разницы между == и === критически важно, чтобы избежать ошибок, связанных с неожиданным приведением типов. Использование === помогает гарантировать, что сравниваемые значения совпадают по типу и значению, что является более безопасным подходом в большинстве случаев. В целом, рекомендуется использовать === для сравнения значений, чтобы код был более читабельным и предсказуемым.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Какие есть компоненты ?
Спросят с вероятностью 7%

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

Типы:

1️⃣ Функциональные компоненты:
- Самый простой способ определить компонент.
- Это JavaScript-функции, которые принимают пропсы (свойства) в качестве аргумента и возвращают элемент, описывающий, что должно отображаться на экране.
- С появлением хуков, функциональные компоненты получили возможность использовать состояние и другие возможности React, аналогичные классовым компонентам.

      function Welcome(props) {
     return <h1>Привет, {props.name}</h1>;
   }

2️⃣ Классовые компоненты:
- Перед введением хуков классовые компоненты были единственным способом использования состояния и жизненного цикла компонентов .
- Они определяются путем расширения React.Component и требуют метода render(), который возвращает элемент React.

      class Welcome extends React.Component {
     render() {
       return <h1>Привет, {this.props.name}</h1>;
     }
   }

Пропсы и состояние

- Пропсы (Props): Коротко для "свойств", пропсы передаются от родительских компонентов к дочерним. Они неизменяемы в пределах компонента, что означает, что дочерний компонент не может изменять пропсы, полученные от родителя.

- Состояние (State): Состояние позволяет компонентам реагировать на ввод пользователя, серверные запросы и любые другие действия, сохраняя и изменяя данные во времени. В отличие от пропсов, состояние управляется и изменяется внутри самого компонента.

Жизненный цикл компонента

Классовые компоненты имеют несколько "жизненных циклов" — методов, которые автоматически вызываются в разные моменты жизни компонента, такие как монтирование (компонент вставляется в DOM), обновление (компонент реагирует на изменения пропсов или состояния) и размонтирование (компонент удаляется из DOM). Хуки позволяют использовать аналогичные возможности в функциональных компонентах.

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Зачем появились promise ?
Спросят с вероятностью 7%

Промисы (Promises) были введены как решение проблемы "callback hell" (также известного как "pyramid of doom"), когда асинхронный код становится сложным для понимания, поддержки и расширения из-за глубокой вложенности обратных вызовов (callbacks). Они предоставляют более удобный и гибкий способ организации асинхронного кода, делая его более читаемым и легким в управлении.

Основные причины появления промисов:

1️⃣ Улучшение читаемости асинхронного кода: Позволяют писать асинхронный код, который выглядит более последовательным и легко читается, по сравнению с вложенными обратными вызовами.

2️⃣ Упрощение обработки ошибок: Вместо того, чтобы обрабатывать ошибки в каждом обратном вызове, они позволяют использовать единую конструкцию catch для перехвата ошибок в любом месте цепочки промисов.

3️⃣ Синхронизация асинхронных операций: Упрощают выполнение нескольких асинхронных операций параллельно и обработку их результатов с помощью методов Promise.all, Promise.race, Promise.allSettled и Promise.any.

4️⃣ Стандартизация асинхронного кода: Стандартизируют способ работы с асинхронностью, предоставляя универсальный интерфейс для различных асинхронных операций, таких как работа с сетевыми запросами, таймерами и т.д.

Как работают промисы

Может находиться в одном из трех состояний:
- Ожидание (pending): начальное состояние, не выполнено и не отклонено.
- Выполнено (fulfilled): операция завершена успешно.
- Отклонено (rejected): операция завершена с ошибкой.

Когда он переходит из состояния ожидания в состояние выполнено или отклонено, он вызывает соответствующие обработчики, добавленные с помощью методов then, catch и finally. Эти методы возвращают новый промис, позволяя строить цепочки промисов.

Пример:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("данные получены"), 1000);
});

promise
  .then(result => {
    console.log(result); // "данные получены"
    return result + " обработаны";
  })
  .then(result => {
    console.log(result); // "данные получены обработаны"
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log("Промис завершил выполнение");
  });

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

➡️ Примеры ответов
➡️ Список всех вопросов на Frontend Developer

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые