JavaScript Ready | Программирование
8.18K subscribers
987 photos
60 videos
524 links
Авторский канал по разработке на JavaScript.
Ресурсы, обучения, задачи, шпаргалки.
Ежедневно информация пополняется!

Cотрудничество: @energy_c
Download Telegram
📂 Шпаргалка по HTTP-методам для разработчика!

Например, GET получает данные, POST создаёт новый ресурс, PUT обновляет его целиком, а PATCH — только необходимые поля.

На картинке собраны 9 основных HTTP-методов с примерами запросов и ответов — пригодится при разработке API и работе с fetch, Axios или backend.

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

📣 JS Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥6🤝5
Не теряйте настоящую причину ошибки при создании новой!

При обработке ошибок часто хочется добавить контекст. Но обычный throw new Error(...) скрывает исходную ошибку, из-за чего отладка становится сложнее.
try {  
return await fetchUser(id);
} catch (error) {
throw new Error(`Не удалось загрузить user ${id}`);
}


В JavaScript у Error есть опция cause, которая позволяет сохранить оригинальную ошибку внутри новой.
try {  
return await fetchUser(id);
} catch (error) {
throw new Error(`Не удалось загрузить user ${id}`, {
cause: error
});
}


Теперь выше по стеку доступен и понятный контекст, и первоначальная причина сбоя:
try {  
await loadUser(42);
} catch (error) {
console.log(error.message);
console.log(error.cause);
}


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

📣 JS Ready | #совет
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9🔥6👍5
📂 Напоминалка про идемпотентность!

Например, идемпотентность позволяет безопасно повторять запросы при сетевых сбоях, не создавая дубликаты операций — повторный запрос не приведёт ко второму платежу, заказу или аккаунту.

На картинке — 6 основных случаев, где идемпотентность особенно важна: REST API, платежи, заказы, операции с базой данных, управление аккаунтами и распределённые сообщения.

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

📣 JS Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥7❤6🤝1
📂 Шпаргалка по основным возможностям JavaScript!

На ней собраны основные конструкции языка и часто используемые методы: массивы, строки и объекты, функции, DOM и события, Promise, async/await, JSON, destructuring, spread/rest и работа с localStorage.

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

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

📣 JS Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍7❤6
📱 Reflect API — низкоуровневые операции с объектами и функциями!

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

📣 JS Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍7🤝4
😎 Необычная статья попалась на Хабре: «Как сделать игру для ZX Spectrum в 2026 (и зачем)»!

В этой статье:
• Узнаете, как сегодня создать полноценную игру для ZX Spectrum с помощью Dizzy SE;
• Разберёте создание пиксельной графики, карты, спрайтов, игровой логики и диалогов;
• Посмотрите, как добавить музыку и собрать всё в работающую ретро-игру с ограничениями 8-битного компьютера.

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


📣 JS Ready | #статья
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10👍6🔥5
Используйте optional chaining не только для чтения — он умеет больше!

Большинство знают ?. только как замену длинным проверкам:
if (user && user.profile) {
console.log(user.profile.name);
}


Но у optional chaining есть менее очевидное применение — безопасный вызов методов и функций.

Например, раньше часто писали:
if (callback) {
callback(data);
}


Теперь:
callback?.(data);


Если функции нет — ничего не произойдет.

То же самое работает с методами:
const result = api.getUser?.(id);


И с массивами:
users.find?.(u => u.id === 10);


Еще один полезный случай — безопасный доступ к динамическим ключам:
const value = config.handlers?.[eventName];


Без дополнительных проверок:
if (
config &&
config.handlers &&
config.handlers[eventName]
) {
...
}


🔥 ?. — это не просто короткая запись для вложенных объектов. Это механизм доступа к любым необязательным частям кода: функциям, методам, массивам и динамическим свойствам.

📣 JS Ready | #совет
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13🔥9👍6
📂 JavaScript Array Methods — шпаргалка по работе с массивами!

Собраны основные методы Array: добавление и удаление элементов, поиск и проверка, преобразование, копирование, сортировка и операции, изменяющие исходный массив.

Отдельно удобно видеть разницу между мутирующими методами вроде splice(), sort() и reverse() и современными немутирующими альтернативами — toSpliced(), toSorted() и toReversed().

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

📣 JS Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍7❤5
В каких случаях может быть нужен Object.is()?

Большинство сравнений в JavaScript делают через ===:
console.log(NaN === NaN);
// false

console.log(+0 === -0);
// true


Но у этого поведения есть два исключения: NaN никогда не равен самому себе, а +0 и -0 считаются одинаковыми.

Если нужно сравнение по алгоритму SameValue, используйте Object.is():
console.log(Object.is(NaN, NaN));
// true

console.log(Object.is(+0, -0));
// false


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

Например:
function changed(prev, next) {
return !Object.is(prev, next);
}


Теперь изменение NaN → NaN не будет считаться изменением, а +0 и -0 будут различаться.

🔥 Object.is() — не замена ===, а специализированный инструмент для случаев, когда нужны точные правила сравнения JS.

📣 JS Ready | #совет
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12❤7👍5
📂 Напоминалка по архитектуре REST API!

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

На картинке — основные принципы REST: Client-Server, Stateless, Uniform Interface, Cacheable, Layered System и Code on Demand, а также примеры HTTP-методов и взаимодействия клиента с сервером.

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

📣 JS Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9❤6👍6
ArrayBuffer.transfer() — переносим содержимое буфера!

При обработке файлов, изображений, аудио и сетевых данных часто приходится изменять размер бинарного буфера или передавать его содержимое в новый ArrayBuffer. Обычно для этого нужно создать новый буфер и вручную скопировать байты, а transfer() объединяет эти действия в одну операцию.

Для начала создадим небольшой буфер и запишем в него четыре значения:
const buffer = new ArrayBuffer(8);
const bytes = new Uint8Array(buffer);

bytes.set([10, 20, 30, 40]);
console.log(bytes);


ArrayBuffer хранит непосредственно бинарные данные, а Uint8Array предоставляет представление для чтения и записи отдельных байтов. Оба объекта используют одну область памяти, поэтому изменения через bytes сразу отражаются в buffer.

Теперь перенесём содержимое в новый буфер:
const moved = buffer.transfer();

console.log(moved.byteLength); // 8
console.log(buffer.byteLength); // 0


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

Проверим, что значения сохранились после переноса:
const movedBytes = new Uint8Array(moved);

console.log([...movedBytes]);
// [10, 20, 30, 40, 0, 0, 0, 0]


Новый Uint8Array создаётся уже поверх moved. Первые четыре байта содержат записанные значения, а оставшаяся часть буфера по-прежнему заполнена нулями.

Во время переноса можно сразу указать новый размер:
const expanded = moved.transfer(16);

console.log(expanded.byteLength); // 16
console.log([...new Uint8Array(expanded)]);


При увеличении размера существующее содержимое сохраняется, а дополнительная область заполняется нулями. Что удобно для постепенно растущих бинарных данных: не требуется отдельно создавать буфер нужного размера и вызывать TypedArray#set() для ручного копирования.

Уменьшение выполняется тем же способом:
const trimmed = expanded.transfer(4);

console.log(trimmed.byteLength); // 4
console.log([...new Uint8Array(trimmed)]);
// [10, 20, 30, 40]


Если новый размер меньше исходного, в результирующем буфере остаются только байты, которые помещаются в заданную длину. Буфер expanded, как и предыдущие исходные буферы, после переноса становится отсоединённым.

🔥 ArrayBuffer.transfer() полезен там, где нужно передать владение бинарными данными или изменить размер буфера без ручного копирования. При этом важно помнить, что после каждого переноса исходный буфер становится недоступен для дальнейшего использования.

📣 JS Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤6👍4🤝3
📂 Шпаргалка по JavaScript Promise!

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

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

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

📣 JS Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍9❤5🤝2
📱 Iterator API — управление итерацией и ленивые преобразования!

Шпаргалка по основным возможностям Iterator API: ручное управление итерацией, досрочное завершение и передача ошибок, создание iterable-объектов и ленивые преобразования через Iterator Helpers. Полезная база для углубления знаний об итераторах, генераторах и обработке последовательностей данных.

📣 JS Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍7🤝5❤2