JavaScript

15 способов сократить JavaScript код!

Наши соц. сети: instagram, vk, fb, tg

1 - Использование тернарного оператора

Допустим у нас в коде присутствует блок 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'

2 - Присвоение значения переменной

let variable = 'variable' // undefined

let variable2

 

if (variable) {
variable2 = variable
} else {
variable2 = 'some value'
}

Если нам необходимо проверить присвоено значение переменной, либо нет, мы можем заменить код выше на логическое ИЛИ. В случае если переменная variable будет равна null, undefined, '', 0, то переменной присвоится значение 'some value' .

variable2 = variable || 'some value'
console.log(variable2)

3 - Инициализация переменных

let x

let y

let z = 42

В случае если нам нужно инициализировать несколько переменных, то можем использовать такую запись. Будьте внимательны, x, y - будут равны undefined и только z - будет равна 42.

let x, y, z = 42

4 - Приведение к логическому выражению

Условия которые передаются в блоке if будут автоматически приведены к логическому выражению, потому мы можем не использовать проверку на true либо false.

let isSame = true
if (isSame === true) {}
if (isSame) {}

 

if (isSame !== true) {}
if (!isSame) {}

При этом строки, числа объекты тоже будет приводится к логическому выражению.

Так undefined === false, null === false, '' === false, 0 === false.

5 - Работа с массивами

Для прохода по массиву мы можем использовать цикл for

const names = ['Igor', 'Elena', 'Olga']
for (let i = 0; i < names.length; i++) {
names[i]
}

Цикл for...of в переменной name будет возвращать последовательно значения из массива.

for (let name of names) {}

Цикл for...in в переменной index будет возвращать индекс текущего элемента

for (let index in names) {}

Все эти циклы можно заменить функцией forEach, которая принимает колбэк, аргументы у которого - текущий элемент массива, текущий индекс, ссылка на исходный массив.

function logArrayItems(el, index, array) {
console.log(`names[${index}] = ${el}`)
}

 

names.forEach(logArrayItems)
 

6 - Cокращенная запись числа в степени

for (let i = 0; i < 1000000; i++) {}
for (let i = 0; i < 10e6; i++) {}

7 - Сокращение имен свойств

const a = 1, b = 2
const myObj = { a: a, b: b }

Запись выше можно сократить до выражения -

const myObj = {a, b}

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

8 - Стрелочные функции

setTimeout(function() {
console.log('After 2 seconds')
}, 2000)

 

function tripple(num) {
return num * 3
}

Функции выше можно переписать в таком виде

setTimeout(() => console.log('After 2 seconds'), 2000)
const tripple = (num) => num * 3

После равно, в скобках, идут аргументы функции, после => тело функции

9 - Интерполяция

const r = 0;
const g = 255;
const b = 255;

 

function rgb(r, g, b) {
if (r === undefined) {
r = 0
}

 

if (g === undefined) {
g = 255
}

 

return `rgb(${r}, ${g}, ${b})`
}

Теперь js позволяет переменные указывать прямо в строке, вместо того, чтобы конкатенировать строки.

`rgb(${r}, ${g}, ${b})` === 'rgb(' + r + ', ' + g + ', ' + 'b)';
const rgb = (r = 0, g = 255, b) => `rgb(${r}, ${g}, ${b})`

 

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

 

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

10 - Деструкция

const alert = window.alert
const confirm = window.confirm
const prompt = window.prompt

Запись выше будет равна

const {alert, prompt, confirm} = window

JS создаст три переменных, которым присвоятся одноименные свойства из объекта window.

11 - 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]

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

12 - Округление до целого

console.log(Math.floor(9.7) === 9)
console.log(~~9.7 === 9)

13 - Возведение в степень

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)

14 - Приведение строки к числу

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

 

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

15 - Функции для работы с объектами

const car = {
model: 'Ford',
year: 2019,
color: 'red'
}

Метод возвращает массив собственных перечисляемых свойств указанного объекта в формате [key, value]

console.log(Object.entries(car))
// [ ['model', 'Ford'], ['year', 2019], ['color', 'red'] ];

Вернет массив значений

console.log(Object.values(car))
// ['Ford', 2019, 'red']

Вернет массив ключей

console.log(Object.keys(car))
// ['model', 'year', 'color']