Деструктуризация в JavaScript

Деструктуризация позволяет извлекать значения из объектов и массивов и присваивать их переменным.

Например, чтобы извлечь значения из массива, можно использовать следующий код:

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

Аналогично, чтобы извлечь значения из объекта, можно использовать следующий код:

const obj = {a: 1, b: 2, c: 3};
const {a, b, c} = obj;
console.log(a, b, c); // 1 2 3

Деструктуризация также позволяет извлекать значения из вложенных объектов и массивов:

const obj = {a: 1, b: {c: 2, d: 3}};
const {a, b: {c, d}} = obj;
console.log(a, c, d); // 1 2 3

const arr = [[1, 2], [3, 4]];
const [[a, b], [c, d]] = arr;
console.log(a, b, c, d); // 1 2 3 4

Использование деструктуризации упрощает доступ к значениям объектов и массивов и повышает читаемость кода.

#полезно

Создание понга

Делимся статьей, где автор рассказывает про создание понга с помощью JavaScript. Продемонстрирована игровая логика, создание примитивов на 2D-канвасе. Присутствует ссылка на код в GitHub и видео-гайд.

#статья

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

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

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

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

const name = 'Alice';
const age = 25;
const message = 'My name is ' + name + ' and I am ' + age + ' years old.';
console.log(message); // "My name is Alice and I am 25 years old."

С помощью шаблонных строк этот код можно записать короче и более читаемо:

const name = 'Alice';
const age = 25;
const message = My name is ${name} and I am ${age} years old.;
console.log(message); // "My name is Alice and I am 25 years old."

Шаблонные строки также позволяют использовать многострочный формат и вставлять выражения:

const message = My name is ${name} and I am ${age} years old. The square of my age is ${age * age}.;
console.log(message);
/*
"My name is Alice and I am 25 years old.
The square of my age is 625."
*/

#полезно

Управление страницей с помощью жестов

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

#статья

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

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

Вот еще одна полезная заметка: в JavaScript есть два различных оператора сравнения: "==" и "===".

Оператор "==" сравнивает значения двух операндов и приводит их к одному типу данных, если они имеют разный тип. Например:

console.log(5 == "5"); // true

Значения сравниваются после приведения типов, поэтому "5" (строка) преобразуется в 5 (число).

Оператор "===" также сравнивает значения двух операндов, но не выполняет приведение типов. То есть, если операнды имеют разный тип, они будут считаться не равными. Например:

console.log(5 === "5"); // false

Значения не сравниваются после приведения типов, поэтому "5" (строка) и 5 (число) будут считаться разными значениями.

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

#операторы

Heap out of memory

Распространенной проблемой при работе с Node.js является ошибка «heap out of memory». Эта ошибка обычно возникает, когда памяти по умолчанию, выделенной твоей системой для Node.js, недостаточно для запуска большого проекта. В данной статье автор демонстрирует, как можно решить эту проблему.

#статья

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

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

Промисы - это объекты, которые представляют собой асинхронную операцию, и имеют три состояния: ожидание (pending), выполнено (fulfilled) и отклонено (rejected). Промисы позволяют работать с асинхронными операциями более удобно, чем с колбэками, так как позволяют обрабатывать результаты асинхронной операции через методы then() и catch().

#полезно

Граф

Граф представляет собой математическое представление сети и описывает отношения между линиями и точками. Граф состоит из нескольких точек и линий между ними. Каждый объект в графе называется узлом. Благодаря этой статье ты узнаешь, как работать с графом в JavaScript.

#статья

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

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

Получить n последних элементов массива

Метод массива slice() может принимать отрицательные целые числа, и при наличии он будет принимать значения с конца массива, а не с начала.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

#массивы

WebHID/WebNFC/WebUSB

Данная статья знакомит с тремя API для работы с аппаратным обеспечением. Благодаря этим API ты сможешь взаимодействовать с HID (Human Interface Device), NFC (Near Field Communication) и USB (Universal Serial Bus).

#статья

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

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

Оператор || для задания значений по умолчанию

Одной из малоизвестных, но полезных заметок в JavaScript является то, что можно использовать логический оператор || для задания значений по умолчанию. Если переменная имеет значение null, undefined, false или 0, то можно использовать || для установки значения по умолчанию. Например, вместо записи:

if (x === undefined) {
  x = 'default';
}

можно записать:

x = x || 'default';

Эта конструкция работает так: если значение x равно null, undefined, false или 0, то будет использовано значение 'default'. Если значение x уже установлено и является истинным, то будет использовано это значение. Такой подход позволяет сократить код и упростить его чтение и понимание.

#операторы

Асинхронный JavaScript

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

#статья

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

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

Работа с аргументами функции

Вам не нужно определять параметры для функции. Вы можете просто использовать массиво-подобный объект функции argument.

#функции #полезно

Малоизвестные API

Делимся статьей, посвященной 4 малоизвестным API. Это Page Visibility, Web Share, Broadcast Channel и Internationalization. Ты узнаешь, что они из себя представляют, где ты их можешь использовать и как использовать.

#статья

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

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

Операторы === и !==

Всегда используйте === и !== вместо == и !=.

== не является транзитивным. Если вы используете === , то оно как и ожидалось будет возвращать false для всех вышеперечисленных случаев.

#полезно

Module Federation

Module Federation позволяет загружать отдельно скомпилированные приложения во время выполнения. Кроме того, ты можешь делиться общими зависимостями. Это также позволяет обмениваться общими данными, такими как информация о текущем пользователе или глобальные фильтры. В данной статье автор рассказывает про Module Federation.

#статья

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

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

Оператор in

Вы можете использовать оператор in для того чтобы проверить есть ли такой ключ у объекта.

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

#операторы

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

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

#статья

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

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

Callback-функции

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

#статья

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

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

Свойства объекта

Вы можете получить доступ к свойствам объекта с помощью [] вместо '.'. Это позволяет найти свойство, которое соответствует переменной.

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

Некоторые люди не знают этого и заканчивают это использованием eval(),что по-настоящему плохая идея. Так код сложнее читать, сложнее находить ошибки(невозможно использование jslint), он медленнее выполняется и может привести к XSS.

#объекты