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)

Лидером среди фреймворков JavaScript на сегодня остаётся React ⚛️

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

Статистику брал, в частности, с источника Google Trends 📊

По результатам голосования из прошлого поста сделал вывод что вам будет актуально узнавать разную полезную информацию по React ⚛️

Поэтому я регулярно буду делать посты и про React 👁‍🗨

Сегодня хотел бы рассказать вам про React хук useContext, позволяющий принимать компонентам React проекта данные из контекстов 🔁

Код из видео:

import React, { createContext, useContext } from 'react';


const Context = createContext();

// основной компонент
const MainComponent = () => {
  const number = 123;

  return (
    <Context.Provider
      value={number}>
      <ChildComponent />
    </Context.Provider>
  );
};

// подкомпонент
const ChildComponent = () => {
  const num = useContext(Context)

  return <p>{num}</p>; // num = number = 123
};

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

useReducer – это React хук, который используется для управления состоянием компонентов с помощью reducer-функции ↔️

reducer-функция – это функция, которая принимает параметры состояния компонента (state) и объект action.

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

Код из видео:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducerFunction = (state, action) => { switch (action.type) {
  case 'increment':
    return {count: state.count + 1};
  case 'decrement':
    return {count: state.count - 1};
  default:
    return state;
}};

const Component = () => {
  const [state, dispatch] = useReducer(reducerFunction, initialState)

  return (
    <div>
      <p>Счёт: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Увеличить</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Уменьшить</button>
    </div>
);};

export default Component;

Почти 23% аудитории нашего канала – дамы 🌸

Поэтому хочу от имени мужчин канала (думаю они будут только за) поздравить Вас – наших прекрасных дам с 8 марта 💐

Вы для нас как ясный лучик солнца в сумрачный день 🔆

Оставайтесь такими же прекрасными во всех отношениях! Помните, что мы вас ценим и любим 💜

Использование метода reduce открывает возможность выполнения сложных операций с элементами массива и сведения его до какого-то единого результата 🌀

На видео пример применения метода для нахождения максимального значения в массиве:
➖ есть массив numbers с элементами
➖ я создал новую переменную maxNumber
➖ через равно указал название массива с элементами и метод reduce
➖ в скобках указал условие по отбору числа

max (accumulator - аккумулятор) – это значение самого большого элемента на каждой итерации ℹ️

num (currentValue - текущий элемент массива) – это значение, представляющее элемент массива, который сравнивается с самым большим элементом на момент какой-то итерации ℹ️

В ходе выполнения кода будет произведено 4 итерации, на каждой из которых будет выполнено сравнение каждого элемента массива 👁‍🗨

Код из видео:

let numbers = [2, 8, 9, 6];

let maxNumber = numbers.reduce((max, num) => (num > max ? num : max), numbers[0]);

console.log("Максимальное значение =", maxNumber);

join – метод, позволяющий объединить элементы массива в один ряд. Метод join можно использовать для создания текстового представления массива, соединенного нашим собственным разделителем 🤝

В видео я показал как можно объединить не только элементы массива в одну строку с помощью метода join, но и как можно объединить свойства объекта 👁‍🗨

Для этого нужно заранее выполнить деструктуризацию его свойств и в качестве элементов массива подставить переменные, полученные в следствии деструктуризации 📤

Код из видео:

// ✦ Oбъединение элементов массива
let words = ["Codorum", "-", "пишу", "на", "js",];
let sentence = words.join(" ");

console.log("sentence =", sentence);

// ✦ Oбъединение свойств объекта
let passwordElements = { block_1: '1SF2', block_2: '3S2G', block_3: 'SK1F' };
let { block_1, block_2, block_3 } = passwordElements;
//    block_1 = "1SF2", block_2 = "3S2G", block_3 = "SK1F"

let passwordMap = [block_1, block_2, block_3];
let password = passwordMap.join("-");

console.log("password =", password);

useMemo – это React хук, который используется для мемоизации (сохранения) результатов обработки значений функциями ⏺

Хук useMemo помнит результаты вычислений и возвращает их при следующих вызовах, если вводные данные ранее обрабатывались функцией 🧠

Это делает его эффективным помощником в оптимизации проекта 👁‍🗨

Код из видео:

import React, { useMemo, useState } from 'react';

const Component = () => {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState(0);

  const square = useMemo(() => {
    return count ** 2;
  }, [count]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleCalculate = () => {
    setCount(parseInt(inputValue));
  };

  return (
    <div>
      <p>Введите число:</p>
      <input type="number" value={inputValue} onChange={handleInputChange}/>
      <button onClick={handleCalculate}>Узнать квадрат числа</button>
      <p>Квадрат числа {count} = {square}</p>
    </div>
  );
};

export default Component;

attr функция – это функция, позволяющая использовать значения атрибутов HTML-элементов в качестве значений свойств в CSS 🎏

Функция позволяет динамически использовать значения атрибутов для отображения текста, URL или других значений, определенных в HTML, непосредственно в свойствах CSS 🔷

В видео я показал, как передать переменную count из React компонента в псевдоэлемент ::before 👁‍🗨

Код из видео:

// ✦ index.js

import React from 'react';
  
const Component = () => {
  
  let count = 3;

  return (
    <div>
      <button count={count}>Кнопка</button>
    </div>
  );
};
  
export default Component;

// ✦ index.css

button {
  position: relative;
}

button::before {
  content: attr(count);
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #f74a67;
  color: white;
}

Связка метода map с методами toUpperCase и toLowerCase позволяет легко переводить слова предложения в верхний или нижний регистр 🔃

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

Далее указать метод map и в скобках указать, что для слов мы хотим применить метод toUpperCase или toLowerCase ✔️

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

Код из гифки:

let sentence1 = ["Codorum - пишу на JavaScript"];
// перевод слов в верхний регистр
let sentenceUpperCase = sentence1.map(word => word.toUpperCase());

console.log('sentenceUpperCase =', sentenceUpperCase);


let sentence2 = ["ВТОРОЕ ПРЕДЛОЖЕНИЕ"];
// перевод слов в нижний регистр
let sentenceLowerCase = sentence2.map(word => word.toLowerCase());

console.log('sentenceLowerCase =', sentenceLowerCase);

С помощью метода every можно проверить удовлетворяет ли каждый элемент массива какому-то условию ⏺

Основная и по сути единственная функция метода every – проверка элементов массива на определенное условие, но метод можно комбинировать с другими методами, такими как map, filter или reduce, чтобы добиться какого-то определенного результата 🔽

Метод возвращает true, если условие выполняется для всех элементов массива, и false, если напротив 👁‍🗨

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

let numbers = [6, 13, 20, 21, 23, 27, 30, 8, 12, 14];

// проверка, все ли элементы больше чем 5
let OverThan5 = numbers.every(num => num > 5);

console.log("Все элементы массива numbers больше пяти:", OverThan5);