Способы сократить JS код

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

Содержание

• Тернарный оператор
• Проверка на NULL
• Объявление переменных в одну строку
• “E” вместо нулей при написании числа
• Одинаковые ключ и значение в свойствах объекта
• Стрелочная функция
• Шаблонные строки
• Знак “+” вместо parseInt/parseFloat
• ** вместо pow
• Оператор Spread

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

Оператор позволяет сократить конструкцию If Else позволив написать её в одну строку:

const num = 42;
let result

if (num > 20) {
  result = 'More than 20'
} else {
  result = 'Less than 20'
}

const result = num > 20 ? 'More than 20' : 'Less than 20';

Проверка на NULL

Если переменная существует, то присвоить ей определенное значение:

let variable;
let variable2;

if (variable !== null && variable !== undefined && variable !== '') {
  variable2 = variable
} else {
  variable2 = 'some value'
}

variable2 = variable || 'some value'

Объявление переменных в одну строку

let x;
let y;
let z = 'foo';

let x, y, z = 'foo';

“E” вместо нулей при написании числа

let bigNumber = 1000000;
let bigNumberButEasierToRead = 10e6;

Одинаковые ключ и значение в свойствах объекта

const user = {
  name: name;
  age: age;
}

const user = {name, age}

Стрелочная функция

У стрелочной функции есть небольшие отличия от обычного определения функции (в частности, с контекстом выполнения), но в целом это не влияет на скрипт, если использовать её, например, как callback

setTimeout(function(seconds) {
  console.log(`After ${seconds} seconds`)
}, 2000)

setTimeout((seconds) => console.log(`After ${seconds} seconds`), 2000)

Шаблонные строки

function createUrl(base, domain) {
  return 'http://' + base + '.' + domain
}

function createUrl(base, domain) {
  return `http://${base}.${domain}`
}

Знак “+” вместо parseInt/parseFloat

const int = parseInt('42')
const float = parseFloat('42.42')

const int = +'42';
const float = +'42.42';

** вместо pow

console.log(Math.pow(2, 3))
console.log(Math.pow(2, 4))
console.log(Math.pow(4, 3))

console.log(2 ** 3)
console.log(2 ** 4)
console.log(4 ** 3)

Оператор Spread

const arr = [1, 2, 3];
const nums = [4, 5, 6].concat(arr)
const cloned = nums.concat()

const nums = [4, ...arr, 5, 6];
const cloned = [...nums];