Лайфхаки для улучшения кода

Делимся статьей, где автор демонстрирует полезные лайфхаки для улучшения кода. К ним относятся опциональны цепочки, оператор нулевого слияния, динамический импорт и другие.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

9. 0.1 + 0.2 !== 0.3

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

Для того чтобы преодолеть данный казус есть два метода (выбор за вами):

• Конвертирование значений в целые, вычисления, а затем обратная конвертация к десятичным дробям.
• Построение логики так, чтобы работать с диапазоном чисел, а не точным значением.

Например, вместо такого кода:

var num1 = 0.1, num2 = 0.2, shouldEqual = 0.3;
alert(num1 + num2 == shouldEqual); //Выдаст сообщение 'false'

Можно построить выражение так:

alert(num1 + num2 > shouldEqual - 0.001 && num1 + num2 < shouldEqual + 0.001); //Выдаст сообщение 'true'

В данном примере результат сложения 0.1 + 0.2 оценивается как попадание в диапазон чисел около 0.3 с точностью 0.001.

#полезно

Быстрая сортировка

QuickSort — это алгоритм «разделяй и властвуй». Он выбирает элемент в качестве опорного элемента и разбивает заданный массив вокруг выбранного опорного элемента. Существует много разных версий quickSort, которые по-разному выбирают точку опоры. Данная статья поможет разобраться с алгоритмом.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Undefined может быть Defined

Звучит, конечно, странно, но undefined не является зарезервированным словом в JavaScript, хотя и имеет специальное значение для выявления неопределенных переменных:

var someVar;
alert(someVar == undefined); //Выдаст сообщение 'true'

На первый взгляд все отлично. Но:

undefined = "Я имею значение!";
var someVar;
alert(someVar == undefined); //Выдаст сообщение 'false'!

#полезно

Делаем эффектную фотогалерею на сайте

В данной статьей демонстрируется создание трехмерной фотогалереи. Проект состоит из HTML-страницы, где находится карусель; CSS-файла, где настраивается внешний вид карусели в целом; скрипта на JavaScript, в котором реализована работа карусели с фотографиями.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

flat

Это метод, который создает новый массив со всеми элементами вложенного массива, рекурсивно объединенными с вышестоящим массивом до заданной глубины.

const array = [1, 2, [3, 4]];
array.flat(); // [1, 2, 3, 4];

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

const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]];
crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8];

Чем глубже вы погружаетесь в массив, тем больше вычислительного времени потребуется для его выравнивания. Обратите внимание, что IE и Edge не поддерживают эту функцию.

#методы

Map против Set

Set — это множество данных коллекции, которое должно состоять из уникальных значений. Map — это коллекция ключ/значение. Map и Set имеют схожие методы; к ним относятся .has(), .get(), .delete() и .size(). Данная статья рассказывает, когда нужно использовать Map и Set.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

flatMap

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

const arr = ["it's Sunny in", "", "California"];
arr.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

Разница между flat и flatMap заключается в том, что во flatMap вы можете поместить пользовательскую функцию для управления каждым значением. Кроме того, в отличие от flat, flatMap выравнивает только массивы с уровнем вложенности 1. Возвращаемое значение должно быть типом массива. Это может быть очень полезно, если вы должны что-то сделать, прежде чем выровнять массив.

#методы

Сканер предварительной загрузки

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Числовые разделители

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

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

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

#полезно

CORS

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

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.

#функции

Свои правила для ESLint

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Нулевое слияние для 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.

#полезно

Генератор коротких CSS классов и id

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

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

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

#функции

Callback-функции

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Редко используемые API

Делимся статьей, где автор рассказывает про 4 API. Они редко используются, однако очень полезны. К ним относятся Beacon, Clipboard, Notifications и Perfomance. Присутствует ссылка на репозиторий с примерами.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Трекер расходов

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью