CodeRoll | Frontend

👩‍💻 Используем принципы “Чистого кода” в контексте JavaScript

Функции

✏ В JS отдавайте предпочтение функциональному программированию, а не императивному Сложный для понимания пункт, особенно для новичков. И мы здесь не про чисто функциональное программирование, как в некоторых других языках. Но если говорить простыми словами, то старайтесь следовать правилам: 📌 Описывайте действия в функциях исходя из вопроса "Как прийти к такому результату?", а не "Сделать это и это" 📌 Используйте встроенные методы вместо того, чтобы реализовывать такой же функционал вручную ➕ Это сделает ваш код более универсальным, чистым и легко тестируемым Coderoll | Frontend

👩‍💻 Используем принципы “Чистого кода” в контексте JavaScript

Функции

✏️ Используйте функции для удаления дубликатов кода Одно из первых правил, которые мы изучаем в функциях - это соблюдение правила DRY (don't repeat yourself) ➕Если вы видите, что функционал повторяется - создайте для него отдельную функцию, которую вы будете вызывать в нужных местах Coderoll | Frontend

👩‍💻 Используем принципы “Чистого кода” в контексте JavaScript

Функции

✏ Избегайте условных конструкций - один из самых странных принципов 🥺 Вы спросите: "Как так? Как я могу писать код без использования условий?" ➕ Сделать это можно, если вы разделите условную конструкцию на отдельные функциональности. И вместо вычисления вы просто будете запускать нужное. Это перекликается и с другими принципами, которые мы уже с вами разбирали. Например то, что функция/метод должны делать что-то одно Это работает как в комплексных функциях, так и в классах за счет полиморфизма (см. примеры кода) Coderoll | Frontend

Что такое динамический импорт в React? Ответ: Динамический импорт позволяет загружать модули асинхронно. В React это используется для ленивой загрузки компонентов, что улучшает производительность приложения. Пример: const LazyComponent = React.lazy(() => import('./LazyComponent')); Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

Как работает хук useState? Ответ: useState — это хук, который позволяет добавлять состояние в функциональные компоненты. Он возвращает массив из двух элементов: текущего состояния и функции для его обновления. const [count, setCount] = useState(0); Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

Что такое JSX? Ответ: JSX (JavaScript XML) — это синтаксический сахар для JavaScript, который позволяет писать HTML-подобный код внутри JavaScript. JSX превращается в обычный JavaScript с помощью компилятора, такого как Babel. Пример: const element = <h1>Hello, world!</h1>; JSX упрощает создание и чтение UI компонентов. Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

⚡️ Бесплатное обучение фронтенд-разработке с нуля Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 6 марта стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript Вот проекты, которые создадите: 💡 сверстаете свой онлайн-кинотеатр 💡 и напишете фронтенд для сайта с аниме-сериалами Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться джуну или стартовать на фрилансе без бирж Помимо работы с кодом он даст пошаговый план изучения всего, что необходимо знать и уметь, чтобы зарабатывать на фронтенде в 2026 году Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать, осталось 56 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду прямо сейчас 🟠Участвовать бесплатно

❓ Что такое for...of? Ответ: for...of — это цикл, который итерируется по итерируемым объектам (массивы, строки, генераторы и т.д.), возвращая значения элементов. Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

Как работает метод setState? Ответ:

Метод setState используется для обновления состояния компонента в React. Когда состояние изменяется, React перерисовывает компонент и его дочерние элементы. Важно, что setState работает асинхронно, и обновления могут быть объединены. this.setState({ counter: this.state.counter + 1 });

Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

Что такое JSX? Ответ: JSX (JavaScript XML) — это синтаксический сахар для JavaScript, который позволяет писать HTML-подобный код внутри JavaScript. JSX превращается в обычный JavaScript с помощью компилятора, такого как Babel. Пример: const element = <h1>Hello, world!</h1>; JSX упрощает создание и чтение UI компонентов. Ставь ❤️ если знаешь ответ Если нет — ставь 💅 Coderoll | Frontend

👩‍💻👩‍💻 Как выглядит алгоритм сортировки выбором на JavaScript? ❗ Один из самых распространенных алгоритмов, которые спрашивают на собеседованиях

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

function selectionSort(arr) {
    const n = arr.length;

    // Проходим по всем элементам массива
    for (let i = 0; i < n - 1; i++) {
        // Предполагаем, что текущий индекс i содержит минимальный элемент
        let minIndex = i;

        // Ищем минимальный элемент в оставшейся части массива
        for (let j = i + 1; j < n; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j; // Обновляем индекс минимального элемента
            }
        }

        // Если найден минимальный элемент не равен текущему, меняем их местами
        if (minIndex !== i) {
            [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
        }
    }

    return arr; // Возвращаем отсортированный массив
}

Coderoll | Frontend