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

Лидером среди фреймворков JavaScript на сегодня остаётся React ⚛️ Наибольшее количество баллов по поисковым запросам с 2022 по 2023 год и наибольшее количество загрузок с 2022 по 2024 год среди представленных на инфографике фреймворков собирает по-прежнему React 📥 (за исключением взлёта интереса к Vue.js и Svelte.js в конце 2023) Статистику брал, в частности, с источника Google Trends 📊

Array.isArray – это удобный инструмент для проверки, является ли объект массивом. Метод возвращает true, если переданный объект является массивом, и false - если нет 🔬 Под объектом, в данном контексте, я подразумеваю некую переменную, которую мы хотим проверить. То есть в прямом смысле слова, а не в смысле структуры или типа данных 👁‍🗨 Код из видео:

let arr1 = [1, 2, 3];
let arr2 = "слово";

function Recovery(arr, arrName) {
  if (Array.isArray(arr)) {
    console.log(arrName, "- массив");
  } else {
    console.log(arrName, "- не массив");
  }
}

Recovery(arr1, "arr1");
Recovery(arr2, "arr2");

Как и планировал, в соответствии с контент планом для телеграм канала, буду публиковать разную полезную информацию для пока ещё фронтенд-разработчиков JavaScript, не ограничиваясь одним языком 🦾 На этот раз подготовил инфу как сделать обводку с переливанием цвета на блоке при hover наведении с помощью CSS 🔷 Основные моменты: ➖ нужно прописать 3 стиля ➖ необходимо добавить фильтр для переливания цветов ➖ важно не упустить свойства: 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)
}

Чем отличается Spread оператор от Rest оператора? ℹ️ Spread оператор развертывает массивы или объекты в другие массивы или объекты ➡️ Rest оператор это дополнительная функция в деструктуризации, выполняющая противоположную функцию оператора Spread ⬅️ Он объединяет остаточные элементы массива или свойства объекта и т д 👁‍🗨 Код с видео:

//    пример применения Spread оператора (собираем один массив из 2-х переменных и 1-го массива)
const Fring = 'Fring';
const Pinkman = 'Pinkman';
const arr1 = ['Eladio', 'Salamanсa'];

const persons = [Fring, Pinkman, ...arr1]; // собираем*



//    пример применения Rest оператора (разбираем один массив на 2 переменные и 1 массив)
const [Fring2, Pinkman2, ...arr2] = persons; // разбираем*

console.log(persons)
console.log(Fring2, Pinkman2, arr2)

Готовил видео о том как сделать анимацию появления текста при нажатии на кнопку с помощью html, CSS и JavaScript но в итоге получился рофл, который заключается в том что кнопка получилась на чистом html и css. Без добавления функции на JS. Не могу не поделится с вами 🤪 Всё что необходимо это прописать саму кнопку, текст в файле index.html и три стиля в файле index.css 📁 С кнопкой связан скрытый checkbox. При нажатии на кнопку ставится галочка в checkbox. Подробнее в видео 👁‍🗨 Код с видео:

// index.html
<label for="btn" class="btn">Кнопка</label>
<input type="checkbox" id="btn"></input>
<div class="text">привет</div>


// index.css
.text, input[type="checkbox"] {
  opacity: 0;
  margin-top: -10px;
  transition: opacity 400ms, margin-top 500ms;
  display: block;
}

input[type="checkbox"]:checked ~ .text {
  opacity: 1;
  margin-top: 10px;
}

.btn {
  padding: 6px 18px;
  background-color: #485dff;
  color: #eceeff;
  cursor: pointer;
  border-radius: 8px;
}

Методы для округления десятичных чисел в целые числа ⏺ parseInt – метод, округляющий десятичное число, отсекая все цифры после точки ✔️ Math.round – метод, округляющий десятичное число, к ближайшему целому ✔️ Оба метода округляют числа, но совершенно по-разному. Тот или иной метод можно использовать в зависимости от цели получения конечного результата 👁‍🗨 Код со скрина:

var intByParseInt = parseInt(3.5)
console.log('Число обработанное методом parseInt:', intByParseInt)

var intByMathRound = Math.round(3.5)
console.log('Число обработанное методом Math.round:', intByMathRound)

"for...in" и "for...of" – это два разных типа циклов в JavaScript, и они имеют разные использования ♾ for...in используется для перебора свойств объектов 💲 for...of используется для перебора значений объектов, которые являются итерабельными (например массивы, строки, коллекции и так далее) 👁‍🗨 Код с видео:

const person = { name: 'John', age: 30, job: 'developer' };
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

console.log('')

const fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
  console.log(fruit);
}

Благодаря методу reduce можно развернуть массив с объектами (сложными элементами, которые имеют свойства вида ключ-значение) в отдельный объект и самому определить ключи для объектов (сложных элементов), доп. свойства и операции с объектами массива во время формирования объекта 🌀 Метод пригодится если массив состоит именно из объектов (сложных элементов) 👁‍🗨 В результате выполнения кода из видео мы развернули массив с объектами (сложными элементами c двумя свойствами) в объект с объектами (сложными элементами с одним свойством, но более сложным) ☑️ Код из видео это лишь пример развертывания массива в объект с помощью reduce. Я показал свой пример *️⃣ Код с видео:

const fruits = [{type: 'лимон', amount: 14},
                {type: 'манго', amount: 0},
                {type: 'груша', amount: 21}]
  
const object = fruits.reduce((acc, fruit, index) => {

    const key = `фрукт #${index + 1} - ` + fruit.type;
    acc[key] = { 'в наличии?': fruit.amount > 0 };

    return acc;
}, {});
  
console.log(object);

Промисы – это инструмент, позволяющий обрабатывать асинхронные операции и определять условия для решения или отклонения выполнения функции в зависимости от полученного результата операции 🚥 Основные функции промисов: - конструктор Promise для создания нового промиса. - метод resolve решающий промис, которому передается значение результата. - метод reject отклоняющий промис, которому передается значение ошибки. - метод then добавляющий обработчик для решения промиса. - метод catch добавляющий обработчик для отклонения промиса. Код с видео:

const DB = [5, 3, 2];
const request = 5;

const MyPromise = new Promise
    ((resolve, reject) => {
        
        const isPresent = DB.includes(request);
        
        if (isPresent) {
          resolve(`Такое число есть в базе данных`);
        } else {
          reject(`Такого числа нету в базе данных`);
        }
    });

MyPromise
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.error(error);
    });

Что ждет JavaScript в 2024 году 🗓 Сперва попробуем очень кратко подытожить изменения в JavaScript за прошедший 2023 год. (очень поверхностно в силу ограничения длины поста*) 🧐 Рассмотрим некоторые новые дополнения: - метод array.findLast() позволяющий найти последний элемент массива, удовлетворяющий заданному предикату. - метод array.toReversed() возвращающий обратную копию массива. - метод array.with() возвращающий неизменяемую копию массива с заменой указанного элемента. Новые дополнения к Node JS: - расширенная поддержка модуля ECMAScript - модернизированный двигатель V8 - экспериментальная поддержка Node JS для собственных модулей (NAPI) 🦾 На текущий же момент JavaScript крепко держит свою позицию. Его разновидность TypeScript становится все более популярной ⚡️Горизонт языка расширяется благодаря тенденциям, которые обусловлены продолжающейся популярностью React и Vue 📈 В 2024 году, по прогнозам экспертов, JavaScript по-прежнему будет основной частью стека разработки программного обеспечения

🍾 С наступающим или наступившим 2024 годом! 🎄 Планы для канала на будущий год: 1. Рассмотрение всех инструментов для JavaScript разработчика. 2. Рассмотрение проекта или проектов, который/ые будем писать с 0 на JavaScript + React Native. 3. Когда будет побольше подписчиков планируется открывать комментарии к постам для общения, решения совместных вопросов касающихся программирования на JS и совместное рассмотрение интересующих вас функций/проектов. 🎊 Спасибо за то что читаете, желаю отлично встретить новый 2024 год! 🎉

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

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5));

Array.from() – метод, благодаря которому можно переводить разнообразные данные в массивы 🔄 Метод может быть полезным при генерировании цифр в промежутке между конкретными двумя цифрами, допустим. Если у нас есть две вводные и вы хотите заполнить промежуток между ними 👁‍🗨 Мы можем создавать функции, в которых этот метод будет довольно полезным инструментом 🔧 На скрине пример создания массива цифр длинной в 5 элементов, то есть цифр от 1 до 5:

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

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

forEach() – метод, позволяющий пошагово перебрать все элементы массива. Метод в параметре получает функцию, которая выполнится для каждого элемента массива 👟 Благодаря этому методу можно отображать индексы элементов массива, выполнять математические операции. 👁‍🗨 Код со скрина:

let FIO = ["имя", "фамилия", "отчество"];

// поочередный вывод элементов массива в консоль
FIO.forEach(FIO => {
  console.log(FIO);
});
// консоль выдаст результат:
// имя
// фамилия
// отчество

Array.filter() – метод позволяющий прописать фильтр для отбора, например, чисел с массива ⚱️ Мы можем указать свое условие или несколько условий после "num => ..." 👁‍🗨 Код со скрина:

let numbers = [1, 2, 10, 15, 3];

// отбор парных чисел
let pairedNumbers = numbers.filter(num => num % 2 === 0);
console.log("pairedNumbers =", pairedNumbers);

// отбор чисел больше 5
let greaterThan = numbers.filter(num => num > 5);
console.log("greaterThan =", greaterThan);

Math.random() – метод, генерирующий случайное нецелое число от 0 до 1 🎲 Math.floor() – метод, основная функция которого является округление числа до меньшего целого (например, число 2.78 округлит до 2) 🔘 Код с видео:

// генерирует случайное нецелое число от 0 до 1
let randomNum = Math.random();
console.log("randomNum =", randomNum);

// генерирует случайное целое число от 1 до 5 
let randomInt = Math.floor(Math.random() * 5) + 1;
console.log("randomInt =", randomInt);

replace() – метод позволяющий заменять слова или символы в строках 🎭 Это может быть также полезно для форматирования текста, удаления или замены определенных символов 👁‍🗨 Код со скрина:

let message = "Земля плоская";

// замена слова "плоская" на "круглая"
let newMessage = message.replace("плоская", "круглая");

console.log(newMessage);
// консоль выдаст "Земля круглая"

includes() – отличный способ избежать лишних циклов или условных операторов при проверке наличия элементов в массиве 🔍 Код с видео:

let fruits = ['banana', 'apple', 'avocado'];

let test1 = fruits.includes('avocado');
console.log('test1:', test1);

let test2 = fruits.includes('onion');
console.log('test2:', test2);

Легкий способ проведения математических манипуляций с каждым элементом массива одновременно 🧮 map() – метод позволяющий вносить изменения в массив, получая новый массив с изменёнными элементами первоначального массива 🗺 Пример умножения элементов массива numbers:

// умножение каждого элемента массива на 2
let numbers = [2, 10, 5];
let doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers);
// консоль выдаст результат [4, 20, 10]