В 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;
}

DOM (Document Object Model) в веб-разработке – это структура, представляющая веб-страницу в виде дерева объектов. Каждый элемент HTML, а также его свойства и связи представлены как объекты в этой модели 📑

DOM предоставляет возможность динамически манипулировать веб-страницей с помощью JavaScript 🟨

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

Взаимодействие с DOM является ключевой частью разработки веб-приложений и динамических интерфейсов, позволяющих создавать более интерактивные и усовершенствованные пользовательские взаимодействия 🖱

Код из видео:

import { useState } from 'react';

const Component = () => {
  const [text, setText] = useState('Codorum JS');

  const changeText = () => {
    setText('Codorum JavaScript');
  };

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={changeText}>Изменить текст</button>
    </div>
  );
};

export default Component;

Как отличить метод от встроенной функции в JavaScript?

🔶 Встроенные функции – это глобальные функции, не принадлежащие ни одному объекту. Они доступны напрямую, без точки.

🔶 Методы – это функции, являющиеся свойствами объектов. Вызываются через синтаксис object.method().

// Примеры встроенных функций:
parseInt('42');
isNaN('abc');
decodeURI('%20');    

// Примеры методов:
Math.random(); // метод объекта Math
'go'.toUpperCase(); // метод объекта String
[1,2].push(3); // метод объекта Array

Благодаря методу every можно проверить удовлетворяют ли все элементы массива заданному условию в JavaScript 🙌

На скрине пример проверки: все ли элементы массива в виде чисел больше 5❔

Если каждый элемент массива проходит проверку по заданному условию, то метод возвращает результат true, если хотя бы один из элементов не проходит условие, то результат - false🚦

Метод может быть полезным для автоматизации проверки больших массивов данных 👁‍🗨

В JavaScript существует своё разнообразие структур данных. Разберем структуру данных Set 🟨

Set – структура данных, позволяющая сохранять уникальные значения и обеспечивать быстрый поиск элементов. Используется для работы с множествами: удаление дубликатов, объединение, сечение и разница коллекций 🗂

👉 Основное предназначение - сохранять коллекцию уникальных значений. Но не единственное, есть и другие:
➖ быстрый поиск элемента (set.has(value))
➖ хранение данных в порядке добавления (порядок сохраняется, в отличие от объектов)
➖ эффективное выполнение операций над множествами (сечение, объединение и т. д. Для этого используют Set + массивы)

switch – это оператор ключевое слово, использующийся для выполнения различных действий на основе разных условий 🕹

Он позволяет сравнивать значение переменной с разными вариантами и выполнять соответствующий код ⚖

На скрине пример использования оператора switch на простом примере цикла. Есть переменная со значением в виде строки. Переменная "fruit" сравнивается с вариантами в switch. Если не один вариант не подходит выполняется блок default 👁‍🗨

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

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

Cookie – это небольшой фрагмент данных, который хранит веб-сайт на компьютере пользователя 🍪

Cookie используются для сохранения информации о пользователе и его взаимодействии с сайтом 🗄

В видео мы рассмотрели пример создания cookie на странице компонента React ⚛️

В конце видео показал где хранятся cookie страницы в браузере 👁‍🗨

Код из видео:

class CookieExample extends React.Component {
  componentDidMount() {
    // Cookie
    this.createCookie('username', 'codorum', 1);
    // '1' - количество дней, на которое мы сохраняем cookie
  }

  createCookie(name, value, days) {
    const expires = new Date(new Date().getTime() + days * 24 * 60 * 60 * 1000).toUTCString();
    document.cookie = `${name}=${value}; expires=${expires}; path=/`;
  }

  render() {
    return (
      <div>
        <h1>Cтраница</h1>
      </div>
    );
  }
}

export default CookieExample;

Как сделать обводку с переливанием цвета на блоке при hover наведении с помощью CSS 🔮

👉 Основные моменты для создания обводки:
➖ псевдоэлемент ::before для класса блока, который будет служить копией блока и переливаться цветом, находясь за основным блоком
➖ анимация переливания цвета в @keyframes
➖ наличие важных свойств в псевдоэлементе ::before - content, position и z-index.

CSS стили из видео:

.card {
  display: grid;
  place-items: center;
  position: relative;
  width: 100px;
  height: 150px;
  background-color: #141117;
  border-radius: 8px;
  cursor: pointer;
} 

.card::before {
  position: absolute;
  content: '';
  width: 99px;
  height: 149px;
  background-color: #8493f2;
  border-radius: 8px;
  z-index: -1;
  transition: 0.3s;
  animation: animate 1.5s linear infinite;
}

.card:hover::before {
  width: 102px;
  height: 152px;
  border-radius: 9px;
}

@keyframes animate {
  50% {
    filter: hue-rotate(50deg)
  }
}

Благодаря методу Array from можно не только преобразовывать разнообразные данные в массивы, но и генерировать диапазон чисел, к примеру 🟨

На скрине пример создания массива чисел длиной в 5 элементов (от 1 до 5) 5⃣

Метод может быть полезным при генерировании чисел в промежутке между двумя конкретными числами, допустим. То есть если у нас есть два числа и мы хотим заполнить промежуток между ними 🫶

При помощи гибкого метода Array from мы можем создавать эффективные функции, что делает метод довольно полезным инструментом 👁‍🗨

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

const numArray = Array.from({ length: 5 }, (_, index) => index + 1);

console.log(numArray);
// консоль выдаст результат: [1, 2, 3, 4, 5]

🌟 C НОВЫМ 2026 ГОДОМ! 🎄

🎉 Пусть 2026 порадует вас новыми успехами и открытиями во всех продолжениях и начинаниях! 🏆

⚡ Фокуса в повседневных задачах, высокой стрессоустойчивости и стремительного прогресса в изучении нового! 🦾

С помощью метода Object.values можно легко конвертировать значения свойств объекта в элементы массива 🌀

У объекта есть, допустим, 3 свойства и с помощью метода мы как бы вытягиваем значения этих свойств и делаем их самостоятельными элементами, собирая в отдельный массив 👁‍🗨

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

// ✦ Объект с тремя свойствами
const user = { name: 'Ignat', age: 30, role: 'admin' };

// ✦ Массив с тремя элементами (в качестве элементов
// выступают значения свойств объекта user)
const array = Object.values(user);

console.log("array =", array);

Рассмотрим тип объекта JSON в JavaScript ⚜️

JSON – это легкий и понятный формат обмена данными, используемый для представления структурированных данных 🗂

👉 метод stringify используется для преобразования JavaScript-объекта в JSON-строку. Он принимает объект, опционально функцию преобразования (replacer) и параметр пробела (space) для форматирования строки

👉 метод parse используется для разбора (парсинга) JSON-строки и создания соответствующего JavaScript-объекта. Он принимает строку JSON и опционально функцию разбора (reviver)

useMemo – это React хук, выполняющий мемоизацию (сохранение) результатов обработки значений функциями ⚛

Хук useMemo помнит результаты уже однажды выполненных вычислений и возвращает их при следующих вызовах 🧠

Это делает хук эффективным для оптимизации использования ресурсов при рендеринге компонентов 👁‍🗨

Код из видео:

import { useMemo, useState } from 'react';

const Component = () => {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState(0);

  const square = useMemo(() => {
    return count ** 2;
  }, [count]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleCalculate = () => {
    setCount(parseInt(inputValue));
  };

  return (
    <div>
      <p>Введите число:</p>
      <input type="number" value={inputValue} onChange={handleInputChange}/>
      <button onClick={handleCalculate}>Узнать квадрат числа</button>
      <p>Квадрат числа {count} = {square}</p>
    </div>
  );
};

export default Component