В JavaScript существует множество различных конструкций 🟨

Конструкции в JavaScript – это общее понятие, охватывающее различные типы синтаксических элементов для управления логикой программы 🚟

👉 Рассмотрим основные условные конструкции, которые помогают выполнять разный код в зависимости от условий:

➖ if...else – абсолютно всеми знакомая конструкция, которая проверяет условие и выполняет код в зависимости от результата. (Тернарный оператор "? :" – более короткая альтернатива конструкции if...else)

➖ switch – удобная конструкция для проверки нескольких значений

С помощью метода Object.assign можно продублировать свойства одного объекта в другой без необходимости объявления дополнительного объекта (для последующего сложения двух объектов или применения Spread оператора для развертывания) 👯‍♀️

Метод применяется просто: первым значением в скобках выступает объект, в который мы хотим добавить свойства из второго объекта. Вторым значением выступает объект, свойства из которого мы хотим добавить *️⃣

В результате первый объект (в который мы копировали свойства с другого объекта) помимо своих свойств теперь будет иметь и свойства второго объекта. Второй же объект останется исходным 👁‍🗨

Что такое конструктор в JS? 🏗

Конструктор – это специальная функция, которая используется для создания и инициализации разных объектов. Основная идея конструкторов заключается в возможности создавать много объектов с одинаковыми свойствами и методами по определенному шаблону 🃏

На скрине пример создания объекта Homer с помощью конструктора Person 🍩

👉 Теперь у объекта есть:
➖ два свойства/параметра: age и hometown
➖ метод speak

Но на практике удобнее пользоваться классами, использование которых в разы проще 👁‍🗨

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

// ✦ объявление конструктора
function Person(age, hometown) {
  this.age = age;
  this.hometown = hometown;
  this.speak = function() {
    console.log(`Hi, I'm ${this.age} years old, my hometown is ${this.hometown}`)
  };
}

// ✦ создание объекта с помощью конструктора
let Homer = new Person(40, 'Springfield')

Homer.speak();

Промис — это инструмент, позволяющий обрабатывать асинхронные операции, такие как запросы в базу данных и определять условия для решения или отклонения промиса в зависимости от результата операций 🚥

👉 Основные функции промисов:
➖ конструктор Promise для создания нового промиса
➖ метод resolve решающий промис, передавая ему значение результата
➖ метод reject отклоняющий промис, передавая ему значение ошибки
➖ метод then добавляющий обработчик для решения промиса
➖ метод catch добавляющий обработчик для отклонения промиса

✅ Если в следствии выполнения операции внутри промиса мы получаем значение true, которое свидетельствует о выполнении какого-то нашего условия - то срабатывает метод resolve, который передает результат в метод then. С этим результатом мы можем продолжить какие-то дальнейшие операции

❌ Если же получаем false - срабатывает метод reject, передающий значение error в метод catch. Но и с этим значением мы также можем проводить какие-то дальнейшие манипуляции

Идея уникальной стилизации списка. attr функция передаёт атрибуты из html-кода и таким образом можно установить свой эмодзи для каждого пункта списка 🔥

Каждому пункту списка задаём класс (в нашем случае custom-marker), в котором значение свойства content должно быть равно селектору attr, принимающего атрибут (в нашем случае emoji) ℹ

Псевдоэлемент ::marker напрямую не принимает атрибуты, поэтому свойство content внутри оставляем пустым, а уже в отдельном классе custom-marker указываем что свойство content должно отображать наше значение в виде эмодзи через атрибут emoji 👁‍🗨

Код из гиф:

// ✦ index.js

<div class="main">
  <ol>
    <li class="custom-marker" emoji="🔥 ">Первый пункт</li>
    <li class="custom-marker" emoji="💎 ">Второй пункт</li>
    <li class="custom-marker" emoji="⚡ ">Третий пункт</li>
  </ol>
</div>


// ✦ index.css

.main {
  font-size: 12px;
  font-weight: 600;
}

.main ::marker {
  content: "";
}

.main .custom-marker::before {
  content: attr(emoji);
  font-size: 16px;
}

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

👉 Какие есть способы копирования простого объекта типа obj = {a: 1, b: 2}

Есть несколько популярных способов создать копию объекта:

🔸 Spread-оператор (чаще всего)

const copy = { ...obj };

🔸 Object.assign()

const copy = Object.assign({}, obj);

🔸 structuredClone() (подходит и для глубокого копирования)

const copy = structuredClone(obj);

⚠️ Spread и Object.assign() создают поверхностную (shallow) копию. Если в объекте есть вложенные объекты или массивы, они останутся общими. Если требуется независимая копия вложенных данных, стоит использовать structuredClone()

Ранее был пост про методы Push и Pop, которыми можно добавить элемент в конец массива и удалить последний элемент массива 🟨

Есть аналогичные этим методам методы Shift и Unshift, но:

👉 метод Shift удаляет первый элемент массива
👉 метод Unshift добавляет элемент или элементы в начало массива

Применение методов стандартное: указывается название массива и метод через точку. В скобках к методу Unshift можно указать 1 или несколько элементов через запятую, а скобки к методу Shift оставляем пустые (в любом случае он удалит первый элемент массива, независимо от того что мы там укажем) 👁‍🗨

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

Date – это тип объекта, который позволяет создавать, представлять и взаимодействовать с датами и временем (год, месяц, день, час, минута и другие) ⏰

Существуют методы для получения и изменения даты и времени (детальнее на скрине) ⏲️

Стоит учесть, что отсчёт месяцев начинается с нуля, где январь - 00, февраль - 01 и так далее. Поэтому при выводе месяца можно добавить "+1", чтобы месяц отображался со своим привычным номером 👁‍🗨

console.log(`Сегодня ${day}.${month + 1}, ${year} год`);

Как реализовать анимацию загрузки контента на странице в виде движения линии по блоку с помощью CSS? 🟦

Для этого нужно определить блок в котором будет происходить анимация и прописать для него псевдоэлемент :before, в котором стилизовать линию 📏

Последнее что понадобится создать анимацию в @keyframes ▶️

Код из видео:

// index.js

<div class="block">
  <div class="ava"/>
  <div style={{ display: "block" }}>
    <div class="name"/>
    <div class="description"/>
  </div>
</div>


/* index.css */

.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block:before {
  content: '';
  position: absolute;
  height: 300px;
  width: 40px;
  background: #ffffffdd;
  filter: blur(4px);
  transform: rotate(-20deg) translateX(-200px);
  animation: line 1s linear infinite;
}

@keyframes line {
  25% {
    transform: rotate(-20deg) translateX(300px); ;
  }
  100% {
    transform: rotate(-20deg) translateX(300px); ;
  }
}

Если необходимо распаковать элементы массива таким образом, чтобы каждый элемент массива был присвоен новой самостоятельной переменной – можно воспользоваться Rest оператором 📤

➖ Такой подход называется деструктивным присваиванием: объявляем сразу несколько новых переменных (перечислив их в квадратных скобках). Элементы, которые не нужно присваивать отдельным переменным можно объединить в массив указав его название в конце конструкции и Rest оператор перед ним 👁‍🗨

Если необходимо распаковать элементы массива в новый массив – можно воспользоваться Spread оператором. Для этого при объявлении нового массива нужно указать название нового массива в квадратных скобках и Spread оператор перед названием 📥

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

Рассмотрим тип компонента - Компонент класса 👤

Компонент класса – один из основных способов создания компонентов, подход которого основан на классах ES6 и использует расширение от базового класса React Component 👥

Можно передавать данные от одного компонента класса к другому компоненту класса 🤝

На примере кода выше есть класс MyComponent который наследует React Component. В конструкторе определяется исходное состояние компонента, а метод render отвечает за отображение элементов в виртуальном DOM 👁‍🗨

Цикл – это управляющая конструкция, обеспечивающая многократное выполнение блока кода до выполнения заданного условия. Циклы сокращают количество дублирования кода и помогают эффективно работать с данными 🔂

Один из самых распространенных видов циклов – цикл "for" ℹ

В следствие выполнения цикла for на скрине было проведено 3 итераций, на каждой из которых значение переменной "i" увеличивалось на единицу (i++), начиная со значения "i = 0", пока значение переменной не достигло максимального допустимого значения для соблюдения условия цикла и цикл прекратил работу (запуск новых итераций) ✋

На каждой итерации в консоль выводилось новое актуальное значение переменной 👁‍🗨

С помощью метода findLast можно найти последний элемент массива удовлетворяющий определенное условие в JavaScript 🟨

Для этого достаточно задать массив, прописать метод findLast, в скобках которого указать условие для элемента 🔦

Отталкиваясь от этого условия будут поочередно перебираться все элементы с конца массива, пока не будет найден первый с конца массива элемент удовлетворяющий заданное условие 🔬

Когда такой элемент будет найден – он будет выведен в консоль, в случае кода на скрине, и поиск будет остановлен 👁‍🗨

Async await – это функция JavaScript, позволяющая писать асинхронный код с чистой и понятной синтаксической структурой. Слово async определяет асинхронную функцию, а слово await указывает на ожидание выполнения асинхронной операции 🔀

Если простыми словами, то основная функция отмечена ключевым словом async, которая возвращает какой-то объект Promise. А ключевое слово await используется внутри этой функции (функции async) для ожидания результатов выполнения Promise 🎎

В видео мы рассмотрели пример с функцией async await по вычислению количества процентов числа "b" от числа "a". Часть функции percentFromNum (await) вычислила процент от числа "a", а основная часть функции calculate (async) умножила результат полученный с функции percentFromNum на число "b" 👁‍🗨

Указав путь к изображению в значении url свойства cursor можно поменять отображение курсора 🟦

Можно использовать разные форматы импортируемого изображения, но если вы импортируете невекторное изображение, к примеру формат png, то лучше чтобы оно не превышало размер 100х100 пикселей 👆

.body {
  cursor: url(/public/icons/cursor.png), auto;
}