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

الذهاب إلى القناة على Telegram

Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky

إظهار المزيد

الشبكة:easyoffer روسيا36 939 التكنولوجيات والتطبيقات7 327...

📈 نظرة تحليلية على قناة تيليجرام Frontend | Вопросы собесов

تُعد قناة Frontend | Вопросы собесов (@easy_javascript_ru) في القطاع اللغوي الروسية لاعباً نشطاً. يضم المجتمع حالياً 18 304 مشتركاً، محتلاً المرتبة 7 327 في فئة التكنولوجيات والتطبيقات والمرتبة 36 939 في منطقة روسيا.

📊 مؤشرات الجمهور والحراك

منذ تأسيسه في невідомо، حقق المشروع نمواً سريعاً وجمع 18 304 مشتركاً.

بحسب آخر البيانات بتاريخ 10 يونيو, 2026، تحافظ القناة على نشاط مستقر. خلال آخر 30 يوماً تغيّر عدد الأعضاء بمقدار -121، وفي آخر 24 ساعة بمقدار -7، مع بقاء الوصول العام مرتفعاً.

حالة التحقق: غير موثّقة
معدل التفاعل (ER): يبلغ متوسط تفاعل الجمهور 9.43‎%. وخلال أول 24 ساعة من النشر يحصد المحتوى عادةً 5.83‎% من ردود الفعل نسبةً إلى إجمالي المشتركين.
وصول المنشورات: يحصل كل منشور على متوسط 1 727 مشاهدة. وخلال اليوم الأول يجمع عادةً 1 067 مشاهدة.
التفاعلات والاستجابة: يتفاعل الجمهور بانتظام؛ متوسط التفاعلات لكل منشور يبلغ 9.
الاهتمامات الموضوعية: يركز المحتوى على مواضيع رئيسية مثل ставь, браузер, html, border, flex.

📝 الوصف وسياسة المحتوى

يصف المؤلف القناة بأنها مساحة للتعبير عن الآراء الذاتية:
“Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky”

بفضل وتيرة التحديث المرتفعة (أحدث البيانات بتاريخ 11 يونيو, 2026) تحافظ القناة على حداثتها ومستوى وصول مرتفع. وتُظهر التحليلات تفاعلاً نشطاً من الجمهور، ما يجعلها نقطة تأثير مهمة ضمن فئة التكنولوجيات والتطبيقات.

18 304

المشتركون

-724 ساعات

-507 أيام

-12130 أيام

1 727

عرض المشاهدات

~ 1 06724 ساعات

~ 1 25748 ساعات

9.43%

معدل المشاركة

~ 1

المشاركات في اليوم

Ads index

beta

أرشيف المشاركات

18 304

🤔 Для чего используются ключи в JSX? Ключи помогают React отслеживать элементы списка при рендере и обновлении. Они позволяют эффективно сравнивать текущую и новую версии списка и минимизировать DOM-операции. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 304

🤔 Расскажи про оптимизацию рендеринга в react? Это процесс снижения количества лишних перерисовок компонентов, что улучшает производительность приложения. React повторно рендерит компоненты, когда их состояние (state) или свойства (props) изменяются. Однако часто это приводит к ненужным рендерам, которые можно избежать. 🚩Почему важна оптимизация рендеринга? 🟠Производительность Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM. 🟠Экономия ресурсов Избегая лишних рендеров, приложение работает быстрее, а пользовательский интерфейс становится более отзывчивым. 🟠Лучший UX Плавная работа интерфейса критична для сложных приложений с большим количеством данных. 🚩Основные подходы к оптимизации рендеринга 🟠Мемоизация компонентов React предоставляет утилиту React.memo, чтобы предотвращать ререндеринг компонента, если его props не изменились.

import React from 'react';

const MyComponent = React.memo(({ count }) => {
  console.log('Рендер компонента');
  return <div>Счётчик: {count}</div>;
});

// Использование
export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <MyComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

🟠Использование `useMemo` и `useCallback` Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ number }) {
  const calculatedValue = useMemo(() => {
    console.log('Выполняются сложные вычисления...');
    return number ** 2;
  }, [number]); // Пересчитывается только если `number` изменился

  return <div>Результат: {calculatedValue}</div>;
}

Пример useCallback

import React, { useCallback, useState } from 'react';

const Child = React.memo(({ onClick }) => {
  console.log('Рендер дочернего компонента');
  return <button onClick={onClick}>Кликни меня</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Кнопка нажата');
  }, []); // Создаётся одна и та же функция между рендерами

  return (
    <div>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Увеличить {count}</button>
    </div>
  );
}

🟠Разделение кода и ленивый рендеринг Использование React.lazy и Suspense позволяет загружать компоненты только тогда, когда они необходимы.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

🟠Проверка зависимости в `useEffect` Избегайте запуска побочных эффектов, если зависимости не изменились.

React.useEffect(() => {
  console.log('Эффект сработал!');
}, [/* следите только за нужными зависимостями */]);

🟠Избегайте анонимных функций и объектов в `props` Передача новых объектов и функций через props вызывает лишние рендеры.

<ChildComponent data={{ key: 'value' }} />

Лучше так

const data = { key: 'value' };
<ChildComponent data={data} />;

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

{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

Ставь 👍 и забирай 📚 Базу знаний

18 304

🤔 Как следует оформлять страницу, в которой контент может быть на разных языках? - Указывать атрибут lang в <html> и в текстовых блоках; - Использовать hreflang в <link> и <a> для указания языковых версий; - Хранить переводы отдельно и подгружать в зависимости от языка (через i18n). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 304

🤔 К какой категории относятся промисы? Промисы (Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами). Категория: Асинхронные программные конструкции (Async Objects / Async Patterns) Тип: Объект (Promise Object)* Используются в: Асинхронном программировании (Async/Await, then/catch) 🚩Почему промисы – асинхронная конструкция? Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в .then() или .catch().

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Данные загружены!"); // Успех
  }, 2000);
});

fetchData.then(data => console.log(data));

🚩Promise – это не просто колбэк До появления Promise в JavaScript использовались колбэки, но они приводили к "callback hell".

function fetchData(callback) {
  setTimeout(() => {
    callback("Данные загружены!");
  }, 2000);
}

fetchData(data => console.log(data));

Решение с Promise

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Ставь 👍 и забирай 📚 Базу знаний

18 304

🤔 Что такое функция высшего порядка? Функция высшего порядка — это функция, которая принимает другую функцию в аргументы или возвращает функцию как результат. Используется для абстракции, композиции, колбэков. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 304

🤔 Как проверить правильную иерархию html заголовков? Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы. 🚩Зачем нужна правильная иерархия заголовков? 🟠Логическая структура Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги. 🟠Доступность Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице. 🟠SEO Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы. 🚩Что значит "правильная иерархия заголовков"? 🟠`<h1>` Заголовок страницы (должен быть уникальным и только один на странице). 🟠`<h2>` Подразделы <h1>. 🟠`<h3>` Подразделы <h2>, и так далее.

<h1>Главный заголовок страницы</h1>
  <h2>Раздел 1</h2>
    <h3>Подраздел 1.1</h3>
    <h3>Подраздел 1.2</h3>
  <h2>Раздел 2</h2>
    <h3>Подраздел 2.1</h3>
      <h4>Подраздел 2.1.1</h4>

🚩Как проверить иерархию заголовков? 🟠Ручная проверка HTML-кода Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, <h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>). 🟠Использование браузерных DevTools В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность. 🟠Инструменты для проверки доступности Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков. 🟠Скрипт для автоматической проверки Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.

const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
  console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});

🟠Плагин для анализа заголовков Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO. 🚩Примеры ошибок в структуре и как их исправить Ошибка: Пропуск уровней заголовков

<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->

Исправление

<h1>Главный заголовок</h1>
  <h2>Подраздел</h2>

Ошибка: Несколько <h1> на одной странице

<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>

Исправление

<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>

Ставь 👍 и забирай 📚 Базу знаний

18 304

🤔 Что известно про дескрипторы? Property Descriptor — это объект, описывающий свойство: - value - enumerable - configurable - writable Можно получить через Object.getOwnPropertyDescriptor(). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 304

🤔 Какие знаешь подходы по написанию css? Существует несколько методологий и подходов к написанию CSS, которые помогают структурировать код, сделать его более читаемым, масштабируемым и поддерживаемым. Рассмотрим основные. 🟠Классический (обычный) CSS Стандартное написание CSS без структурных ограничений.

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

🟠BEM (Block Element Modifier) BEM — один из самых популярных методологий. Он помогает избежать конфликтов классов и улучшает читаемость кода. - Block (Блок) — независимый компонент (.button). - Element (Элемент) — часть блока (.button__icon). - Modifier (Модификатор) — изменение блока (.button--primary).

<button class="button button--primary">
  <span class="button__icon"></span> Нажми меня
</button>

.button {
  background-color: gray;
  color: white;
  padding: 10px;
}

.button--primary {
  background-color: blue;
}

.button__icon {
  margin-right: 5px;
}

🟠OOCSS (Object-Oriented CSS) OOCSS (Объектно-ориентированный CSS) предлагает разбивать стили на структуру и внешний вид, чтобы повторно использовать код.

.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.card--dark {
  background-color: black;
  color: white;
}

🟠CSS-in-JS (Styled Components, Emotion) Этот подход популярен в React и других фреймворках, где стили пишутся внутри JavaScript.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

export default function App() {
  return <Button>Нажми меня</Button>;
}

🟠Utility-First (Tailwind CSS) В этом подходе используются готовые утилитарные классы для быстрого стилизации.

<button class="bg-blue-500 text-white p-2 rounded">Кнопка</button>

Ставь 👍 и забирай 📚 Базу знаний

18 304

🤔 Какие популярные подходы изобрели для Redux? Подходы, такие как Redux Toolkit, были созданы для упрощения работы с Redux, минимизации шаблонного кода и улучшения производительности. Также популярны middleware, такие как Redux Thunk и Redux Saga, для обработки побочных эффектов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 304

🤔 Что такое 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;
}

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

18 304

🤔 Что такое деструктуризация? Деструктуризация — это синтаксическая возможность в JavaScript, позволяющая распаковывать значения из массивов или свойств из объектов прямо в отдельные переменные. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 304

🤔 Как изменить направление оси flexbox контейнера? Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов. 🚩Возможных значения flex-direction 🟠row: Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию. 🟠row-reverse: Основная ось — горизонтальная, элементы располагаются справа налево. 🟠column: Основная ось — вертикальная, элементы располагаются сверху вниз. 🟠column-reverse: Основная ось — вертикальная, элементы располагаются снизу вверх. 🚩Примеры использования: Горизонтальное направление (слева направо):

.container {
    display: flex;
    flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}

Горизонтальное направление (справа налево):

.container {
    display: flex;
    flex-direction: row-reverse;
}

Вертикальное направление (сверху вниз):

.container {
    display: flex;
    flex-direction: column;
}

Вертикальное направление (снизу вверх):

.container {
    display: flex;
    flex-direction: column-reverse;
}

Пример HTML и CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Direction</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
            border: 1px solid #000;
            height: 200px;
        }
        .item {
            flex: 1;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Ставь 👍 и забирай 📚 Базу знаний

18 304

🤔 Как семантически разделять контент? - section — смысловой блок. - article — независимая статья/новость. - aside — побочная информация. - nav, main, footer — для структуры страницы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 304

🤔 Как растянуть элемент на 100%? Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы. 🟠Растяжение элемента на 100% ширины (`width: 100%;`) Элемент займет всю ширину своего родителя.

<div style="width: 300px; background: lightblue;">
  <div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>

🟠Растяжение элемента на 100% высоты (`height: 100%;`) Элемент займет всю высоту родительского элемента.

<div style="height: 300px; background: lightblue;">
  <div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>

🟠Растяжение элемента на 100% ширины и высоты Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

🟠Растяжение относительно окна браузера (`viewport`) Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

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

width: calc(100vw - 16px); /* Учитывается ширина скролла */

🟠Использование `position: absolute` Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

🟠Растяжение внутри Flexbox-контейнера Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

🟠Растяжение внутри Grid-контейнера CSS Grid также позволяет растягивать элементы.

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

🟠Растяжение с учетом отступов Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>

Ставь 👍 и забирай 📚 Базу знаний

18 304

🤔 На что можно заменить интерфейсы в JS? В чистом JS — объекты с JSDoc-аннотациями, библиотеки валидации схем (zod, yup, io-ts) или JSON Schema. Эти способы позволяют определять и валидировать структуру данных без TS. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 304

Сегодня последний день, когда можно приобрести пожизненный PRO тариф easyoffer Акция до 20 февраля 00:00 Покупаешь сейчас один раз — пользуешься всю жизнь без лимита, включая все будущие функции. 👉 Смотри подробности тарифа и покупай на https://easyoffer.ru/

18 304

🤔 Что такое meta теги? Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри <head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. 🚩Зачем нужны meta-теги? Улучшают SEO (поисковую оптимизацию) Управляют отображением в соцсетях и поисковиках Настраивают адаптивность страницы (например, на мобильных устройствах) Определяют кодировку, язык и авторство страницы 🚩Основные meta-теги с примерами Кодировка страницы

<meta charset="UTF-8">

Описание страницы (SEO)

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

Ключевые слова (SEO, устарело)

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

Автор страницы

<meta name="author" content="Иван Иванов">

Запрет индексации страницы

<meta name="robots" content="noindex, nofollow">

Адаптивность на мобильных устройствах

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Социальные сети (Open Graph, Twitter Cards) Facebook и другие соцсети (Open Graph)

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter-карточки

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

Ставь 👍 и забирай 📚 Базу знаний

18 304

🤔 Что такое режим совместимости (quirks mode)? Это режим отображения страницы в браузере с ошибками, характерными для старых версий IE. Включается, если DOCTYPE не задан или задан некорректно. Может приводить к нестандартному поведению CSS и DOM. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

18 304

Завтра конец акции на возможность приобрести PRO тариф по цене одного года Доступный функционал включает базы вопросов с собеседований, задач для live-coding, реальных интервью и тестовых заданий от топ-компаний, а также аналитику требований для резюме и тренажеры с режимом симуляции собеседования под конкретную компанию. Акция до 20 февраля (включительно) на PRO-тариф. Покупаешь сейчас один раз — пользуешься всю жизнь без лимита, включая все будущие функции. 👉 Смотри подробности тарифа и покупай на https://easyoffer.ru/

18 304

🤔 Что такое нечистая функция? Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой. 🚩Признаки нечистой функции Зависит от внешнего состояния Изменяет глобальные переменные Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.) 🚩Примеры нечистых функций Использует внешнюю переменную (зависит от внешнего состояния)

let count = 0;

function increment() {
    count += 1; 
    return count;
}

console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)

Модифицирует переданный аргумент

function addElement(arr, item) {
    arr.push(item); // изменяет оригинальный массив
    return arr;
}

let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)

Выполняет побочные эффекты (например, изменяет DOM)

function changeTitle(newTitle) {
    document.title = newTitle;
}

changeTitle("Новая страница");
console.log(document.title); // "Новая страница"

Генерирует случайное значение

function getRandomNumber() {
    return Math.random();
}

console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)

🚩Чем отличается от чистой функции? Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния. Чистый вариант функции addElement() (не меняет исходный массив)

function addElementPure(arr, item) {
    return [...arr, item]; // создаёт новый массив, не изменяя старый
}

let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)

Ставь 👍 и забирай 📚 Базу знаний