Такие JavaScript трюки стоит знать

Всем привет!

Все мы знаем, что JavaScript язык с забавными причудами, и иногда можно складывать строки и числа, а потом гадать что же там получится...

Но в этом и прелесть этого языка, поэтому давайте еще лучше узнаем разные фишки этого языка, которые вам обязательно пригодятся!

Ликвидируем пустые значения из массива

Если пробросить в функцию .filter() в качестве параметра Boolean, то это уберет все значения из массива, которые при касте к bool будут равны false, а именно undefined, null, 0, "" (пустая строка), NaN, false.

const array = ['one', 0, 'two', null, 'three', false, 'cheese', undefined];
console.log(array.filter(Boolean)); // ['one', 'two', 'three', 'cheese']

Изменяем размер массива

Вы можете изменить размер массива через свойство length:

const array = ['one', 'two', 'three'];
array.length = 1;
console.log(array); // ['one']

Быстрый каст к boolean

Для быстрого каста к bool можно использовать !! (по факту тоже самое, что и Boolean()):

console.log(!!"one"); // true
console.log(!!0); // false
console.log(!!1); // true
console.log(!!undefined); // false

Избавляемся от лишних `if`

Вы можете использовать && или || вместо лишних проверок в своем коде, для того чтобы сократить некоторые фрагменты кода:

const val = 'road';

// Вместо этого
if (val === 'road') {
  console.log('Дорога');
}

// Вы можете написать вот так
val === 'road' && console.log('Дорога');

// Вместо этого
if (val !== 'road') {
  console.log('Похоже не дорога');
}

// Вы можете написать вот так
val === 'road' || console.log('Похоже не дорога');

Удобное логирование

Вы можете просто обернуть аргумент, который вы передаете в console.log() в фигурные скобки и в итоге при выводе в консоль увидите не только значение переменной но и ее название (что немного короче чем передавать два аргумента):

const pet = 'Котейка';
console.log(pet) // 'Котейка'

// Можно вместо вот этого
console.log('pet: ', pet); // 'pet: Котейка'

// Использовать вот это
console.log({ pet }) // {pet: 'Котейка'}

Следить за производительностью кусков кода

Иногда может быть просто необходимо как-то замерить производительность работы кода, чтобы, например, понять какой фрагмент алгоритма или отрисовки самый долгий, самый простой метод - использовать нативные функции:

const time0 = performance.now();
for (let i = 0; i < 10000; ++i) {
  console.log(i);
}
const time1 = performance.now();
console.log(`Цикл затратил ${time1 - time0} мс на то, чтобы отработать`);

На этом сегодня все) Не забывайте подписываться на телеграм канал, чтобы не пропустить новые статьи, до встречи ✌️

Читайте еще:

#js #frontend #научите_меня_js