👁‍🗨 CODORUM

Благодаря методу 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);

В JavaScript есть достаточное разнообразие циклов. Рассмотрим цикл for...in 🟨 for...in – это цикл, позволяющий перебирать свойства объекта 🔸 Он используется для итераций по ключам объекта и выполнения определенных действий с каждым ключом 🔑 На скрине пример использования цикла: после запуска выполняется 3 итерации, на каждой из которой поочередно выводится название каждого свойства и его значение из объекта myObject 👁‍🗨

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

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Что такое замыкание (closure) и для чего используется? Замыкание – это когда функция «запоминает» значение переменных из общей области видимости, в которой была создана даже после того, как эта область уже завершила выполнение ✅ 💡 Используют для: ➖ сохранения состояния между вызовами функций ➖ работы с колбэками и обработчиками событий, таймерами и т. д. ➖ создания частных переменных, которые не видны снаружи

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

Как сделать разные скругления углов у блоков, кнопок и других элементов в CSS? 🟦 Для этого помимо всеми известного свойства border-radius есть свойства: 🔹 border-top-left-radius 🔹 border-top-right-radius 🔹 border-bottom-left-radius 🔹 border-bottom-right-radius То есть свойства, которые отвечают за скругление конкретного угла 👁‍🗨

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

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

Итератор – это объект, реализующий метод next, возвращающий следующее значение последовательности 🤹 Итераторы используются для поэтапного перебора коллекций, таких как массивы, объекты Map, Set или собственные структуры данных 🎡 Они автоматические встроены в многие циклы, такие как for...of, работающие с итерабельными объектами 🔂 Но можно создавать собственные итераторы для любой структуры данных самостоятельно, чтобы получить полный контроль над порядком и логикой перебора 👁

Благодаря методу includes можно проверить наличие заданного элемента в массиве 🗄️ Применение метода стандартное: прописываем название массива и метод через точку, указав в скобках элемент, наличие которого хотим проверить 🕵‍♂️ Метод возвращает true, если заданный элемент присутствует в массиве, false - соответственно, если нет 👁‍🗨

Как перенести текст на следующую строку в 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;
}