👁‍🗨 CODORUM — пишу на JavaScript

Как перенести текст на следующую строку в HTML? 🟧 Для этого существует тег <br/> ↩ Для того чтобы перенести часть текста на следующую строку нужно лишь вставить тег <br/> между текстом, обернутым в тег <p>, в месте желаемого переноса 👁‍🗨

Регулярные выражения – это "фильтры" позволяющие находить, заменять и валидировать текстовые данные 🔬 Они состоят из символов разных типов, используя которые определяется некий шаблон, по которому и можно найти, заменить или провалидировать данные 🙌 На скрине пример регулярного выражения (состоящего из 3-х основных частей) к функции для проверки правильности ввода электронной почты 📫 🔺/^ ➖ начало строки 🔸[a-zA-Z0-9._%+-] ➖ часть почты до знака @ (можно ввести буквы, цифры, символы) 🔸@[a-zA-Z0-9.-] ➖ часть почты после знака @ (можно ввести буквы, цифры, символы) 🔸\.[a-zA-Z]{2,} ➖ часть после точки (можно ввести от 2-х букв) 🔻$/ ➖ конец строки Код со скрина:

function validateEmail(email) {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return emailRegex.test(email);
}

console.log("Правильность ввода 1 email:", validateEmail("example@example.com"));
console.log("Правильность ввода 2 email:", validateEmail("invalid-email"));

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Что такое IIFE (Immediately Invoked Function Expression) и для чего используется? IIFE – это функция, которая определяется и сразу же выполняется 🏁 ⚙ Зачем её используют: ➖ чтобы создать локальную область видимости (избежать конфликта переменных) ➖ для инкапсуляции кода (скрыть детали реализации) ➖ часто применяли для появления let и const, а также модулей Сегодня IIFE реже используют, но они все ещё полезны, когда нужно быстро выполнить код и не засорять глобальную область 👁‍🗨

Метод match можно использовать для поиска совпадений в строках в JavaScript 🟨 Регулярным выражением мы обозначаем некий паттерн (настройку для поиска совпадений) и с помощью метода match ищем совпадения в строке под это регулярное выражение 🔍 Регулярные выражения могут быть самыми разнообразными. В коде на скрине, допустим, используя регулярное выражение regexp можно найти все слова начинающиеся на букву "W" в строке str 🔦 Подробнее о том из чего собираются регулярные выражения и как их собрать самостоятельно в зависимости от задачи рассмотрим в будущих постах 👁‍🗨

useReducer – это React хук, использующийся для управления состоянием компонентов с помощью reducer-функции ⚛ reducer-функция – функция, принимающая параметры состояния компонента state и объект action. Объект action несет информацию про действие, на основе которого функция определяет какое действие необходимо совершить при обновлении состояния state 🤾 Код из видео:

import { useReducer } from 'react';

const initialState = { count: 0 };

const reducerFunction = (state, action) => { switch (action.type) {
  case 'increment':
    return {count: state.count + 1};
  case 'decrement':
    return {count: state.count - 1};
  default:
    return state;
}};

const Component = () => {
  const [state, dispatch] = useReducer(reducerFunction, initialState)

  return (
    <div>
      <p>Счёт: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Увеличить</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Уменьшить</button>
    </div>
);};

export default Component;

Уже знаете о новой CSS-функции? 🟦 Она уже поддерживается в таких браузерах: Opera, Chrome и Edge 🌐 Принцип работы функции стандартный: ✅ если условие – истинно, применяется соответствующее значение свойству, где прописана функция ❌ если условие не соблюдено — используется else Пример реализации с кнопкой (если тема браузера светлая - цвет кнопки 🟪 фиолетовый, если тема тёмная - цвет кнопки 🟦 синий):

button {
  background-color: if(
    media(prefers-color-scheme: light): blueviolet;
    else: blue
  );

  padding: 10px 20px;
  border: none;
  color: white;
}

Мутабельность (от лат. mutabilis – изменяемый) и иммутабельность (от лат. immutabilis – неизменяемый) – два ключевых понятия в программировании, которые описывают возможность изменения данных после их создания 🗂 Мутабельные данные можно изменять после создания. Это означает, что вы можете менять значения, добавлять или удалять элементы, модифицировать структуру данных. Пример мутабельных типов данных: массивы и объекты 🖋 Иммутабельные данные, напротив, не могут быть изменены после создания. Любое изменение таких данных приводит к созданию новой копии с изменениями, оставляя оригинал нетронутым. Пример иммутабельных типов данных: строки, числа, булевые значения 🔏

Операторы в JavaScript – это специальные символы или ключевые слова, которые используются для выполнения различных действий с переменными и значениями 🟨 👉 Все операторы в JavaScript можно условно разделить на 2 типа: операторы символы и операторы ключевые слова ➖ К операторам символам можно отнести: операторы присваивания, побитовые операторы, тернарный оператор, операторы Spread и Rest. Потому что все эти операторы записываются в виде символа или набора из нескольких символов. ➖ К операторам ключевым словам можна отнести все ключевые слова, которые играют роль операторов в JavaScript. Например, typeof, instanceof, new и так далее.

Краткое сравнение подходов работы с асинхронным кодом в JavaScript: сallbacks vs promises vs async/await 🔀 🔶 Callbacks – самый старый подход. Передаем функцию как аргумент и вызываем её позже. ➖ минусы: callback hell, тяжело читать и обрабатывать ошибки. 🔶 Promises – объект, представляющий результат асинхронной операции. Стабильная база. Методы: .then() для результата, .catch() для ошибок. ➖ более чистый и понятный код, чем с callback'ами. 🔶 Async/await – синтаксический сахар над промисами. Пишем асинхронный код как синхронный. Must-have в современном коде. ➖ легко читается.

Чем отличается Spread оператор от Rest оператора в JavaScript? 🤔 Spread оператор развертывает массивы или объекты в другие массивы или объекты ⤵ Rest оператор это дополнительная функция в деструктуризации, выполняющая противоположную функцию оператора Spread ⤴ Он объединяет остаточные элементы массива или свойства и т. д. 👁‍🗨

Как настроить фокус на кнопках при нажатиях в CSS? 🟦 Для этого необходимо настроить свойство outline в классе кнопки или в псевдоклассах: focus и focus-visible 👁 🔹 Если задать обводку в псевдоклассе focus класса кнопки - обводка будет появляться при нажатии 🖱 🔹 Если задать обводку в псевдоклассе focus-visible - обводка не будет появляться при нажатии на кнопку мышкой, но будет появляться при нажатии любой клавиши на клавиатуре после того как перед этим мы нажали на кнопку мышкой ⌨ 🔹 Чтобы вовсе отключить обводку при любом взаимодействии с кнопкой - задаем значение none в свойстве outline класса кнопки ❌

Заменит ли Искусственный интеллект человека? 🤖 Тема дискуссии, которая всё ещё не теряет своей актуальности на протяжении многих лет стремительного развития ИИ. В видео посмотрели на этот вопрос под интересным углом учитывая один нюанс, который большинство людей не берет во внимание 👁 Видео на украинском, для украинской части аудитории 🇺🇦 👉 Ссылка на видео ▶

Самый простой способ проверить является ли объект массивом в JavaScript – это применение метода isArray 🟨 Метод возвращает true, если переданный объект является массивом, и false - если нет 🚥 Так как это метод массива, перед применением метода следует прописывать Array, а в скобках после метода указываем объект проверки 👁‍🗨

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Можно ли записывать новые свойства/функции в прототипы стандартных классов (Array, Object и т.п.)? ⚠ Технически да, но это не рекомендуется делать ведь: ➖ это может привести к конфликтам с другими библиотеками или будущими обновлениями языка ➖ ломается принцип изоляции кода ➖ стандартные методы могут вести себя непредсказуемо ✅ Можно, если: ➖ ты пишешь собственный фреймворк и четко контролируешь среду ➖ расширение сделано осторожно и уникальным именем, которое не появится в будущих обновлениях Но безопаснее создать утилитарную функцию или собственный класс-потомок 👁‍🗨

break – это оператор ключевое слово, использующийся для прекращения выполнения ближайшего цикла 🛑 Он может быть использован для выхода из цикла, когда выполнение дальнейших итераций больше не требуется или условие было достигнуто ✅ На скрине пример использования оператора break на примере цикла for: есть цикл, увеличивающий значение переменной "i" на единицу на каждой итерации, а также условие, что оператор break должен быть вызван и прервать последующие итерации (прервать выполнение цикла), когда значение переменной "i" достигнет 5 👁‍🗨

Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨 Проголосуйте в следующем посте 👇