Frontend | Вопросы собесов
19.3K subscribers
32 photos
1 video
924 links
Download Telegram
Что такое 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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍49🔥43👾2
Что такое операторы сравнения?
Спросят с вероятностью 10%

Операторы сравнения используются для сравнения двух значений и возвращают логическое значение: true (истина), если сравнение верно, и false (ложь), если нет. Они играют ключевую роль в управлении потоком выполнения программы, позволяя выполнить определённый код в зависимости от результатов сравнения.

Виды:

- Равенство (==): Проверяет равенство двух значений после приведения их к одному типу. Например, 5 == '5' вернёт true.

- Не равно (!=): Проверяет, не равны ли два значения после приведения их к одному типу. Например, 5 != '5' вернёт false.

- Строгое равенство (===): Проверяет равенство двух значений без приведения типов, то есть значения должны быть одного типа. Например, 5 === '5' вернёт false.

- Строгое не равенство (!==): Проверяет, не равны ли два значения без приведения типов. Например, 5 !== '5' вернёт true.

- Больше (>): Проверяет, больше ли первое значение, чем второе. Например, 5 > 3 вернёт true.

- Больше или равно (>=): Проверяет, больше ли первое значение или равно второму. Например, 5 >= 5 вернёт true.

- Меньше (&lt;): Проверяет, меньше ли первое значение, чем второе. Например, 3 < 5 вернёт true.

- Меньше или равно (&lt;=): Проверяет, меньше ли первое значение или равно второму. Например, 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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍234🔥4👾1
Что такое чистая функция ?
Спросят с вероятностью 10%

Чистая функция — это концепция, особенно популярная в функциональном программировании, которая описывает функцию, обладающую следующими характеристиками:

1️⃣ Детерминированность: Возвращаемое значение зависит только от её входных параметров и не изменяется при повторных вызовах с теми же параметрами. Это означает, что функция всегда возвращает один и тот же результат при одинаковых входных данных, не обращаясь при этом к внешним состояниям или данным.

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

Пример:
function add(a, b) {
return a + b;
}

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

Пример нечистой функции:
let counter = 0;

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


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

Преимущества чистых функций:

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

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

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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍313🔥1😁1
В чём отличие 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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍50🔥51
Какие основные используемые теги в html есть ?
Спросят с вероятностью 10%

HTML (HyperText Markup Language) использует множество тегов для структурирования веб-страниц. Вот некоторые из наиболее часто используемых тегов и их назначение:

Структурные и семантические:

- <!DOCTYPE>: Определяет тип документа и версию HTML.
- <html>: Корневой элемент веб-страницы.
- <head>: Содержит метаинформацию о документе, такую как заголовок, ссылки на стили и скрипты.
- <title>: Задаёт заголовок веб-страницы, отображаемый в заголовке вкладки браузера.
- <body>: Содержит всё содержимое веб-страницы, видимое пользователю.
- <header>: Определяет заголовок веб-страницы или раздела.
- <footer>: Определяет подвал веб-страницы или раздела.
- <nav>: Определяет навигационные ссылки.
- <article>: Определяет независимый контент.
-<section>: Определяет раздел в документе.
- <aside>: Определяет контент, отделённый от основного содержимого (как правило, боковые панели).

Текстовые и форматирующие:

- <h1> - <h6>: Заголовки разного уровня, где <h1> — самый важный заголовок.
- <p>: Определяет абзац.
- <br>: Перенос строки.
- : Выделяет текст жирным шрифтом.
- : Выделяет текст курсивом.
- : Цитата.
- <ol>: Нумерованный список.
- <ul>: Маркированный список.
- <li>: Элемент списка.
- : Гиперссылка.
- <img>: Изображение.
- <figure> и <figcaption>: Используются для вставки изображений или иллюстраций с подписями.

Для работы с формами:

- <form>: Определяет форму для сбора пользовательского ввода.
- <input>: Поле ввода.
- <textarea>: Многострочное поле ввода текста.
- <button>: Кнопка.
- <select> и <option>: Выпадающий список и его элементы.
-<label>: Метка для элемента формы.

Для работы с таблицами:

- <table>: Таблица.
- <tr>: Строка таблицы.
- <td>: Ячейка таблицы.
- <th>: Заголовочная ячейка таблицы.
- <thead>, <tbody>, <tfoot>: Группируют заголовки, основное тело и подвал таблицы соответственно.

Специальные и мультимедийные:

- <video> и <audio>: Для встраивания видео и аудио контента.
- <canvas>: Используется для рисования графики с помощью JavaScript.
- <svg>: Для встраивания векторной графики.

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

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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍354🔥2👾1
Как работает наследование ?
Спросят с вероятностью 10%

Наследование — это механизм, с помощью которого элементы веб-страницы могут наследовать стилевые свойства от своих родительских элементов. Не все свойства наследуются, но многие из тех, которые влияют на текст, такие как color, font-family, font-size, являются такими. Это значит, что если вы установите одно из этих свойств для элемента, то оно автоматически применится ко всем его дочерним элементам, если только для них явно не заданы свои значения этих свойств.

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

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

Пример:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue; /* Все текстовые элементы внутри body будут синими, если только не задано иное /
font-family: Arial, sans-serif; / Все текстовые элементы наследуют этот шрифт */
}
</style>
</head>
<body>

<p>Этот текст будет синим и Arial, потому что он наследует стили от body.</p>

<div style="color: green;">
<p>Этот текст будет зеленым и Arial, потому что цвет переопределен на зеленый, а шрифт наследуется от body.</p>
</div>

</body>
</html>


Способы контроля

Явное задание свойств: Вы можете явно задать свойства для элемента, переопределив наследуемые значения.
Использование inherit: Значение inherit можно присвоить любому CSS-свойству, чтобы указать элементу наследовать значение этого свойства от своего родителя, даже если это свойство обычно не наследуется.
Использование initial: Сбрасывает свойство к его значению по умолчанию, игнорируя наследование.
Использование unset: Действует как inherit, если свойство наследуемое, и как initial в противном случае.

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

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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍42
Что такое семантическое вресионирование ?
Спросят с вероятностью 17%

Семантическое версионирование (Semantic Versioning, часто сокращается как SemVer) — это система управления версиями, которая стремится быть как можно более предсказуемой и прозрачной. Она основана на трех цифрах, разделенных точками, например, 1.4.8, где каждая из цифр обозначает определенный тип изменений в ПО:

1️⃣ Мажорная версия (Major version) — первая цифра. Увеличивается, когда вносятся изменения, совместимые только в одну сторону. Это означает, что новая версия может содержать изменения, которые не будут работать с предыдущими версиями программного обеспечения без модификации кода. Например, удаление функций или изменение их поведения так, что старый код перестает работать.

2️⃣ Минорная версия (Minor version) — вторая цифра. Увеличивается, когда добавляются новые функциональности, которые не нарушают обратную совместимость с более старыми версиями. Это означает, что вы можете обновиться до этой версии без изменений в существующем коде, и все будет работать.

3️⃣ Патч-версия (Patch version) — третья цифра. Увеличивается при внесении исправлений ошибок, которые не влияют на API и не добавляют новых функций, сохраняя обратную совместимость. Эти изменения обычно безопасны и рекомендуется обновляться как можно скорее.

Эта система также может включать дополнительные обозначения для пре-релизов (например, 1.0.0-alpha.1) и сборок (например, 1.0.0+20130313144700), которые предоставляют дополнительную информацию о версии.

Преимущества:

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

Пример:
// Версия 1.0.0: Исходная версия вашей библиотеки
// Версия 1.1.0: Добавление новой функции, совместимой с предыдущими версиями
// Версия 1.1.1: Исправление ошибки в новой функции, не влияющее на существующий API
// Версия 2.0.0: Удаление старой функции, что делает эту версию несовместимой с кодом, написанным для версии 1.x.x


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

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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍62🔥104
Что означает слово каскад ?
Спросят с вероятность 10%

Слово "каскад" относится к системе приоритетов, которая определяет, какие стили будут применены к HTML-элементам в случае конфликта. Эта система позволяет управлять стилем документа на нескольких уровнях, начиная от браузерных стилей по умолчанию до пользовательских стилей.

Основные аспекты каскадности в CSS:

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

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

3️⃣ Важность (Importance): Свойство, объявленное как !important, имеет наивысший приоритет независимо от специфичности селектора. Использование !important следует минимизировать, поскольку это может затруднить дальнейшее управление стилями.

4️⃣ Порядок объявления: Если два стиля имеют одинаковую специфичность, то применяется стиль, который объявлен последним в коде. Это означает, что порядок, в котором стили объявлены в CSS-файле или в документе, также влияет на итоговый вид элемента.

Пример:
/* Браузерный стиль по умолчанию /
p {
color: black;
}

/ Стиль пользователя /
p {
color: blue;
}

/ Стиль автора /
p {
color: green;
}

/ Специфичный селектор имеет больший приоритет /
.special-p {
color: red;
}

/ Использование !important */
p {
color: purple !important;
}


В этом примере, несмотря на то что для параграфов (p) заданы разные цвета, применится цвет purple, так как он объявлен с использованием !important. Однако для параграфа с классом .special-p цвет будет red, поскольку специфичность селектора .special-p выше, чем у простого тегового селектора p, и !important не влияет на селекторы с более высокой специфичностью, если они объявлены после.

Каскад в CSS позволяет разработчикам эффективно управлять стилями, определяя, какие правила будут применены к элементам в случае конфликтов. Понимание механизма каскадности помогает создавать предсказуемые и управляемые стили для веб-страниц.

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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21👍122🤔2
Что такое map и set ?
Спросят с вероятностью 10%

Map и Set — это структуры данных, введённые в ES6 (ECMAScript 2015), которые расширяют возможности стандартных объектов и массивов, предоставляя более специализированные и гибкие способы хранения данных.

Map

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

Основные методы:
- new Map() — создаёт новую коллекцию.
- map.set(key, value) — устанавливает значение value для ключа key.
- map.get(key) — возвращает значение, ассоциированное с ключом key.
- map.has(key) — возвращает true, если key существует в коллекции.
- map.delete(key) — удаляет элемент по ключу key.
- map.clear() — удаляет все элементы из коллекции.
- map.size — возвращает количество элементов в коллекции.
let map = new Map();
map.set('1', 'str1'); // строка в качестве ключа
map.set(1, 'num1'); // цифра как ключ
map.set(true, 'bool1'); // булево значение как ключ

console.log(map.get(1)); // num1
console.log(map.get('1')); // str1
console.log(map.size); // 3


Set

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

Основные методы:
- new Set() — создаёт новую коллекцию.
- set.add(value) — добавляет значение value в коллекцию, если его там ещё нет.
- set.delete(value) — удаляет значение value из коллекции.
- set.has(value) — возвращает true, если значение value присутствует в коллекции.
- set.clear() — удаляет все элементы из коллекции.
- set.size — возвращает количество элементов в коллекции.
let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// посещения, некоторые пользователи заходят многократно
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

console.log(set.size); // 3

for (let user of set) {
console.log(user.name); // John, Pete, Mary
}


Map и Set представляют собой мощные структуры данных, которые делают код более чистым и читаемым, а также предоставляют удобные методы для работы с данными. Map идеально подходит для хранения пар ключ/значение с уникальными ключами, в то время как Set используется для хранения уникальных значений.

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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍472🔥2🤯1
Каким способом можно объявить переменные, в чем отличия ?
Спросят с вероятностью 17%

Переменные можно объявить тремя основными способами: используя ключевые слова var, let и const. Рассмотрим каждый из них подробнее:

1️⃣ var:

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

2️⃣ let:

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

3️⃣ const:

- Область видимости: Как и let, имеет блочную область видимости.
- Поднятие (Hoisting): Поднимается так же, как и let, с теми же ограничениями доступа до объявления.
- Перезаписываемость: Нельзя изменить значение. Однако, если переменная ссылается на объект или массив, то можно изменить содержимое объекта или массива, но не саму ссылку.
- Необходима инициализация: При объявлении переменной с const необходимо сразу же инициализировать её значением.
// Использование var
var x = 5;
console.log(x); // 5
var x = 10; // Переопределение возможно
console.log(x); // 10

// Использование let
let y = "hello";
console.log(y); // hello
y = "world"; // Переопределение значения допустимо
console.log(y); // world
// let y = "test"; // Ошибка: Identifier 'y' has already been declared

// Использование const
const z = { message: "constant" };
console.log(z.message); // constant
z.message = "changed"; // Изменение свойства объекта допустимо
console.log(z.message); // changed
// const z = "new"; // Ошибка: Identifier 'z' has already been declared


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

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

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍36🔥52
Какой этап Event Loop отвечает за выполнение микрозадач, таких как промисы?
Anonymous Quiz
4%
Timer Phase
11%
I/O Callbacks
3%
Idle, Prepare
82%
Microtask Queue
👍24
Что такое git-flow ?
Спросят с вероятностью 10%

Git-flow — это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы.

Основные ветки:

- master: Содержит стабильную версию кода, готовую к выпуску (release).
- develop: Основная ветка для разработки, содержит последние изменения кода для следующего выпуска.

Вспомогательные ветки:

- feature: Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop.
- release: Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop.
- hotfix: Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop.

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

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

Недостатки:

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

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

👉 Можно посмотреть примеры как отвечают люди на этот вопрос, или перейти к списку 1400 вопросов на Frontend разработчика. Ставь 👍 если нравится контент

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍192
Что такое http ?
Спросят с вероятностью 10%

HTTP (HyperText Transfer Protocol) — это протокол передачи гипертекста, основной протокол для передачи данных. Он используется для загрузки веб-страниц с сервера на клиентский браузер, а также для отправки данных от клиента к серверу. Является протоколом прикладного уровня модели OSI (Open Systems Interconnection) и работает поверх протокола TCP/IP.

Основные характеристики HTTP:

Безсостоянийность (Stateless): Не сохраняет информацию о состоянии между различными запросами. Каждый запрос обрабатывается независимо, без знания предыдущих запросов. Это означает, что информация о состоянии должна передаваться отдельно, если она нужна для последовательных запросов.
Простота: Предоставляет простой синтаксис для запросов и ответов, что облегчает разработку веб-приложений.
Расширяемость: Позволяет легко добавлять новые методы и заголовки для запросов и ответов, что делает его гибким и адаптируемым к новым требованиям и технологиям.

Как работает HTTP:

1️⃣ Клиент (обычно веб-браузер) отправляет HTTP-запрос к серверу. Запрос может быть сделан при вводе URL в адресную строку браузера, при нажатии на ссылку на веб-странице или при отправке формы. Запрос включает в себя метод (например, GET для запроса данных или POST для отправки данных), URL, версию протокола HTTP, необходимые заголовки и тело запроса (для методов, передающих данные, таких как POST).
2️⃣ Сервер обрабатывает полученный запрос и отправляет обратно HTTP-ответ, который включает в себя статус выполнения (код состояния), заголовки ответа и тело ответа (обычно HTML-документ, изображение, данные JSON и т.д.).
3️⃣ Клиент обрабатывает ответ от сервера. Например, браузер может отобразить HTML-страницу или обновить часть текущей страницы, если это был AJAX-запрос.

Методы HTTP:

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

- GET: Запрос содержимого указанного ресурса.
- POST: Отправка данных на сервер для создания нового ресурса.
- PUT: Обновление существующего ресурса данными из запроса.
- DELETE: Удаление указанного ресурса.
- HEAD: Запрос заголовков для указанного ресурса.
- OPTIONS: Запрос поддерживаемых методов для ресурса.

Версии HTTP:

Существует несколько версий, включая 1.0, 1.1, и 2. Каждая новая версия протокола вносит улучшения в эффективность, безопасность и скорость передачи данных.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍501
Какой метод Promise вызывается автоматически при использовании async/await в случае исключения?
Anonymous Quiz
16%
Promise.resolve()
51%
Promise.reject()
26%
Promise.finally()
7%
Promise.all()
👍12🤔8😁2🤯1
Какие бывают хуки ?
Спросят с вероятностью 17%

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

Основные хуки:

1️⃣ useState
Позволяет добавлять состояние к функциональным компонентам.
  const [count, setCount] = useState(0);


2️⃣ useEffect
Даёт возможность выполнять побочные эффекты в компоненте, такие как обращения к API, подписки или таймеры.
 useEffect(() => {
document.title = Вы нажали ${count} раз;
}, [count]); // Зависимость от состояния count


3️⃣ useContext
Даёт возможность получить текущее значение контекста, что упрощает доступ к данным в глубоко вложенных компонентах без их явной передачи через пропсы.
const value = useContext(MyContext);


Дополнительные хуки:

1️⃣ useReducer
Альтернатива useState для более сложного управления состоянием, использует концепцию редьюсера для обработки сложных изменений состояния.
     const [state, dispatch] = useReducer(reducer, initialState);


2️⃣ useCallback
Возвращает мемоизированный колбэк, который изменяется только если изменяются зависимости.
     const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);


3️⃣ useMemo
Возвращает мемоизированное значение, пересчитывается только при изменении зависимостей.
     const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);


4️⃣ useRef
Возвращает изменяемый ref-объект, который можно использовать для доступа к DOM-элементам или хранения любого мутируемого значения.
     const myRef = useRef(initialValue);


5️⃣ useImperativeHandle
Используется для передачи родительским компонентам инстанса значения из дочерних компонентов, обычно для управления фокусом, выделением текста или анимацией.
     useImperativeHandle(ref, () => ({
focus: () => {
myTextInput.current.focus();
}
}));


6️⃣ useLayoutEffect
Похож на useEffect, но выполняется синхронно после всех изменений DOM. Используется для чтения макета из DOM и реагирования на эти изменения синхронно.
     useLayoutEffect(() => {
// Измерения или взаимодействия с DOM
}, [dependencies]);


7️⃣ useDebugValue
Может использоваться для отображения метки для пользовательских хуков в React DevTools.
useDebugValue(value);


Основные хуки (useState, useEffect, useContext) позволяют добавлять состояние, работать с побочными эффектами и использовать контекст в функциональных компонентах

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос или перейти к Списку вопросов на Frontend Developer. Ставь 👍 если нравится контент

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍49🔥6🤯31
Какой тип данных в JavaScript может быть как примитивным, так и объектным?
Anonymous Quiz
24%
String
7%
Number
42%
Symbol
27%
Function
🤔88👍72👀2
Что такое iife ?
Спросят с вероятностью 10%

IIFE (Immediately Invoked Function Expression) — это шаблон проектирования, который представляет собой функцию, немедленно вызываемую после её определения. Это позволяет создавать новую область видимости и изолировать переменные внутри функции от глобального объекта, тем самым предотвращая загрязнение глобального пространства имен.

Структура:
(function() {
// Тело функции
})();


Или с использованием стрелочной функции:
(() => {
// Тело функции
})();


Пример:
(function() {
var localVar = 'Я локальная переменная';
console.log(localVar); // Вывод: Я локальная переменная
})();

console.log(typeof localVar); // Вывод: undefined


В этом примере переменная localVar определена внутри него и не доступна за её пределами, что демонстрирует изоляцию переменных от глобального пространства имен.

Почему это полезно:

1️⃣ Изоляция: Переменные, объявленные внутри этого шаблона, не засоряют глобальное пространство имен и не конфликтуют с другими переменными с тем же именем.
2️⃣ Приватность: Создаёт приватную область видимости для переменных и функций, что позволяет скрыть реализацию деталей и сохранить данные и функции недоступными извне.
3️⃣ Немедленное выполнение: Код внутри него выполняется немедленно, что удобно для инициализации функциональности или создания модулей.
4️⃣ Управление глобальным объектом: Может использоваться для передачи глобального объекта (например, window в браузерах) в качестве параметра, что обеспечивает удобный доступ к глобальным переменным и функциям без прямого обращения к глобальному объекту.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍364🔥3
Что приоритетнее использовать ts или js ?
Спросят с вероятностью 10%

Выбор между TypeScript (TS) и JavaScript (JS) зависит от конкретных требований, предпочтений и специфики задачи. Оба языка имеют свои преимущества и недостатки, и решение о том, какой из них использовать, следует принимать, исходя из нескольких ключевых факторов.

TypeScript

Преимущества:
Статическая типизация: Предоставляет строгую типизацию, что помогает обнаруживать ошибки на этапе компиляции, ещё до выполнения кода. Это может значительно уменьшить количество ошибок в продакшене.
Поддержка последних возможностей JavaScript: Компилируется в чистый JS, что позволяет использовать последние возможности языка, не беспокоясь о совместимости с браузерами.
Инструменты разработки: Улучшенная поддержка в IDE для автодополнения кода, рефакторинга и навигации по проекту.
Масштабируемость: Лучше подходит для больших проектов благодаря возможности определения интерфейсов, типов и обобщений.

Недостатки:
Кривая обучения: Необходимо время на изучение синтаксиса и особенностейt.
Время на настройку: Настройка проекта на нем может потребовать дополнительного времени и усилий, особенно в существующих больших проектах.
Скорость сборки: Проекты на нем могут компилироваться дольше, чем чистый JS, из-за процесса типизации.

JavaScript

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

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

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

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые
Please open Telegram to view this post
VIEW IN TELEGRAM
👍397🤔3🎉1