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

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

Благодаря методу every можно проверить удовлетворяют ли все элементы массива заданному условию в JavaScript 🙌 На скрине пример проверки: все ли элементы массива в виде чисел больше 5❔ Если каждый элемент массива проходит проверку по заданному условию, то метод возвращает результат true, если хотя бы один из элементов не проходит условие, то результат - false🚦 Метод может быть полезным для автоматизации проверки больших массивов данных 👁‍🗨

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

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

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

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;

Анимация в стиле загрузки при 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;
}

С помощью метода 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("-");

Благодаря методу 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 - соответственно, если нет 👁‍🗨