11 полезных советов по современному JavaScript

Автор статьи: Krina Sardhara
Оригинал: https://medium.com/dhiwise/11-useful-modern-javascript-tips-9736962ed2cd

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

Здесь я описала несколько советов, которые мне очень нравятся ❤️ ️. Мне кажется они очень полезны и делают мой код короче и чище.

1. Условное добавление свойств в объект

Иногда мы должны добавить данные в объект только при определенных условиях.

const isValid = false;

const person = {
  id: '101',
  name: 'John',
  ...(isValid && { isActive: true })
}

2. Проверка, существует ли свойство в объекте или нет

Для того чтобы проверить, существует ли свойство объекта достаточно использовать ключевое слово in

const person = {
  id: '101',
  name: 'John',
}

console.log('id' in person);
console.log('name' in person);

Обратите внимание, что оператор in ищет свойства по цепочке прототипов. Так что, например, поле toString тоже будет найдено.

3. Деструктуризация объекта (Object destructing) с динамическим ключом

Вот пример обычной деструктуризации объекта с использованием алиаса (псевдонима)

const productData = {
  id: '23',
  name: 'Laptop'
}


const { name: deviceName } = productData;

console.log('deviceName', deviceName) // deviceName Laptop 

А вот как можно сделать деструктуризацию с динамическим ключом

const productData = {
  id: '23',
  name: 'Laptop'
}

const extraKey = 'name';

const { [extraKey]: data } = productData;

console.log('deviceName', data) // deviceName Laptop 

4. Перебрать объект с одновременным доступом к ключу и его значению

Иногда нам необходимо узнать все ключи вместе с их свойствами.

Можно использовать 'Object.keys' для получения массива ключей, а затем перебрав массив узнать значения. Но вот как можно сделать иначе с помощью метода Object.entries():

const productData = {
  id: "23",
  name: "Laptop",
  isSale: true
};

Object.entries(productData).forEach(([key, value]) => {
  console.log("key: ", key);
  console.log("value: ", value);
});

// key:  id 
// value:  23

// key:  name 
// value:  Laptop 

// key:  isSale 
// value:  true

5. Защита от ошибки 🐞 при доступе к ключу, который не существует в объекте, с помощью Оператора опциональной последовательности (Optional chaining) '?.'

Попробуем обратиться к несуществующему свойству:

const productData = {
  id: "23",
  name: "Laptop",
  isSale: true
};

console.log(productData.meta) // undefined

В результате мы увидим undefined, ведь такого свойства действительно нет, оно не определено.

Но если мы попытаемся поискать свойство color у meta мы получим ошибку, потому что примитив undefined не объект и не допускает поиск свойств:

const productData = {
  id: "23",
  name: "Laptop",
  isSale: true
};

console.log(productData.meta.color) // TypeError: Cannot read properties of undefined (reading 'color')

Можно легко защититься от этой ошибки используя оператор опциональной последовательности '?.' В случае отсутствия просто meta мы просто получим значение undefined:

const productData = {
  id: "23",
  name: "Laptop",
  isSale: true
};

console.log(productData.meta?.color) // undefined

Так же можно защититься от отсутствия метода, то есть мы не будем пытаться вызвать метод если его нет:

const productData = {
  id: "23",
  name: "Laptop",
  isSale: true,
};

productData.show?.(); // вызова нет

6. Отсеиваем ложные (falsy) значения в массиве

Предположим у нас есть массив фруктов. Нам нужно отсеять все лишнее и оставить только полные строки. Мы можем использовать для фильтрации конструктор Boolean, ведь он как раз преобразует наши значения в тип boolean, что нам и нужно для метода filter

const fruitList = ['apple', undefined, '', 'mango', null];

const filterFruitList = fruitList.filter(Boolean);

console.log(filterFruitList) // ["apple", "mango"]

7. Удалить повторяющееся значение в массиве

const fruitList = ['apple', 'mango', 'apple'];

const uniqFruitList = [...new Set(fruitList)];

console.log(uniqFruitList) // ["apple", "mango"]

Значение элемента в Set может присутствовать только в одном экземпляре, что обеспечивает его уникальность в коллекции Set. Затем мы при помощи оператора spread (...) превращаем Set обратно в обычный массив.

8. Контрольное значение является типом массива

Если при помощи оператора typeof проверить тип массива, то мы получим строку со значением object. Что бы убедиться что это массив нужно использовать метод Array.isArray()

const fruitList = ['apple', 'mango'];

console.log(typeof fruitList) // object

console.log(Array.isArray(fruitList)) // true

9. Преобразование строки в число и числа в строку с помощью оператора «+» 🤩

Мы можем легко конвертировать строку в число используя оператор «+»

const personNo = '1324234';

console.log('personNo:', +personNo, 'typeof:', typeof +personNo);

// personNo: 1324234 typeof: number 

Так же мы можем превратить число в строку просто прибавив «+» пустую строку к данному числу

const personNo = 1324234;

console.log('personNo:', personNo + '', 'typeof:', typeof (personNo + ''));

// personNo: 1324234 typeof: string 

10. Условное присваивание значений, когда значение равно null и не определено, с помощью оператора нулевого слияния (nullish coalescing) (??)

let data = undefined ?? 'noData';
console.log(data) // noData

data = null ?? 'noData';
console.log(data) // noData

data = '' ?? 'noData';
console.log(data) // ''

data = 0 ?? null ?? 'noData';
console.log(data) // 0

11. Логическое преобразование с использованием оператора !!

Оператор логическое не (!) меняет логическое значение операнда с истины в ложь и наоборот. Двойное '!!' даст нужное логическое значение.

console.log(!!'') // false

console.log(!!'Data') // true