👁‍🗨 Добро пожаловать ✦

🟣 Канал создан с целью совместного обучения программированию на языке JavaScript 🟨

✔️ Канал подойдёт для тех кто:
1. Хочет научиться программировать на языке JavaScript условно с 0.
2. Для тех, кто желает расширить свой кругозор в знаниях интересных скриптов и функций на JavaScript.

♾ В канале я планирую:
➖ рассматривать построение кодов/скриптов (от самых простых до самых сложных);
➖ обмениваться вместе с участниками канала мнением о концепциях разных кодов/скриптов, библиотек и инструментов;
➖ публиковать посты про обновления касающихся программирования на JavaScript.

🎥 Ютуб канал: youtube.com/@codorum

Легкий способ проведения математических манипуляций с каждым элементом массива одновременно 🧮

map() – метод позволяющий вносить изменения в массив, получая новый массив с изменёнными элементами первоначального массива 🗺

Пример умножения элементов массива numbers:

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

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

replace() – метод позволяющий заменять слова или символы в строках 🎭

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

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

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

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

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

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);

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

Благодаря этому методу можно отображать индексы элементов массива, выполнять математические операции. 👁‍🗨

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

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

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

Array.from() – метод, благодаря которому можно переводить разнообразные данные в массивы 🔄

Метод может быть полезным при генерировании цифр в промежутке между конкретными двумя
цифрами, допустим. Если у нас есть две вводные и вы хотите заполнить промежуток между ними 👁‍🗨

Мы можем создавать функции, в которых этот метод будет довольно полезным инструментом 🔧

На скрине пример создания массива цифр длинной в 5 элементов, то есть цифр от 1 до 5:

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

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

Что ждет JavaScript в 2024 году 🗓

Сперва попробуем очень кратко подытожить изменения в JavaScript за прошедший 2023 год. (очень поверхностно в силу ограничения длины поста*) 🧐

Рассмотрим некоторые новые дополнения:
- метод array.findLast() позволяющий найти последний элемент массива, удовлетворяющий заданному предикату.
- метод array.toReversed() возвращающий обратную копию массива.
- метод array.with() возвращающий неизменяемую копию массива с заменой указанного элемента.

Новые дополнения к Node JS:
- расширенная поддержка модуля ECMAScript
- модернизированный двигатель V8
- экспериментальная поддержка Node JS для собственных модулей (NAPI)

🦾 На текущий же момент JavaScript крепко держит свою позицию. Его разновидность TypeScript становится все более популярной

⚡️Горизонт языка расширяется благодаря тенденциям, которые обусловлены продолжающейся популярностью React и Vue

📈 В 2024 году, по прогнозам экспертов, JavaScript по-прежнему будет основной частью стека разработки программного обеспечения

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

Основные функции промисов:
- конструктор 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);
    });

Благодаря методу 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);

"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);
}

Методы для округления десятичных чисел в целые числа ⏺

parseInt – метод, округляющий десятичное число, отсекая все цифры после точки ✔️

Math.round – метод, округляющий десятичное число, к ближайшему целому ✔️

Оба метода округляют числа, но совершенно по-разному. Тот или иной метод можно использовать в зависимости от цели получения конечного результата 👁‍🗨

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

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

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

Чем отличается 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)