С помощью методов Push и Pop можно добавить или удалить элемент в конце массива на JavaScript 🟨

👉 метод Push добавляет элемент или элементы в конец массива
👉 метод Pop удаляет последний элемент массива

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

👉 Что такое потеря контекста, когда она происходит и как ее предотвратить?

Потеря контекста – это когда this больше не указывает на ожидаемый объект из-за способа вызова функции 💨

⚠ Часто случается при:
➖ передачи методов объекта как callback
➖ использовании setTimeout, setInterval
➖ использовании обработчиков событий
➖ деструктуризации методов

💡 Решается с помощью bind, arrow function или call/apply

Babel – это JavaScript компилятор, который используется для преобразования современного JavaScript-кода в код, поддерживаемый более старыми браузерами или средами выполнения. Babel помогает разработчикам писать современный код без заботы о совместимости с разными средами выполнения 🅱️

👉 Babel имеет несколько важных ролей:
➖ поддержка современных стандартов JavaScript
➖ совместимость с JSX
➖ транспиляция экспериментальных функций
➖ поддержка полей классов и других новшеств

Как это работает? ⚙
Babel использует плагины для преобразования разных частей современного синтаксиса JavaScript. Каждый плагин отвечает за определенную функциональность, например преобразование стрелочных функций, классов, шаблонных строк и т.д. Babel также может использовать пресеты (наборы плагинов) для комплексной поддержки разных версий JavaScript 👁‍🗨

Как добавить свойство в объект на JavaScript? 🔶

👉 Для этого можно воспользоваться:
➖ методом Object.assign, который объединит объект с новым свойством
➖ или Spread оператором: то есть переобъявить объект указав его в скобках с оператором перед ним и новым свойством через запятую

На скрине оба способа: в объекте было одно свойство Name, мы добавили второе свойство Language методом Object.assign, затем добавили третье свойство Link благодаря переопределению объекта 👁‍🗨

Классы – это способ определения объектов, их свойств и методов. Благодаря классам можно создавать объекты определенного стандарта ✴️

На примере кода со скрина есть класс programmer с конструктором, в котором есть свойство name и метод write 🧑‍💻

Ниже был создан новый объект Codorum, которому был присвоен класс programmer. Теперь мы можем вызвать метод write класса programmer от имени объекта Codorum 👁‍🗨

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

class programmer {
    constructor(name) {  // конструктор класса 
      this.name = name;  // свойствo класса
  }

    write() {            // метод класса 
      console.log(`${this.name} пишет код`);
  }
}
    
const Codorum = new programmer('Codorum');

Codorum.write(); // запуск метода объектом

В JavaScript есть метод Number, который конвертирует данные разного типа в числа 🔢

По примеру со скрина у нас были 2 переменные с boolean значениями: a ("true"), b ("false") 🚥

В следствии применения метода boolean значения переменных конвертировались в числовые значения: a ("1"), b ("0") 🔢

Казалось бы, применение метода на этом ограничивается, ведь если конвертировать строковое значение методом Number мы получим NaN, но методом Number мы также можем конвертировать данные связанные с датами в числа или даже объекты в числа 👁‍🗨

Пост для новичков канала 🖖

Рекомендуем посмотреть серию роликов Как написать сайт-визитку на ReactJS. Кому интересно — приятного просмотра ⚛️

Плейлист с частями доступен на нашем Ютуб канале Codorum 🪪

В рамках частей мы также рассмотрели интересные моменты html верстки 🟧, стилизации и создании разных CSS анимаций 🟦

Подробности в первой части — анонс макета и подготовка среды 👈 жми, чтобы посмотреть.

На финальный результат можно взглянуть в 20-й части 👈

Якорь – это ссылка на страницу или элемент страницы, который создаётся тегом <a> в HTML ⚓️

Он может иметь атрибуты, такие как href, указывающий адрес ссылки либо id элемента текущей страницы/компонента для перехода к нему ↕️

В видео мы рассмотрели как можно стилизовать якорь в CSS под себя 👁‍🗨

А также как сделать плавный скролл. Для этого достаточно задать значение smooth в свойстве scroll-behavior корневого элемента html 🔸

Код из видео:

// index.html
<div class="main">
  <div class="btn">
    <a href="#lastBlock">В конец</a>
  </div>
  <div class="card">
    <p>блок 1</p>
  </div>
  <div class="card">
    <p>блок 2</p>
  </div>
  <div id="lastBlock" class="card">
    <p>блок 3</p>
  </div>
</div>

/* index.css */
html {
  scroll-behavior: smooth;
}

A {
  text-decoration: none;
}

A:visited {
  color: #f7f4ff;
}

Одно из важных отличий var от let в JavaScript – это область видимости Scope 🧿

Переменные, объявленные с помощью var видны не только на уровне блочного скоупа, а и на уровне локального или же функционального скоупа, вне зависимости от места где они были объявлены. А переменные, объявленные с помощью let видны только внутри блока кода, где были объявлены 🔦

На скрине есть функция с блоком if. Соответственно мы имеем 2 скоуп уровня: локальный скоуп функции и блочный скоуп блока if. Внутри блока if объявлены 2 переменные: одна через var, другая через let ℹ️

Запустив функцию переменная var будет выведена в консоль, значит она видна на уровне всего локального скоупа, а переменная let не будет определена ❗️

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

useRef – это React хук, использующийся для создания ref-объектов, которые сохраняют переменные, остающиеся неизменными между компонентами рендеров ⚛

Хук useRef особенно полезен для доступа к DOM-элементам или хранения любых значений, которые могут изменяться в ходе жизненного цикла компонента, но не приводят к его перерендерированию 🔗

👉 В коде из гифки пример применения хука useRef для смещения фокуса на DOM-элемент:
➖ есть ref-объект inputRef с пустым значением
➖ функция focus с методом focus() для DOM-элемента
➖ ref-объект был привязал к одному из полей ввода и в итоге при нажатии на кнопку вызывается функция focus, которая смещает фокус на это поле ввода

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

Array – это тип объекта, который служит для работы со списками значений 📒

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

👉 Некоторые тонкости типа объектов Array:
➖ у всех элементов массива есть свой индекс начиная с нуля
➖ массивы имеют различные встроенные методы для манипулирования и обработки данных
➖ для работы с массивами есть такие операторы как Spread и Rest

С Международным Женским днём, драгоценные девушки! 💐

Спасибо за вашу заботу и поддержку! За то что вносите яркие краски в нашу жизнь, наполняете её своей красотой! 🦋

Пусть сбываются все ваши планы, от самых простых до самых смелых в любых сферах жизни! Чаще улыбайтесь, этим Вы делаете мир прекраснее! 🏆

Мы вас ценим и любим! 💜

© Изображение создано нашим дизайнером Workford ✨

Чем отличается метод parseInt от Math.round в JavaScript? ⏺

🫤 Оба метода предназначены для округления десятичных чисел в целые числа, но округляют они по-разному:
👉 parseInt округляет число, отсекая все цифры после точки
👉 Math.round округляет число к ближайшему целому

Скоупинг – понятие, охватывающее несколько аспектов, направленных на правильное управление переменными и функциями кода 🧿

Основные аспекты скоупинга: Объявление переменных, Объем видимости, Жизненный цикл, Поднятие, Замыкание 🔹

Сегодня о аспекте – поднятие (Hoisting) ⬆️

Перед выполнением кода JS сканирует его и создает все переменные и функции в области видимости (Scope). Интерпретатор ведет себя так, будто объявления подняты вверх, включая переменные объявленные после их применения в функциях. То есть JS видит объявление var msg (в случае с кодом на скрине) ещё до выполнения кода console.log(msg). Но стоит учесть, что поднимается только объявление, а не значение 🔬

Hoisting – это особенность JS, позволяющая вызывать функции до их объявления. Но современный JS почти не использует это. Из-за hoisting с var, игнорирующего блочный Scope возникало много багов, поэтому появились let и const. Сейчас переменные объявляют перед их использованием, Поднятие фактически используется только для function declaration 👁‍🗨

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

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

use strict – это директива JavaScript, которая активирует строгий режим для скрипта или отдельной функции 👮‍♂️

Строгий режим делает несколько изменений в поведении языка для повышения безопасности и производительности кода 🔌

👉 Особенности и изменения, которые внедряет строгий режим:
➖ запрет использования необъявленных переменных
➖ запрет удаления объектов и функций
➖ запрет дубликатов параметров в функциях
➖ глобальный объект неявно не привязывается
➖ дополнительные ограничения для зарезервированных слов

В видео подробнее раскрыта каждая из особенностей 👁‍🗨

Использование строгого режима use strict часто рекомендуется, поскольку он помогает выявлять потенциальные ошибки и делает код более предсказуемым и безопасным 🧷

Как сделать анимацию движения линии по кнопке при hover наведении в CSS? 🟦

👉 Для этого нужно:
1⃣ стилизовать кнопку в отдельном классе, в который стоит добавить свойство overflow со значением hidden, чтобы линия не выходила за границы кнопки
2⃣ прописать псевдоэлемент :before, в котором стилизуется линия и тут ключевыми свойствами будут position и transform с указанием положения линии до hover наведения.
3⃣ прописать конструкцию :hover:before, в которой прописать положение линии при наведении на кнопку

css
.button {
  position: relative;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #b685ff;
  border-radius: 8px;
  width: 300px;
  height: 100px;
  color: white;
}

.button:before {
  content: '';
  position: absolute;
  height: 300px;
  width: 40px;
  background: #ffffffde;
  transition: 1s;
  transform: rotate(-20deg) translateX(-200px);
}

.button:hover:before {
  transform: rotate(-20deg) translateX(200px);
}