LibCode»Блог

LibCode — это библиотека кода и знаний для разработчиков, где каждый найдет полезные ресурсы, уроки и инструменты для создания и совершенствования своих проектов.

MySQL | PHP | Python | C++ | JavaScript

Создано при поддержке GigaChat.

JavaScript: Promises и async/await

Асинхронное программирование — это одна из важнейших концепций в JavaScript, позволяющая выполнять задачи без блокировки основного потока исполнения. В ES6 (EcmaScript 2015) появились промисы (promises), а в ES8 (EcmaScript 2017) добавилась возможность использования async/await, что значительно упростило работу с асинхронным кодом.

Что такое Promises?


Промисы — это объекты, представляющие результат будущей операции. Они могут находиться в трех состояниях:
  • Pending: ожидание результата.
  • Resolved: операция выполнена успешно.
  • Rejected: операция завершилась неудачей.

Пример использования Promises:
const waitForIt = ms => new Promise(resolve => setTimeout(resolve, ms));

waitForIt(2000)
  .then(() => console.log("Готово!"))
  .catch(error => console.error(error));

Что такое async/await?


Async/await — это синтаксический сахар для работы с промисами, позволяющий писать асинхронный код в виде последовательного, синхронного кода.

Пример использования async/await:
async function
...

JavaScript: Модули

Модули в JavaScript — это мощная возможность, появившаяся в ES6 (EcmaScript 2015), которая позволяет разделять код на отдельные файлы и организовывать его в виде независимых компонентов. Это значительно упрощает разработку больших приложений и улучшает структуру кода.

Что такое модули в JavaScript?


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

Ключевые концепции модулей:
  • Export: экспортирование функций, классов и переменных из модуля.
  • Import: импортирование экспортированных данных из других модулей.
  • Namespace: изоляция кода внутри модуля, предотвращающая конфликты имен.

Примеры использования модулей



1. Export и Import
// math.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from "./math.js";
console.log(add(1,
...

JavaScript: Операторы rest и spread

Операторы rest (...) и spread (...) были введены в ES6 (EcmaScript 2015) и добавили в JavaScript удобные механизмы для работы с массивами и объектами. Они позволяют собирать и распаковывать элементы массивов и объекты, что значительно упрощает работу с данными.

Что такое операторы rest и spread?



1. Spread Operator (...)
Spread оператор позволяет "распаковать" элементы массива или объекта в другом месте. Обычно используется для копирования массивов, объединения массивов и объектов, а также для передачи аргументов в функции.

2. Rest Parameter (...)
Rest parameter позволяет собрать оставшиеся аргументы функции в массив. Это удобно, когда неизвестно точное количество аргументов, которые передаются в функцию.

Примеры использования операторов rest и spread



1. Распространение массива (Spread Operator)
const nums = [1, 2, 3];
const moreNums = [...nums, 4, 5]; // [1, 2, 3, 4, 5]

// Копирование массива
const copyOfNums = [...nums];

// Передача аргументов в функцию
const maxValue =
...

JavaScript: Функция reduce()

Одной из самых полезных и недооценённых функций JavaScript является метод reduce(). Этот метод позволяет последовательно обработать элементы массива и свести их к одному значению, которое можно использовать далее. С помощью reduce() решаются самые разные задачи: суммирование, фильтрация, сортировка и многое другое.

Суть метода reduce()


Метод reduce() проходит по каждому элементу массива и накапливает результат предыдущего шага в специальном аккумуляторе. Результатом выполнения метода является конечное значение аккумулятора.

Синтаксис метода reduce()
arr.reduce(callback[, initialValue])

  • callback — функция обратного вызова, выполняющаяся на каждом шаге итерации.
  • initialValue — начальное значение аккумулятора (необязательно).

Функция обратного вызова имеет четыре аргумента:
function callback(acc, currentValue, index, arr) {
    // acc — аккумулированное значение
    // currentValue — текущий элемент массива
    // index — индекс текущего элемента
    // arr —
...

JavaScript: Destructuring (Быстрое извлечение данных)

Destructuring (Деструктуризация) — это одна из полезных возможностей, появившихся в ES6 (EcmaScript 2015), которая позволяет быстро и удобно извлекать значения из массивов и объектов. Она помогает сделать код более лаконичным и выразительным.

Что такое деструктуризация?


Destructuring — это способ присваивания переменных из массива или объекта. Она позволяет легко получить доступ к свойствам объекта или элементам массива и присвоить их значения другим переменным.

Синтаксис деструктуризации:
  • Массивы: const [first, second] = array;.
  • Объекты: const { prop1, prop2 } = object;.

Примеры использования деструктуризации



1. Деструктуризация массивов
const fruits = ["Apple", "Banana", "Cherry"];
const [firstFruit, secondFruit] = fruits;

console.log(firstFruit); // "Apple"
console.log(secondFruit); // "Banana"

2. Деструктуризация объектов
const person = { name: "John", age: 30 };
const { name, age } = person;

console.log(name); // "John"
console.log(age); // 30

3. Переименование с...