20 сокращений JavaScript, которые сэкономят ваше время

В любом языке программирования сокращения помогают написать более чистый и оптимизированный код и выполнить задачи, использовав кротчайший синтаксис. Разберём способы сокращения в JavaScript.

1. Объявление переменных

// Обычная запись
let x; 
let y = 20;

// Короткая запись 
let x, y = 20;

2. Множественное объявление переменных

Мы можем присвоить значение нескольким переменным, записав их в одну строчку с помощью деструктуризации массива.

// Обычная запись
let a, b, c; 
a = 5; 
b = 8; 
c = 12;

// Короткая запись 
let [a, b, c] = [5, 8, 12];

3. Тернарный оператор

С помощью тернарного (условного) оператора можно сэкономить 5 строк в коде.

// Обычная запись
let marks = 26; 
let result; 
if (marks >= 30){
    result = 'Pass'; 
}
else{ 
    result = 'Fail'; 
}

// Короткая запись 
let result = marks >= 30 ? 'Pass' : 'Fail';

4. Присваивание значения по умолчанию

Используя оценку короткого замыкания OR(||), можно задать переменной значение по умолчанию в случае, когда ожидаемое значение  —  false.

// Обычная запись
let imagePath; 
let path = getImagePath(); 
if (path !== null && path !== undefined && path !== ''){ 
    imagePath = path; 
}
else{ 
    imagePath = 'default.jpg'; 
} 

// Короткая запись 
let imagePath = getImagePath() || 'default.jpg';

5. Оценка короткого замыкания AND(&&)

Если функция вызывается только с переменной со значением true, то можно применить оценку короткого замыкания AND(&&) как альтернативный вариант.

// Обычная запись
if (isLoggedin){
    goToHomepage(); 
}

// Короткая запись 
isLoggedin && goToHomepage();

При отрисовке компонентов по условию в React использовать оценку короткого замыкания AND(&&) еще удобнее. Например:

<div> { this.state.isLoading && <Loading /> } </div>

6. Смена значения двух переменных

Чтобы поменять значение двух переменных, мы зачастую задействуем третью переменную. Однако это можно сделать, используя деструктуризацию массива.

let x = 'Hello', y = 55; 

// Обычная запись 
const temp = x; 
x = y; 
y = temp; 

// Короткая запись 
[x, y] = [y, x];

7. Стрелочные функции

// Обычная запись 
function add(num1, num2){ 
    return num1 + num2; 
} 
// Короткая запись 
const add = (num1, num2) => num1 + num2;

Здесь можно найти более подробную информацию о стрелочных функциях.

8. Шаблонные литералы

Обычно мы используем оператор плюс +, чтобы объединять строки с переменными. Однако с помощью шаблонных литералов ES6 это можно сделать гораздо проще.

// Обычная запись
console.log('You got a missed call from ' + number + ' at ' + time);

// Короткая запись
console.log(`You got a missed call from ${number} at ${time}`);

9. Многострочная строка (String)

Как правило, для многострочной записи мы применяем оператор плюс + вместе с символом перехода на новую строку \n. Но еще проще будет  —  использовать обратные кавычки `.

// Обычная запись 
console.log('JavaScript, often abbreviated as JS, is a\n' +             'programming language that conforms to the \n' + 
'ECMAScript specification. JavaScript is high-level,\n' + 
'often just-in-time compiled, and multi-paradigm.');

// Короткая запись
console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);

10. Проверка нескольких условий

Для сопоставления нескольких условий можно записать их все в массив и использовать метод indexOf() или includes().

// Обычная запись
if(value === 1 || value === 'one' || value === 2 || value === 'two'){ 
     // выполнить код
} 
// Короткая запись №1
if([1, 'one', 2, 'two'].indexOf(value) >= 0){ 
    // выполнить код
}
// Короткая запись №2
if([1, 'one', 2, 'two'].includes(value)){ 
    // выполнить код 
}

11. Присвоение значения свойству объекта

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

let firstname = 'Amitav'; 
let lastname = 'Mishra'; 

// Обычная запись
let obj = {firstname: firstname, lastname: lastname};

// Короткая запись
let obj = {firstname, lastname};

12. Преобразование строки в число

Для преобразования строки в число существуют такие методы, как parseInt и parseFloat. Однако для этого можно также использовать унарный оператор +, поставив его перед значением строки.

// Обычная запись 
let total = parseInt('453'); 
let average = parseFloat('42.6');

// Короткая запись
let total = +'453'; 
let average = +'42.6';

13. Многократное повторение строки

Если вам нужно повторить строку определённое количество раз, можно применить цикл for. Но с помощью метода repeat() можно сделать это в одну строку.

// Обычная запись
let str = ''; 
for(let i = 0; i < 5; i ++){ 
    str += 'Hello '; 
} 
console.log(str); // Привет Привет Привет Привет Привет

// Короткая запись
'Hello '.repeat(5);

Совет: Хотите попросить у кого-нибудь прощение, написав «извини» 100 раз? Попробуйте метод repeat(). А если вам нужно, чтобы каждый повтор был на новой строке, добавьте \n к строке.

‘sorry\n’.repeat(100);

14. Возведение в степень

Чтобы найти степень какого-либо числа, можно применить метод Math.pow(). Или использовать синтаксис покороче, применив двойные звездочки **.

// Обычная запись 
const power = Math.pow(4, 3); // 64

// Короткая запись 
const power = 4**3; // 64

15. Двойное побитовое отрицание (~~)

С помощью двойного побитового отрицания можно заменить метод Math.floor().

// Обычная запись
const floor = Math.floor(6.8); // 6

// Короткая запись
const floor = ~~6.8; // 6

Примечание: Способ двойного побитового отрицания (NOT) работает только для 32-битных целых чисел, т.е. до (2**31)-1 = 2147483647. Поэтому для любого числа больше 2147483647, этот оператор будет выдавать неверные результаты. В таких случаях лучше использовать Math.floor().

16. Нахождение максимального и минимального числа в массиве

Можно применить цикл for для перебора каждого значения массива и найти максимальное или минимальное значение. Или же использовать метод Array.reduce() и найти эти числа в массиве.

Но можно сделать это в одну строчку с помощью оператора расширения.

// Короткая запись
const arr = [2, 8, 15, 4]; 
Math.max(...arr); // 15 
Math.min(...arr); // 2

17. Цикл for

Обычно для перебора массива используется традиционный цикл for. Для выполнения итерации по массивам можно воспользоваться циклом for…of. А для того, чтобы найти индекс каждого значения, применяется for…in.

let arr = [10, 20, 30, 40]; 

// Обычная запись
for(let i = 0; i < arr.length; i++){ 
    console.log(arr[i]); 
}

// Короткая запись
// цикл for of 
for(const val of arr){ 
    console.log(val); 
}

// Цикл for in
for(const index in arr){ 
    console.log(arr[index]); 
}

Также цикл for…in можно использовать для перебора свойства объекта.

let obj = {x: 20, y: 50}; 
for(const key in obj){ 
    console.log(obj[key]); 
}

18. Объединение массивов

let arr1 = [20, 30]; 

// Обычная запись 
let arr2 = arr1.concat([60, 80]); 
// [20, 30, 60, 80]

// Короткая запись
let arr2 = [...arr1, 60, 80]; 
// [20, 30, 60, 80]

19. Глубокое копирование объектов

Для глубокого копирования объектов можно совершить итерацию по каждому свойству и проверить, содержит ли текущее свойство какой-либо объект. Если да, то выполняется рекурсивный вызов той же самой функции, пропуская значение текущего свойства (т.е. вложенный объект).

Также при отсутствии функций, значений undefined, NaN или Date в объекте можно совершить глубокое копирование с помощью JSON.stringify() и JSON.parse().

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

let obj = {x: 20, y: {z: 30}}; 

// Обычная запись 
const makeDeepClone = (obj) => { 
    let newObject = {}; 
    Object.keys(obj).map(key => { 
        if(typeof obj[key] === 'object'){ 
            newObject[key] = makeDeepClone(obj[key]); 
        } 
        else{ 
            newObject[key] = obj[key]; 
        } 
    }); 
    return newObject; 
}

const cloneObj = makeDeepClone(obj); 

// Короткая запись 
const cloneObj = JSON.parse(JSON.stringify(obj));

// Короткая запись для одноуровневого объекта
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};

Примечание: Это способ сокращения JSON.parse(JSON.stringify(obj)) не работает, если свойство объекта содержит функции, значения undefined, NaN или Date, потому что в таком случае они удаляются из объекта. Поэтому используйте этот способ, только когда объект содержит строки и числа.

20. Получение символов из строки

let str = 'jscurious.com'; 

// Обычная запись 
str.charAt(2); // c

// Короткая запись
str[2]; // c

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

Читайте также:

• Как увеличить производительность CSS-in-JS в 175 раз
• Одномерный клеточный автомат в JavaScript
• Введение: 4 новейших операции JavaScript

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Amitav Mishra: 20 JavaScript Shorthand Techniques that will save your time