JavaScript заметки

Создание понга Делимся статьей, где автор рассказывает про создание понга с помощью JavaScript. Продемонстрирована игровая логика, создание примитивов на 2D-канвасе. Присутствует ссылка на код в GitHub и видео-гайд. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Учиться у опытного разработчика бесплатно Крутой способ учиться программированию - это следить за работой опытных разработчиков и перенимать фишки. Для этого и нужны стажировки Но можно и без стажировки - в канале @ViktorRyabkovIT ▪️Я - senior fullstack разработчик в международной компании с 5+ летним опытом разработки В своем канале я создаю бесплатный сайт с тестами для изучения фронтэнда И делаю процесс его создания - полезным контентом В чем польза? 👉🏻я показываю вам свою работу над проектом с нуля: обзоры кода, статьи с техническими фишками, видеоразборы - контент, как на платных курсах📚 Кстати, в закрепе канала уже есть авторский роадмап от 0 до джуниора и мой бесплатный курс по HTML/CSS Зачем мне это? Меняю вашу подписку на реально полезный и уникальный контент. Это честно. Подпишись, следи и обучайся - https://t.me/+y7siA62ltzU1ZWY6

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

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

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

x = x || 'default';

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

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

Получить 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]

#массивы

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() позволяет упростить манипуляции с элементами массива и объекта и повысить читаемость кода. #методы

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