Операторы в JavaScript – это специальные символы или ключевые слова, которые используются для выполнения различных действий с переменными и значениями 🟨

👉 Все операторы в JavaScript можно условно разделить на 2 типа: операторы символы и операторы ключевые слова

➖ К операторам символам можно отнести: операторы присваивания, побитовые операторы, тернарный оператор, операторы Spread и Rest. Потому что все эти операторы записываются в виде символа или набора из нескольких символов.

➖ К операторам ключевым словам можна отнести все ключевые слова, которые играют роль операторов в JavaScript. Например, typeof, instanceof, new и так далее.

Мутабельность (от лат. mutabilis – изменяемый) и иммутабельность (от лат. immutabilis – неизменяемый) – два ключевых понятия в программировании, которые описывают возможность изменения данных после их создания 🗂

Мутабельные данные можно изменять после создания. Это означает, что вы можете менять значения, добавлять или удалять элементы, модифицировать структуру данных. Пример мутабельных типов данных: массивы и объекты 🖋

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

Уже знаете о новой CSS-функции? 🟦

Она уже поддерживается в таких браузерах: Opera, Chrome и Edge 🌐

Принцип работы функции стандартный:
✅ если условие – истинно, применяется соответствующее значение свойству, где прописана функция
❌ если условие не соблюдено — используется else

Пример реализации с кнопкой (если тема браузера светлая - цвет кнопки 🟪 фиолетовый, если тема тёмная - цвет кнопки 🟦 синий):

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

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

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;

Метод 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 👁‍🗨