JavaScript заметки – Telegram

JavaScript заметки

8.56K subscribers

2.75K photos

4 videos

1.27K links

Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl

Download Telegram

About

Blog

Apps

Platform

JavaScript заметки

8.56K subscribers

JavaScript заметки

Нулевое слияние для JavaScript

Все мы часто писали такой код:

const obj = {
name: 'James'
};
const name = obj.name || 'Jane'; // James

Если obj.name является ложным, возвращается «Jane», а 'undefined' возвращаться не будет. Но проблема в том, что пустая строка ('') также будет считаться ложью в этом случае. Так что мы должны переписать код снова, как показано ниже.

const name = (obj.name && obj.name !== '') ? obj.name : 'Jane';

Каждый раз писать такой код – это головная боль. Эта фича позволяет нам проверять только null и undefined.

#полезно

👍1

1.43K views06:05

JavaScript заметки

Генератор коротких CSS классов и id

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

#статья

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

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

👍2❤1

1.44K views12:05

JavaScript заметки

Optional Chaining

Эта функция идет «в комплекте» с Nullish Coalescing for JavaScript, особенно в TypeScript. Разработчики TypeScript объявили, что они включат Nullish Coalescing for JavaScript и это proposal в свой следующий релиз, 3.7.0.

const city = country && country.city;
// undefined if city doesn't exist

Взгляните на код в данном примере. Чтобы получить «город» (city), который находится в объекте «страна» (country), мы должны сперва проверить, существует ли «страна» и существует ли «город» в «стране».

С помощью Optional Chaining этот код можно отрефакторить следующим образом:

const city = country?.city; // undefined if city doesn't exist

Эта функция кажется очень удобной и полезной в данной ситуации.

#функции

👍7

1.46K views06:05

JavaScript заметки

Callback-функции

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

#статья

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

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

🔥5❤1👍1

1.54K views12:05

JavaScript заметки

Быстрый способ создать маску для числа методами slice и padStart

const creditCard = "4111111111114321"; // номер кредитной карты из 16 цифр
const lastFourDigits = creditCard.slice(-4); // получить последние 4 цифры

// добавить * к lastFourDigits, чтобы длина тоже была равна 16
const maskedNumber = lastFourDigits.padStart(creditCard.length, '*');

console.log(lastFourDigits); // 4321
console.log(maskedNumber); // ************4321

#полезно

👍11

1.6K views06:05

JavaScript заметки

Редко используемые API

Делимся статьей, где автор рассказывает про 4 API. Они редко используются, однако очень полезны. К ним относятся Beacon, Clipboard, Notifications и Perfomance. Присутствует ссылка на репозиторий с примерами.

#статья

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

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

👍3❤1

1.52K views12:05

JavaScript заметки

Выполнить обработчик событий только один раз

document.getElementById("btn").addEventListener("click",
  function () {
    console.log("Button clicked!");
  },
  { once: true }
);

#полезно

👍20

1.48K views06:05

JavaScript заметки

Трекер расходов

SheetJS — это библиотека JavaScript для Excel, которая позволяет преобразовывать html-таблицу, массив или json в загружаемый xlsx-файл. Все это делается прямо в браузере. Благодаря этой статье ты узнаешь, как создать трекер расходов с помощью SheetJS.

#статья

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

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

👍6

1.48K views12:05

JavaScript заметки

Обновить пропсы объекта с помощью оператора spread

const user = {
  name: 'David',
  age: 30,
  city: 'NY'
};

const newAge = 40;

const updatedUser = {
  ...user,
  age: newAge
};

console.log(user); // { name: 'David', age: 30, city: 'NY'}
console.log(updatedUser); // { name: 'David', age: 40, city: 'NY'}

#полезно

👍7

1.47K views06:05

JavaScript заметки

Three.js и тетрис

Three.js — это легковесная кросс-браузерная библиотека JavaScript, используемая для создания и отображения анимированной трехмерной компьютерной графики в веб-браузере. Скрипты Three.js можно использовать в сочетании с элементом холста HTML5, SVG или WebGL. В данной статье продемонстрировано, как с помощью Three.js можно создать трехмерный тетрис.

#статья

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

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

❤4

1.54K views12:05

JavaScript заметки

Найти количество пропсов в объекте

const user = {
  name: 'David',
  age: 30, 
  city: 'NY'
};

console.log(Object.keys(user).length); // 3

#полезно

👍10

1.48K views06:05

JavaScript заметки

Internationalization API

Internationalization API — интерфейс, предоставляемый браузером. Он позволяет выполнять интернационализацию и локализацию веб-приложений. Данная статья поможет разобраться с Internationalization API.

#статья

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

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

👍5

1.51K views12:05

JavaScript заметки

Взять последние элементы из массива

Обратите внимание: метод slice доступен для массива так же, как и для строки.

const numbers = [10, 20, 30, 40, 50];
const last = numbers.slice(-1);
console.log(last); // [50]
const secondLast = numbers.slice(-2);
console.log(secondLast); // [40, 50]

👍9

1.41K views06:05

JavaScript заметки

CORS

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

#статья

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

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

👍7

1.52K views12:05

JavaScript заметки

Три способа проверить, является ли объект массивом

В JS массив также является объектом, так что для такой проверки вы можете использовать три способа (это часто задают на собеседованиях):

const arr = [1, 2, 3, 4];

•

arr.constructor.toString().indexOf("Array") > -1

•

arr instanceof Array

•

Array.isArray(arr)

#полезно

👍17

1.55K views06:05

JavaScript заметки

RegEx на практике

Регулярное выражение — это последовательность символов, формирующая шаблон поиска. Шаблон поиска можно использовать для текстового поиска и операций замены текста. В данной статье продемонстрирована работа regex с валидацией.

#статья

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

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

👍3❤1

1.55K views12:05

JavaScript заметки

Получить временную метку (timestamp)

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

const date = new Date();
console.log(date.getTime()); // 1621708197268

#функции

👍4

1.41K views06:05

JavaScript заметки

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

В данной статьей автор демонстрирует создание пианино с помощью JavaScript. Обрати внимание, проект лучше всего работает в Chrome и других браузерах с тем же движком. Могут быть проблемы при работе с Safari.

#статья

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

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

1.45K views12:05

JavaScript заметки

Деструктуризация объектов

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

// деструктуризовать пропсы и использовать status со значением Married, если этого свойства нет
const {name, age, status = 'Married' } = user;
console.log(name, age, status) // David 30 Married

const person = {
 age: 30
};

// деструктуризуем объект person, переименуем name в username, назначим по умолчанию значение Anonymous, если такого свойства в person нет
const {name: username = 'Anonymous', age } = person;

console.log(username, age); // Anonymous 30

#полезно

👍6

1.53K views06:05

JavaScript заметки

Ошибки с промисами

В данной статье продемонстрированы самые распространенные ошибки при работе с промисами. К ним относятся: использование блока try/catch внутри промиса; неправильное использование Promise.race(); злоупотребление промисами.

#статья

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

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

👍4

1.55K views12:05

JavaScript заметки

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

const days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
const [firstDay, secondDay] = days;
console.log(firstDay); // sunday
console.log(secondDay); // monday

#массивы

👍3🔥1

1.6K views06:05