JavaScript заметки

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

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

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

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

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

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

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

🔥Устали от одинакового контента о нейронных сетях? Надоели бесполезные боты, прячущиеся за обилием кнопок и требующие оплаты за каждый клик? Тогда присоединяйтесь к настоящему хакеру - Петру Севера, и его уникальному каналу посвященному нейронным сетям, включая ChatGPT, MidJourney и многим другим! 🚀 Попробуйте нашего бесплатного ChatGPT бота для Телеграма - работающего постоянно, без лишних кнопок и вводящих в заблуждение ролей. 🔑 Не упустите свой шанс занять место в новой эре искусственного интеллекта и воплотить в жизнь то, о чем вы мечтали! Подписывайтесь на канал Петра Севера уже сегодня и откройте для себя мир AI по новому!

Нюансы использования push При решении задач в массиве в JavaScript. Мы можем столкнуться с ошибками в методе push для добавления элемента. Здесь проблема возникает, когда мы создаем/разрабатываем что-то на JavaScript или React. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

Фронтендщики здесь? Обнаружен годный канал – Frontend Trends. Он как швейцарский нож – собирает в себе всё, что нужно для работы хоть новичку, хоть опытному спецу. • Эффекты с просмотром в CodeOen • Анимации и шаблоны для сайтов • Уроки по CSS, JS, React и Vue Зашли – сохранили – сразу применили в своём проекте. Пользуйтесь: @Frontend_trends

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

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." */ #полезно

🔥Устали от одинакового контента о нейронных сетях? Надоели бесполезные боты, прячущиеся за обилием кнопок и требующие оплаты за каждый клик? Тогда присоединяйтесь к настоящему хакеру - Петру Севера, и его уникальному каналу посвященному нейронным сетям, включая ChatGPT, MidJourney и многим другим! 🚀 Попробуйте нашего бесплатного ChatGPT бота для Телеграма - работающего постоянно, без лишних кнопок и вводящих в заблуждение ролей. 🔑 Не упустите свой шанс занять место в новой эре искусственного интеллекта и воплотить в жизнь то, о чем вы мечтали! Подписывайтесь на канал Петра Севера уже сегодня и откройте для себя мир AI по новому!

Frontender's notes - самый большой канал по фронту с актуальной инфой по HTML, CSS, JS, TypeScript, React, Node.js и развитию Soft-skills, а также разборы вопросов для интервью и подборка крутых статей c опытом релокации айтишников в другие страны. Вам сюда: 👉 @frontendnoteschannel А так же небольшой канал с англоязычными статьями @frontend_international В общем добро пожаловать!

Web Audio API Web Audio API предоставляет мощную и универсальную систему управления звуком. Она позволяет выбирать источники звука, добавлять эффекты к звуку, создавать визуализацию звука, применять пространственные эффекты (например, панорамирование) и многое другое. В данной статье рассказано, как был создан музыкальный инструмент с помощью API. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Деструктуризация в 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 есть встроенный способ делать глубокие копии объектов? Для этого существует функция structuredClone, встроенная в среду выполнения JavaScript. Делимся статьей, где автор рассказывает про современный способ глубокого копирования объектов. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

const arr = [1, 2, 3];
const newArr = arr.map((item) => item + 1);
console.log(newArr); // [2, 3, 4]

Также метод map() позволяет применить функцию к каждому элементу объекта и вернуть новый объект на основе результатов этой функции. Например, чтобы создать новый объект, в котором каждое свойство увеличено на 1, можно использовать следующий код:

const obj = {a: 1, b: 2, c: 3};
const newObj = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => [key, value + 1])
);
console.log(newObj); // {a: 2, b: 3, c: 4}

Использование метода map() позволяет упростить манипуляции с элементами массива и объекта и повысить читаемость кода. #методы

Логические операторы В данной статье автор подробно рассказывает про логические операторы «НЕ», «ИЛИ», «И» и нулевого слияния. Дополнительно рассматриваются побитовые операторы. Они используются для криптографии. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

Управление зависимостями Согласно опросу «State of JS» 2021 года, управление зависимостями в JavaScript — проблема номер один для разработчиков. На втором месте — архитектура кода. Делимся статьей, где автор рассказывает про управление зависимостями в монорепозитории JS. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Стрелочные функции Одной из интересных фишек JavaScript является использование стрелочных функций (arrow functions), которые позволяют определять функции более кратко и лаконично. Вместо обычного синтаксиса:

function multiply(a, b) {
  return a * b;
}

можно использовать следующий синтаксис с использованием стрелочной функции:

const multiply = (a, b) => a * b;

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

Селфи в браузере В данной статье автор рассказывает, как сделать селфи в браузере. Для захвата изображения используется MediaStream Image Capture. Для захвата потока - Media Capture and Streams. File API используется для работы с файлами. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

const user = { name: 'John', age: 30 };
const { name, age } = user;

В этом примере мы используем деструктуризацию, чтобы извлечь значения name и age из объекта user и сохранить их в переменных с теми же именами. Деструктуризация - это полезная фича в JavaScript, которая делает работу с объектами и массивами более удобной. #массивы