Метод match можно использовать для поиска совпадений в строках в JavaScript 🟨

Регулярным выражением мы обозначаем некий паттерн (настройку для поиска совпадений) и с помощью метода match ищем совпадения в строке под это регулярное выражение 🔍

Регулярные выражения могут быть самыми разнообразными. В коде на скрине, допустим, используя регулярное выражение regexp можно найти все слова начинающиеся на букву "W" в строке str 🔦

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

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨

👉 Что такое IIFE (Immediately Invoked Function Expression) и для чего используется?

IIFE – это функция, которая определяется и сразу же выполняется 🏁

⚙ Зачем её используют:
➖ чтобы создать локальную область видимости (избежать конфликта переменных)
➖ для инкапсуляции кода (скрыть детали реализации)
➖ часто применяли для появления let и const, а также модулей

Сегодня IIFE реже используют, но они все ещё полезны, когда нужно быстро выполнить код и не засорять глобальную область 👁‍🗨

Регулярные выражения – это "фильтры" позволяющие находить, заменять и валидировать текстовые данные 🔬

Они состоят из символов разных типов, используя которые определяется некий шаблон, по которому и можно найти, заменить или провалидировать данные 🙌

На скрине пример регулярного выражения (состоящего из 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"));

Как перенести текст на следующую строку в HTML? 🟧

Для этого существует тег <br/> ↩

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

Благодаря методу includes можно проверить наличие заданного элемента в массиве 🗄️

Применение метода стандартное: прописываем название массива и метод через точку, указав в скобках элемент, наличие которого хотим проверить 🕵‍♂️

Метод возвращает true, если заданный элемент присутствует в массиве, false - соответственно, если нет 👁‍🗨

Итератор – это объект, реализующий метод next, возвращающий следующее значение последовательности 🤹

Итераторы используются для поэтапного перебора коллекций, таких как массивы, объекты Map, Set или собственные структуры данных 🎡

Они автоматические встроены в многие циклы, такие как for...of, работающие с итерабельными объектами 🔂

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

В React существует множество типов компонентов ⚛

Рассмотрим тип компонента - функциональный компонент ⚙

Функциональный компонент – компонент, который хранит какую-либо функцию. Он обычно принимает параметры, то есть пропсы от других компонентов и возвращает Реакт-элемент. Его можно объявить используя ключевое слово function либо ключевое слово const 📃

С появлением различных хуков написание функционального компонента с помощью ключевого слова const считается более современным подходом 👁‍🗨

Деструктуризация – это способ извлечения элементов из массивов или значений свойств из объектов, присваивая их новым отдельным переменным в виде значений 📤

Вместо того чтобы вручную отдельно объявлять новые переменные, присваивая им значения равные значениям свойств из объекта, например, мы можем прописать простую конструкцию, где взять необходимые значения свойств в фигурные скобки, перечислив их запятой и через знак равенства указать, что мы берем их из заданного объекта 👁‍🗨

Как сделать разные скругления углов у блоков, кнопок и других элементов в CSS? 🟦

Для этого помимо всеми известного свойства border-radius есть свойства:
🔹 border-top-left-radius
🔹 border-top-right-radius
🔹 border-bottom-left-radius
🔹 border-bottom-right-radius

То есть свойства, которые отвечают за скругление конкретного угла 👁‍🗨

Связкой из метода массива map + метода toUpperCase или toLowerCase можно легко перевести всё предложение в верхний или нижний регистр ↕

👉 Для этого достаточно:
1⃣ взять строку с предложением в массив
2⃣ после чего прописать применение метода массива map к массиву с предложением
3⃣ и в скобках, в виде стрелочной функции, указать, что метод toUpperCase или toLowerCase должен быть применен к словам строки (word)

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨

👉 Что такое замыкание (closure) и для чего используется?

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

💡 Используют для:
➖ сохранения состояния между вызовами функций
➖ работы с колбэками и обработчиками событий, таймерами и т. д.
➖ создания частных переменных, которые не видны снаружи

Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨

Проголосуйте в следующем посте 👇

В JavaScript есть достаточное разнообразие циклов. Рассмотрим цикл for...in 🟨

for...in – это цикл, позволяющий перебирать свойства объекта 🔸

Он используется для итераций по ключам объекта и выполнения определенных действий с каждым ключом 🔑

На скрине пример использования цикла: после запуска выполняется 3 итерации, на каждой из которой поочередно выводится название каждого свойства и его значение из объекта myObject 👁‍🗨

Благодаря методу reduce можно легко свернуть массив в одно значение 🌀

Есть массив numbers с элементами, объявляем переменную, через равно указываем название массива и метод reduce *️⃣

Далее необходимо прописать callback-функцию со сложением двух параметров: accumulator и currentValue 🎛

accumulator – это результат выполнения итераций. На каждой итерации это значение обновляется в соответствии с логикой функции ℹ️

currentValue – это элемент массива, обрабатываемый на какой-то итерации. Для первой итерации это значение 1, для второй - 3 и так далее ℹ️

Код со скрина:

let num = [1, 3, 2, 12];

let sum = num.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum);

С помощью метода join можно объединить элементы массива в одну строку 🤝

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

На скрине пример объединения слов (элементов массива в виде строк) в одну строку с разделителем в виде пробела 🖇

И пример объединения значений свойств объекта в одну строку (пример с паролем): мы деструктуризировали (достали с объекта) три свойства в самостоятельные переменные, добавили их в массив и уже с массива в качестве элементов взяли их и объединили в одну строку с разделителем в виде тире ⛓

Код со скрина:

// ✦ Oбъединение элементов массива в одну строку
let words = ["Codorum", "-", "пишу", "на", "js",];
let sentence = words.join(" ");


// ✦ Oбъединение свойств объекта в одну строку
let passwordElements = { block_1: '1SF2', block_2: '3S2G', block_3: 'SK1F' };
let { block_1, block_2, block_3 } = passwordElements;

let passwordMap = [block_1, block_2, block_3];
let password = passwordMap.join("-");

Анимация в стиле загрузки при hover наведении для иконки в CSS 🟦

// index.html
<a class="a">
  <img class="ico" src="./image.png"></img>
</a>

/* index.css */
a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: black;
  cursor: pointer;
}

@property --fill {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}

a:hover {
  --fill: 100%;
}

a::after {
  position: absolute;
  z-index: -1;
  content: '';
  inset: -8px;
  border-radius: inherit;
  background: conic-gradient(#d387f8 var(--fill), transparent var(--fill));
  transition: --fill 1s ease-in-out;
}

.ico {
  opacity: 50%;
  transition: opacity 1s ease, scale 1s ease;
}

.a:hover .ico {
  opacity: 100%;
  scale: 1.1;
}