WeakMaps

Чтобы хранить частные версии данны можем использовать WeakMaps для хранения наших значений:

let _age = new WeakMap();
class Person {
constructor(age) {
_age.set(this, age);
}

incrementAge() {
let age = _age.get(this) + 1;
_age.set(this, age);
if (age > 50) {
console.log('Midlife crisis');
}
}
}

Самое интересное в использовании WeakMaps для хранения наших личных данных заключается в том, что их ключи не выдают имена свойств, которые можно увидеть с помощью Reflect.ownKeys():

> const person = new Person(50);
> person.incrementAge(); // 'Midlife crisis'
> Reflect.ownKeys(person); // []

#функции

Async Await в языке JavaScript

Async Await позволяет выполнять то же самое, что мы выполнили с помощью генераторов и промисов, но с меньшими усилиями:

var request = require('request');

function getJSON(url) {
return new Promise(function(resolve, reject) {
request(url, function(error, response, body) {
resolve(body);
});
});
}

async function main() {
var data = await getJSON();
console.log(data); // NOT undefined!
}

#функции

С наступающим Новым Годом, дорогие подписчики ❤️

Пусть 2023 принесёт только счастье, радость и успехов 🎈

Геттеры и сеттеры в языке JavaScript

ES6 начал поддерживать функции getter и setter внутри классов.

Последние браузеры также поддерживают функции getter / setter в объектах, и мы можем использовать их для вычисляемых свойств, добавляя предварительную обработку перед настройкой / получением:

var person = {
firstName: 'James',
lastName: 'Bond',
get fullName() {
console.log('Getting FullName');
return this.firstName + ' ' + this.lastName;
},
set fullName (name) {
console.log('Setting FullName');
var words = name.toString().split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
}

#функции

Генераторы в языке JavaScript

Подобно тому, как промисы позволяют нам избегать обратного вызова, генераторы позволяют придать нашему асинхронному коду синхронность. Генераторы – новый вид функций в современном языке JavaScript. Они отличаются от обычных тем, что могут приостанавливать своё выполнение, возвращать промежуточный результат и далее возобновлять его позже, в произвольный момент времени.

function* sillyGenerator() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
}

var generator = sillyGenerator();
> console.log(generator.next()); // { value: 1, done: false }
> console.log(generator.next()); // { value: 2, done: false }
> console.log(generator.next()); // { value: 3, done: false }
> console.log(generator.next()); // { value: 4, done: false }

#функции

Переменные let и const

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

let используется для переменных, которые нужно переназначить после создания. Переменные, объявленные с помощью const, невозможно переназначить или изменить.

#переменные

Шаблонные строки

Достаточно использовать синтаксис ${}, чтобы вставить допустимое в JS выражение. Для конкатенации и комбинирования строк не нужен оператор «+», проще писать многострочные объекты типа String, поскольку не нужно создавать новые строки с помощью символа новой строки (\n) или возврата каретки (\r).

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

#общее

Стрелочные функции

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

Проще работать с объектами и классами через ключевое слово this. Кроме того, можно удалить скобки вокруг одиночного параметра.

#общее

Методы массивов .map(), .filter(), .reduce(), и т. д.

Так же, как и цикл for, методы массивов map, filter и reduce позволяют перебирать элементы массива:

• .map() — позволяет преобразовать каждый элемент массива;
• .filter() — создаёт новый массив со всеми элементами, которые прошли проверку, заданную в функции;
• .reduce() — позволяет преобразовать весь массив в соответствии с нашими нуждами (даже в другой тип данных).

Указанные методы короче и читаются легче, чем цикл for. Комбинируя эти методы и стрелочные функции, можно ещё больше сократить код.

#методы

Деструктурирующее присваивание

Деструктурирующее присваивание позволяет распаковать массивы или объекты в переменные. Это удобная концепция, поскольку не нужно ссылаться на весь объект, когда мы хотим его использовать.

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

#общее

Параметры по умолчанию

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

#функции

Синтаксис spread (три точки — …)

Синтаксис spread позволяет расширять объекты (их пары ключ-значение) и массивы, получая новые объекты. Этот синтаксис работает только при создании нового объекта или массива.

Синтаксис spread хорош для объединения свойств старого объекта в новом. Когда объект или массив расширяется, создавая новый объект или массив, появляется временная копия.

#общее

Короткие условные операторы

В JavaScript есть сокращённая форма записи условных операторов if-else — тернарная операция (ternary). В отличие от if-else тернарные операции являются выражениями. Это даёт большую гибкость, позволяя использовать их так же, как и любые другие выражения (такие как ${} в случае с шаблонными строками).

Тернарные операции не всегда лучше оператора if-else. Например при обработке множественных условий первые окажутся неудобочитаемыми.

#операторы

Модули ES

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

Можно осуществлять множественный экспорт/импорт с помощью фигурных скобок (и ключевых слов export/import) или одиночный без скобок (с ключевыми словами export default и import).

Такой подход позволяет сделать код модульным. Мы можем писать код там, где он нужен, не собирая всё в один большой файл. В примере ниже показано, как вызвать функцию getLocalTime из отдельного файла в app.js.

#модули

Промисы + async/await

Можно отложить на неопределённое время выполнение некоторых участков кода в JavaScript (например setTimeout(), событие listener или сетевой запрос с fetch API).

Промисы — способ сделать предсказуемым асинхронный код на JS. Они помогают разрешать код, созданный с помощью async. Успешно выполненный код обрабатывается с помощью функций обратного вызова .then(), ошибки — с помощью функции .catch();

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

#методы

pop()

Метод pop() удаляет последний элемент массива.

var students = [ 'Jack', 'James', 'Robert', 'John'];
 console.log(students);
 students.pop();
 console.log(students)

Output:
[ 'Jack', 'James', 'Robert', 'John' ]
[ 'Jack', 'James', 'Robert' ]

#методы

Копирование в буфер обмена

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

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("This Sring is Copied To Clipboard.");

#функции

Получение случайного числа из определенного диапазона

Важная функция JavaScript для генерации случайного числа из определенного диапазона чисел. Вы указываете минимальное и максимальное значения в качестве аргументов, а однострочная функция возвращает случайное число из заданного диапазона.

const randomNumberInRange = (min = 0, max = 100) => Math.floor(Math.random() * (max - min + 1)) + min;

randomNumberInRange()
// Result: Default random number range is 0 - 100, so you get a number between 0 and 100.
randomNumberInRange(100, 200)
// Result: You will get a random number between 100 and 200, where 100 is min range and 200 is max range.

#функции

Преобразование RGB в Hex

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

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(0, 51, 255);
// Result: #0033ff

#функции

Прокрутка до начала страницы

Еще одна полезная функция JavaScript, которая используется для автоматической прокрутки к началу веб-страницы.

const goToTop = () => window.scrollTo(0, 0);

goToTop();

#функции