JavaScript заметки

Взять последние элементы из массива Обратите внимание: метод slice доступен для массива так же, как и для строки.

const numbers = [10, 20, 30, 40, 50];
const last = numbers.slice(-1);
console.log(last); // [50]
const secondLast = numbers.slice(-2);
console.log(secondLast); // [40, 50]

#методы

Internationalization API Internationalization API — интерфейс, предоставляемый браузером. Он позволяет выполнять интернационализацию и локализацию веб-приложений. Данная статья поможет разобраться с Internationalization API. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Найти количество пропсов в объекте const user = { name: 'David', age: 30, city: 'NY' }; console.log(Object.keys(user).length); // 3 #полезно

Three.js и тетрис Three.js — это легковесная кросс-браузерная библиотека JavaScript, используемая для создания и отображения анимированной трехмерной компьютерной графики в веб-браузере. Скрипты Three.js можно использовать в сочетании с элементом холста HTML5, SVG или WebGL. В данной статье продемонстрировано, как с помощью Three.js можно создать трехмерный тетрис. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Обновить пропсы объекта с помощью оператора spread const user = { name: 'David', age: 30, city: 'NY' }; const newAge = 40; const updatedUser = { ...user, age: newAge }; console.log(user); // { name: 'David', age: 30, city: 'NY'} console.log(updatedUser); // { name: 'David', age: 40, city: 'NY'} #полезно

Трекер расходов SheetJS — это библиотека JavaScript для Excel, которая позволяет преобразовывать html-таблицу, массив или json в загружаемый xlsx-файл. Все это делается прямо в браузере. Благодаря этой статье ты узнаешь, как создать трекер расходов с помощью SheetJS. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇 ▪️ Senior Frontend — JS, HTML и CSS ▪️ Frontend Interview — как проходить собеседования ▪️ Web Craft — только Web-разработка ▪️ Frontender Libs — библиотеки для фронтендера

Выполнить обработчик событий только один раз document.getElementById("btn").addEventListener("click", function () { console.log("Button clicked!"); }, { once: true } ); #полезно

Редко используемые API Делимся статьей, где автор рассказывает про 4 API. Они редко используются, однако очень полезны. К ним относятся Beacon, Clipboard, Notifications и Perfomance. Присутствует ссылка на репозиторий с примерами. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Быстрый способ создать маску для числа методами slice и padStart const creditCard = "4111111111114321"; // номер кредитной карты из 16 цифр const lastFourDigits = creditCard.slice(-4); // получить последние 4 цифры // добавить * к lastFourDigits, чтобы длина тоже была равна 16 const maskedNumber = lastFourDigits.padStart(creditCard.length, '*'); console.log(lastFourDigits); // 4321 console.log(maskedNumber); // ************4321 #полезно

Callback-функции Колбэк — это функция, которая должна быть выполнена после завершения выполнения другой функции. Такие функции необходимы, потому что многие действия JavaScript являются асинхронными. Это означает, что они на самом деле не останавливают выполнение программы (или функции) до тех пор, пока они не будут завершены. Данная статья поможет разобраться с колбэк-функциями. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

​​Платные курсы по фронтенду больше не нужны! Эта подборка, закроет честные 90% потребностей фронтенеров любого уровня. @build_html — сотни бесплатных макетов для верстки на русском языке. @on_the_frontend — дайджест самых актуальных статей по фронтенду. @frontend_tests — сборник задач (с их разбором) для прокачки теоретических знаний и подготовки к собеседованиям. @job_frontend — подборка лучших вакансий для фронтенд разработчиков. Чат фронтендеров — место где можно задать вопрос и получить на него ответ. Поверь, это то, что тебе нужно! Подпишись, чтобы не потерять.

Optional Chaining Эта функция идет «в комплекте» с Nullish Coalescing for JavaScript, особенно в TypeScript. Разработчики TypeScript объявили, что они включат Nullish Coalescing for JavaScript и это proposal в свой следующий релиз, 3.7.0. const city = country && country.city; // undefined if city doesn't exist Взгляните на код в данном примере. Чтобы получить «город» (city), который находится в объекте «страна» (country), мы должны сперва проверить, существует ли «страна» и существует ли «город» в «стране». С помощью Optional Chaining этот код можно отрефакторить следующим образом:

const city = country?.city; // undefined if city doesn't exist

Эта функция кажется очень удобной и полезной в данной ситуации. #функции

Генератор коротких CSS классов и id Делимся статьей, где автор демонстрирует генерацию коротких css классов и id элементов в html верстке. Приведен алгоритм и требования к генератору, также присутствует ссылка на npm пакет. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Нулевое слияние для JavaScript Все мы часто писали такой код:

const obj = {
name: 'James'
};
const name = obj.name || 'Jane'; // James

Если obj.name является ложным, возвращается «Jane», а 'undefined' возвращаться не будет. Но проблема в том, что пустая строка ('') также будет считаться ложью в этом случае. Так что мы должны переписать код снова, как показано ниже.

const name = (obj.name && obj.name !== '') ? obj.name : 'Jane';

Каждый раз писать такой код – это головная боль. Эта фича позволяет нам проверять только null и undefined. #полезно

Свои правила для ESLint ESLint — это проект с открытым исходным кодом, который помогает тебе находить и устранять проблемы с кодом JavaScript. ESLint статически анализирует твой код, чтобы быстро найти проблемы. Он встроен в большинство текстовых редакторов. В данной статье автор рассказывает, как можно разработать собственные правила для ESLint. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Top-level await Мотивация для внедрения этой функции заключалась в том, что когда вы импортируете модуль (import) с асинхронной (async) функцией, выходные данные этой асинхронной функции не определены (undefined).

// awaiting.mjs
import { process } from "./some-module.mjs";
const dynamic = import(computedModuleSpecifier);
const data = fetch(url);
export const output = process((await dynamic).default, await data);

Представим себе два файла. Выходные данные (output) могут быть неопределенными (undefined), если они вызываются прежде чем выполнены Promises tasks.

// usage.mjs
import { output } from "./awaiting.mjs";
export function outputPlusValue(value) { return output + value }
console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100), 1000);

usage.mjs не выполнит ни одного из утверждений в нем, пока await'ы в awaiting.mjs не дождутся разрешения своих Promises. #функции

CORS Совместное использование ресурсов различными источниками (CORS) — это механизм безопасности на основе HTTP, который контролируется и применяется клиентом (веб-браузером). Это позволяет службе (API) указывать любой источник, кроме своего собственного, из которого клиент может запрашивать ресурсы. Делимся статьей, где автор знакомит с CORS. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Числовые разделители Когда вы присваиваете переменной большое числовое значение, вас не смущает вопрос насколько оно большое и правильно ли вы его написали? Эта фича позволит вам поставить знак «подчеркивание» между цифрами, чтобы вам было проще подсчитать их количество в числе.

1_000_000_000 // Ah, so a billion
101_475_938.38 // And this is hundreds of millions
let fee = 123_00; // $123 (12300 cents, apparently)
let fee = 12_300; // $12,300 (woah, that fee!)
let amount = 12345_00; // 12,345 (1234500 cents, apparently)
let amount = 123_4500; // 123.45 (4-fixed financial)
let amount = 1_234_500; // 1,234,500
let budget = 1_000_000_000_000;
// What is the value of budget? It's 1 trillion!
//
// Let's confirm:
console.log(budget === 10 ** 12); // true

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

Сканер предварительной загрузки Один упускаемый из виду аспект оптимизации скорости страницы включает в себя знание внутреннего устройства браузера. Браузеры делают определенные оптимизации для повышения производительности способами, которые разработчики не могут сделать. В данной статье автор рассказывает про сканер предварительной загрузки и пропуск невидимого контента. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью