📂 Шпаргалка по JavaScript Promise!

Например, then() используется для обработки успешного выполнения, catch() — для ошибок, а finally() позволяет выполнить код независимо от результата.

На картинке собраны основные методы Promise, работа с цепочками, обработка ошибок, состояния pending, fulfilled и rejected, а также методы для работы с несколькими Promise — all(), allSettled(), race() и any().

Сохрани, чтобы было под рукой!

📣 JS Ready | #ресурс

👨‍💻 Мега занимательная статья на Хабре: «Как я перестал бояться и полюбил ассемблер»!

В этой статье:
• Узнаете, как сегодня разрабатывать программы и игры для легендарного Atari ST 1985 года;
• Разберёте оптимизацию кода под Motorola 68000 с помощью C и ассемблера;
• Посмотрите, как автор портировал DOOM на Atari ST и заставил его работать на железе с 8 МГц и несколькими мегабайтами памяти.

Продолжай читать на Habr!

📣 JS Ready | #статья

📂 Шпаргалка по Event Loop в JavaScript!

Например, Promise.then() выполняется через Microtask Queue и имеет более высокий приоритет, чем setTimeout(), который попадает в Task Queue.

На картинке — основные компоненты JavaScript Event Loop:
Call Stack, Web APIs, Microtask Queue, Task Queue и сам цикл событий, который управляет выполнением синхронных и асинхронных операций.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

📂 Шпаргалка по Git Merge vs Git Rebase!

Например, git merge используется для объединения веток с сохранением полной истории изменений, а git rebase позволяет перенести коммиты на новую базу и сделать историю проекта более линейной.

На картинке показана разница между двумя подходами работы с ветками Git: как выглядит история коммитов после merge, где появляется отдельный merge-коммит, и после rebase, где изменения перестраиваются поверх актуальной ветки.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

Не синхронизируйте состояние — вычисляйте его!

Одна из частых причин багов — хранить одно и то же состояние в нескольких представлениях:

let items = [];
let total = 0;

items.push(product);

// Теперь нужно не забыть обновить total

Рано или поздно один участок кода изменит items, но забудет обновить total. Появляются два источника истины.

Если значение однозначно получается из других данных — вычисляйте его:

const total = items.reduce(
  (sum, item) => sum + item.price,
  0
);

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

Если вычисление действительно дорогое, тогда уже имеет смысл мемоизировать его — но не создавать второе изменяемое состояние:

const visibleUsers = users.filter(
  user => user.active && user.role === role
);

🔥 Чем меньше состояний приходится синхронизировать вручную, тем меньше невозможных комбинаций может появиться в программе.

📣 JS Ready | #совет

📂 Шпаргалка по Cache Systems!

Например, Redis используется как быстрый in-memory cache для хранения часто запрашиваемых данных, сессий и временных значений, чтобы уменьшить нагрузку на базу данных. А CDN Cache позволяет отдавать статический контент ближе к пользователю, сокращая задержки и количество запросов к основному серверу.

На картинке — основные уровни кэширования в современных системах.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

Используйте Proxy для создания объектов с поведением, а не просто данных!

Многие используют объекты только как хранилище:

const config = {
  theme: 'dark',
  lang: 'ru'
};

Но иногда нужно, чтобы объект сам выполнял логику при чтении или изменении данных.

Для этого в JavaScript есть Proxy.

const user = new Proxy({}, {
  get(target, property) {
    console.log(`Reading ${property}`);

    return target[property];
  }
});

Теперь обычное обращение к свойству запускает вашу логику:

user.name;

Можно создавать объекты с автоматическими значениями:

const settings = new Proxy({}, {
  get(target, key) {
    return target[key] ?? 'default';
  }
});

console.log(settings.theme);
// default

Или автоматически валидировать изменения:

const user = new Proxy({}, {
  set(target, key, value) {
    if (key === 'age' && value < 0) {
      throw new Error('Invalid age');
    }

    target[key] = value;
    return true;
  }
});

Теперь:

user.age = -5;
// Error

Такой подход используется внутри Vue 3 для реактивности, а также часто применяется в SDK, конфигурациях и слоях валидации.

🔥 Proxy позволяет превращать обычные объекты JavaScript в объекты с собственной логикой поведения, не меняя код, который с ними работает.

📣 JS Ready | #совет

📂 Напоминалка по циклам в JavaScript!

Например, for удобно использовать, когда заранее известно количество итераций, а for...of — когда нужно пройтись по массиву или строке.

На картинке — 5 циклов, которые постоянно встречаются в коде.

Сохрани, чтобы не забыть!

📣 JS Ready | #ресурс

Создаём индекс данных из массива для быстрого поиска через Map!

При работе с данными из API часто требуется получать элементы массива по идентификатору. Самый простой вариант — использовать find(), но при большом количестве повторных поисков такой подход приводит к постоянному перебору коллекции.

Например, поиск пользователя по id:

const users = [
  {
    id: 1,
    name: "Alex"
  },
  {
    id: 2,
    name: "John"
  }
];

const user = users.find(
  user => user.id === 2
);

console.log(user);

Метод find() последовательно проверяет элементы массива и возвращает первое совпадение.

Для единичного поиска этого достаточно. Но если выполнять такие операции внутри циклов или часто обращаться к одним и тем же данным, появляется лишняя нагрузка: каждый вызов снова проходит массив от начала до нужного элемента.

Вместо этого можно заранее создать индекс, где идентификатор будет использоваться как ключ, а объект — как значение:

const usersById = new Map(
  users.map(user => [
    user.id,
    user
  ])
);

console.log(
  usersById.get(2)
);

Теперь получение пользователя выполняется через ключ без повторного перебора массива.

По сложности подходы отличаются:

find() - O(n)
Map.get() - O(1) в среднем

Поэтому такой паттерн особенно полезен при работе с большими коллекциями и частыми операциями чтения.

Например, пользователи и их настройки могут приходить отдельными запросами:

const settings = [
  {
    userId: 1,
    theme: "dark"
  },
  {
    userId: 2,
    theme: "light"
  }
];

const settingsByUser = new Map(
  settings.map(item => [
    item.userId,
    item
  ])
);

После создания индекса можно собрать итоговую структуру данных без вложенных поисков внутри массива:

const result = users.map(user => ({
  ...user,
  settings: settingsByUser.get(user.id)
}));

console.log(result);

В результате каждый объект получает связанные данные через быстрый поиск по ключу. Такой подход часто применяется при подготовке данных для таблиц, списков, кэширования результатов запросов, нормализации состояния приложения и работе с большими наборами данных.

Для создания индекса также можно использовать обычный объект:

const usersById = Object.fromEntries(
  users.map(user => [
    user.id,
    user
  ])
);

console.log(usersById[2]);

Однако Map лучше подходит для динамических коллекций, где требуется часто добавлять, удалять или получать элементы. Кроме того, он поддерживает любые типы ключей, имеет встроенное свойство size и не зависит от прототипа объекта.

Важно учитывать, что индекс — это дополнительная структура в памяти. Если нужен один поиск, обычный find() может быть проще и понятнее. Но при многократном доступе к данным создание индекса позволяет значительно сократить количество лишних операций.

🔥 Создание индекса из массива позволяет заранее подготовить данные для быстрого доступа и избежать повторных линейных поисков при обработке коллекций.

📣 JS Ready | #практика

📂 Напоминалка по тестированию API!

Например, Smoke Testing проверяет, что критичные эндпоинты вообще доступны, а Contract Testing помогает убедиться, что запросы и ответы по-прежнему соответствуют API-контракту.

На картинке — 9 основных видов API-тестирования: от функциональных и интеграционных тестов до нагрузочного, security- и fuzz-тестирования.

Сохрани, чтобы не потерять!

📣 JS Ready | #ресурс

JavaScript умеет освобождать ресурсы сам, без finally!

Когда код временно открывает ресурс, соединение, файл, lock или подписку — его обязательно нужно закрыть даже при ошибке. Обычно для этого пишут try/finally:

const connection = openConnection();

try {
  await connection.query(sql);
} finally {
  connection.close();
}

Современный JS поддерживает явное управление ресурсами. Объект может определить Symbol.dispose, а using гарантированно вызовет его при выходе из области видимости:

function openConnection() {
  return {
    query(sql) {
      return db.query(sql);
    },

    [Symbol.dispose]() {
      db.close();
    }
  };
}

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

{
  using connection = openConnection();

  await connection.query(sql);
}
// connection[Symbol.dispose]() уже вызван

Для ресурсов с асинхронной очисткой существует отдельная пара await using и Symbol.asyncDispose:

await using connection = await connect();

await connection.query(sql);

// await connection[Symbol.asyncDispose]()

🔥 using полезен для ресурсов с чётким временем жизни: файлов, соединений, блокировок и временных подписок. Жизненным циклом управляет сам scope.

📣 JS Ready | #совет