JavaScript заметки

Это свершилось! Сделали для вас самую полезную подборку каналов по программированию. В ней собраны официальные русскоязычные каналы самых популярных языков. Там только топовая информация, которая потом появляется на платных курсах. Надо подписаться: @it

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

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

Функция обратного вызова выполняется для каждого элемента массива, и результат сохраняется в аккумуляторе. В конце итерации reduce() возвращает окончательное значение аккумулятора #методы

Фейковый API сервер Делимся статьей, где автор рассказывает про создание гибридного фейкового API сервера с помощью json-server. Ты узнаешь, для чего он нужен и где используется. Также продемонстрированы достоинства и недостатки. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Array.filter() Метод filter() создает новый массив, в который включаются только те элементы исходного массива, которые удовлетворяют определенным условиям. Другими словами, этот метод позволяет фильтровать массив по определенным критериям. Вот пример использования метода filter() для отбора всех четных чисел из массива:

let arr = [1, 2, 3, 4, 5, 6];
let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

В этом примере мы создали массив arr, содержащий числа от 1 до 6, и затем применили метод filter() к этому массиву. В качестве аргумента методу передали функцию обратного вызова (также называемую функцией предиката), которая возвращает true для всех четных чисел и false для всех нечетных чисел. Как результат, метод filter() создал новый массив evenNumbers, содержащий только четные числа из исходного массива. #методы

Node, Nest, Next, Express🤯 - пора бы всё объединить! Для этого мы создали отдельный уголок - Серверный JavaScript. Собрали всё, проверяй🔥

Рекурсивные функции Внутри функции можно вызывать её саму — это пример рекурсивной функции. Если разложить пример, то получится следующая цепочка: - fac(3) это 3 * fac(2); - fac(2) это 2 * fac(1); - fac(1) это 1. Получается, что fac(3) это 3 * 2 * 1, то есть 6. Такой подход часто применяется в математических операциях, но не ограничивается ими. #функции

Значение как число Вы когда-нибудь обращали внимание, что "event.target.value" всегда возвращает строковое значение, даже если для поля ввода "input" задан тип "number"? Чтобы сразу получать числовое значение, используйте "event.target.valueAsNumber". #полезно

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

Макеты для вёрстки сайтов — это канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку. Учитесь, практикуйтесь, пополняйте свое портфолио настоящими работами вместе с @build_html

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 не поддерживают эту функцию. #методы

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

Забудьте о конкатенации, используйте шаблонные строки (литералы) Конкатенация строк с помощью оператора "+" – это старая школа. Более того, конкатенация строк с участием большого количества переменных (или выражений) повышает риск возникновения путаницы и ошибок. Шаблонные строки (или литералы) позволяют встраивать выражения прямо в текст. Они обладают уникальным синтаксисом, при котором строка заключается в обратные кавычки (``). Шаблонная строка может содержать места для подстановки динамических значений. Такие места отмечаются знаком доллара и фигурными скобками. Например, ${выражение}. #полезно

Лучший источник макетов для практики верстки Макеты для верстки — канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку

Использование оператора опциональной последовательности (optional chaining operator) Раньше, чтобы получить доступ ко вложенному свойству, нужно было проверять, существует ли каждое из свойств. Прямое обращение к user.location.street.name могло выбросить исключение, что мы пытаемся обратиться к name через несуществующие ссылки к методам location или street. Но теперь, в версии ES11, код после оператора опциональной последовательности выполнится, только если обращение по предыдущей ссылке не привело к undefined или null. Так что использование этого оператора сократит ваш код и сделает его более понятным. #операторы

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

Отобразить число с точностью до двух знаков после запятой const number = 100.32222; console.log(number.toFixed(2)); // 100.32 #полезно

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

Верстаешь? Пишешь фронт? Тогда мы по адресу! Залетай на канал Будни разработчика! Здесь личные заметки про фронтенд, тимлидство и неочевидные вещи в разработке. Автор — тимлид из Хельсинки с большим опытом веб-разработки. Ежедневные посты о фишках вёрстки и фронта, разборы лучших статей и нюансы работы браузеров. Подписывайся!

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

Проверить вхождение определённого значения в массив

const numbers = [1, 2 ,3, 10, 50];
// old way
console.log(numbers.indexOf(3) > -1); // true, т.к. проверяется, есть ли в массиве 3
// new way
console.log(numbers.includes(3)); // true

Метод includes также полезен, если требуется сравнить несколько значений сразу. #методы