Чистый и простой код: 10 лайфхаков для JavaScript-разработчика

Разработчик Хасиб Анар поделился десятью приемами, как писать емкий и чистый JavaScript-код. По его мнению, в JS полно интересных функций, о которых не знают многие разработчики, особенно уровня джуниор и мидл. Предлагаем ознакомиться с ними и посчитать, сколько из них вы знаете.

1. Добавление свойства в объект по условию

Можно использовать оператор распространения …, чтобы быстро добавлять свойства к объекту JavaScript по условию.

const condition = true;
const person = {
  id: 1,
  name: 'John Doe',
  ...(condition && { age: 16 }),
};

Оператор &&  возвращает последнее вычисленное выражение, если значение каждого операнда true. В примере выше возвращается объект {age: 16}, который затем распространяется, что стать частью объекта person. 

Если условие false:

const person = {
  id: 1,
  name: 'John Doe',
  ...(false), // evaluates to false
};
// spreading false has no effect on the object
console.log(person); // { id: 1, name: 'John Doe' }

2. Проверка наличия свойства в объекте

С помощью ключевого слова in можно проверить наличие свойства в объекте JavaScript. Вот как это делается:

const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // returns true
console.log('age' in person); // returns false

3. Динамические имена свойств в объектах

Чтобы добавить свойства, используйте обозначение [‘key_name’]:

const dynamic = 'flavour';

var item = {
  name: 'Biscuit',
  [dynamic]: 'Chocolate'
}

console.log(item); // { name: 'Biscuit', flavour: 'Chocolate' }

Тот же прием можно использовать для ссылки на свойства объекта с помощью динамического ключа: 

const keyName = 'name';

console.log(item[keyName]); // returns 'Biscuit'

4. Деструктуризация объекта с динамическими ключами

Как известно, можно деструктуризировать переменную и сразу же переименовать ее свойства с помощью : notation. Но знаете ли вы, что это можно сделать даже в том случае, если вы точно не знаете название свойства объекта — например, если оно является динамическим.

Вот как можно переименовать переменные при деструктуризации с помощью алиасов (псевдонимов):

const person = { id: 1, name: 'John Doe' };

const { name: personName } = person;

console.log(personName); // returns 'John Doe'

А вот как с помощью динамического ключа:

const templates = {
  'hello': 'Hello there',
  'bye': 'Good bye'
};

const templateName = 'bye';

const { [templateName]: template } = templates;

console.log(template) // returns 'Good bye'

5. Оператор нулевого слияния ??

Оператор ?? полезен, когда нужно проверить, равно ли некоторое значение null или undefined. Он возвращает выражение с правой стороны оператора, когда левое выражение равно null или undefined, в противном случае возвращается выражение с левой стороны:

const foo = null ?? 'Hello';
console.log(foo); // returns 'Hello'

const bar = 'Not null' ?? 'Hello';
console.log(bar); // returns 'Not null'

const baz = 0 ?? 'Hello';
console.log(baz); // returns 0

В третьем примере возвращается 0, а не строка с правой стороны оператора. Несмотря на то, что 0 имеет ложное значение в JavaScript, он не является null или undefined, оператор нулевого слияния его игнорирует.

const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // returns 5

const canBeZero = 0 ?? 5;
console.log(canBeZero); // returns 0

6. Опциональные последовательности ?.

 Вас тоже раздражают ошибки доступа к свойствам несуществующего объекта типа TypeError: Cannot read property ‘foo’ of null? Это головная боль каждого разработчика JavaScript.

Решить проблему можно с помощью оператора опциональной последовательности:

const book = { id:1, title: 'Title', author: null };

// normally, you would do this
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // returns null (no error)

// with optional chaining
console.log(book.author?.age); // returns undefined

// or deep optional chaining
console.log(book.author?.address?.city); // returns undefined

Опциональные последовательности можно использовать даже для вызова методов:

const person = {
  firstName: 'Haseeb',
  lastName: 'Anwar',
  printName: function () {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(person.printName()); // returns 'Haseeb Anwar'
console.log(persone.doesNotExist?.()); // returns undefined

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

Оператор !! может использоваться для быстрого преобразования результата в булево true или false. Вот как это сделать:

const greeting = 'Hello there!';
console.log(!!greeting) // returns true

const noGreeting = '';
console.log(!!noGreeting); // returns false

8. Преобразование между строками и числами

Быстро преобразовать строку в число с помощью унарного оператора + можно следующим образом:

const stringNumer = '123';

console.log(+stringNumer); // returns integer 123
console.log(typeof +stringNumer); // returns 'number'

Обратное преобразование выполняется так:

const myString = 25 + '';

console.log(myString); // returns '25'
console.log(typeof myString); // returns 'string'

9. Проверка ложных значений в массиве

Наверняка вы уже знакомы с такими методами перебора массива, как filter, some и every. Но иногда может потребоваться простая проверка истинных значений с помощью логического оператора Boolean:

const myArray = [null, false, 'Hello', undefined, 0];

// filter falsy values
const filtered = myArray.filter(Boolean);
console.log(filtered); // returns ['Hello']

// check if at least one value is truthy
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // returns true

// check if all values are truthy
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // returns false

Эти методы принимают функцию обратного вызова, поэтому мы передаем Boolean как функцию обратного вызова. Логическое значение принимает аргумент и возвращает true или false в зависимости от того, будет ли аргумент true. Можно переписать так:

myArray.filter(val => Boolean(val));

Или даже так:

myArray.filter(Boolean);

10. Уменьшение уровня вложенности в массиве массивов

С помощью метода Array.prototype.flat можно создать единый массив, поднимая его содержимое на уровень родительского:

const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];

const flattedArray = myArray.flat(); 
// returns [ { id: 1 }, { id: 2 }, { id: 3 } ]

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

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

console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]