Шорткаты в JavaScript



Вивчаючи будь-яку мову програмування, корисно знати про його особливості та вміти ефективно використовувати мовні конструкції. Хочу поділитися з вами шорткатами для JS. Ці скорочення в деяких випадках можуть полегшити читання коду, а також істотно зменшити його кількість. Однак слід пам'ятати, що вони можуть зіграти з вами злий жарт і, якщо використовувати їх повсюдно, ваш код перестане бути читаним і підтримуваним.

Використання while замість for
Почнемо з простого і досить часто зустрічається ради — використовувати while замість for.

var count = foo.length
while (count--) {
// whatever
}
var count = foo.length
for(var i = 0; i < count; i++) {
// whatever
}

Звичайно, мені теж подобається використовувати forEach і map, проте у випадках, коли це недоречно, while виглядає більш органічно і читаемо. До речі, застосування змінної для зберігання довжини масиву більш продуктивно, ніж обчислення цього значення в кожній ітерації.

Використання for-in зі звичайними масивами
Традиційно конструкцію for-in використовують для ітерації об'єктів, але не потрібно забувати, що нею можна скористатися і для звичайного масиву. І хоча в документації зазначено, що for-in не гарантує консистентним перебору, на практиці я не зустрічав подібної ситуації.

var count = foo.length
for(var i = 0; i < count; i++) {
// whatever foo[i]
}
for(var i in foo) {
// whatever foo[i]
}

Приведення до булеву типу
Іноді потрібно привести значення до булеву типу, і я покажу традиційне рішення цієї задачі, а також її коротку форму:

var foo = Boolean(bar); var foo = !!bar;

Подвійне заперечення працює так само, як і приведення, проте справедливо зауважити, що, як і у випадку з усіма іншими шорткатами, у новачків (та й не тільки) можуть виникнути складності в сприйнятті такого коду.

Еквівалент Math.floor();
Є дуже простий спосіб округлити будь-яке число до найближчого цілого:

var intNum = Math.floor(anyNum); var intNum = ~~anyNum;

Подвійне побітове заперечення працює як Math.floor() для додатних чисел і як Math.ceil() для негативних. Пояснення, як це працює, можна знайти на тут. Читати складніше, але економить десять символів.

Шорткаты для true і false
Навіть для true і false можна зробити шорткат. Це виглядає вже зовсім за гранню добра і зла, але раз вже ми почали цю тему, то чому б і ні:

var foo = true,
bar = false;
var foo = !0,
bar = !1;

Але це, як не крути, швидше антишорткат, тому як зовсім його не можна прочитати, вимагає обчислення з боку JS, та й взагалі виглядає жахливо.

Умовний оператор
Напевно всі знайомі з тернарным оператором, але не всі знають, наскільки зручним може бути його використання.

if (condition) {
foo = bar;
} else {
foo = baz;
}
foo = (condition ? bar : baz);

Вже непогано, але можна піти далі і використовувати його в кілька рядків:

if (age > 18) {
alert("OK, you can go.");
location.assign("continue.html");
} else {
location.assign("backToSchool.html");
}
age > 18 ? (
alert("OK, you can go."),
location.assign("continue.html")
) : (
location.assign("backToSchool.html");
);

Тут є невеликий нюанс: потрібно пам'ятати, що оператори в цьому випадку повинні бути розділені комою, а не крапкою з комою. Інша чудова особливість цього оператора — він повертає значення (це було видно з першого прикладу), а значить, його можна використовувати і з функціями.

if (condition) {
function1();
} else {
function2();
}
(condition ? function1 : function2)();

Використання AND
Не всі пам'ятають, як працює AND, — спочатку він обчислює перше значення і, тільки якщо воно дорівнює true, обчислює інше. Подивимося, як це можна застосувати.

if (foo) {
bar();
}
if (foo) bar();
if (foo) bar();
foo && bar();

Укупі з OR можна домогтися повного еквівалента if-else, але це не варто того, у що перетвориться ваш код.

Приведення рядка до числа
var foo = parseFloat('3133.7'),
bar = parseInt('31337');

Коротка форма запису досить проста і елегантна:

var foo = +'3133.7',
bar = +'31337';

Для оберненої задачі теж є свій шорткат.

Приведення числа до рядка
Тут можна продемонструвати кілька прикладів, як це зробити:

var foo = 3.14,
bar = foo.toString(10); // '3.14' 
var foo = 3.14,
bar = foo + "; // '3.14'
foo += "; // '3.14'

Я неспроста викликав метод toString з параметром 10 — він вказує, що число потрібно перетворити на рядок в десятковій системі числення. Відповідно, для випадків, коли вам потрібно отримати рядок в шістнадцятковій системі числення, ці шорткаты не допоможуть.

Перевірка результатів indexOf
Іноді для перевірки наявності або відсутності елемента в масиві пишуть ось такий код:

if (someArray.indexOf(someElement) >= 0) {
// whatever
}

if (someArray.indexOf(someElement) === -1) {
// whatever
}

Його можна скоротити до такого:

if (~someArray.indexOf(someElement)) {
// whatever
}

if (!~someArray.indexOf(someElement)) {
// whatever
}

Щоб покращити читабельність цього трюку, перевірку можна присвоїти змінної з відповідною назвою:

var isFound = ~someArray.indexOf(someElement);
if (isFound) {
// whatever
}

Конвертація arguments в масив
Для нормальної роботи з arguments в JS не вистачає інструментарію, тому потреба перетворити arguments до звичайного масиву виникає часто. І перше, що вдасться загугліть, буде

argsArray = Array.prototype.slice.call(arguments);

Цей виклик можна скоротити до

argsArray = [].slice.call(arguments);

Адже в примірника масиву теж є доступ до прототипу, що заощадить нам аж 13 символів.

Перевірка на null, undefined і empty
Про цей трюк чули багато, наведу його для тих, хто не знав:

if (foo !== null || foo !== undefined || foo !== ") {
bar = foo;
}
bar = foo || ";

Висновки
Хотілося б звернути увагу ще раз, що ці приклади ми розглянули не для того, щоб застосовувати їх повсюдно, а лише для того, щоб краще розуміти можливості деяких конструкцій у JS.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.