Уникаємо побічних ефектів у JavaScript

310

Від автора: В даний час JavaScript розвивається дуже динамічно, але я до сих пір стикаюся з великою кількістю застарілого коду, написаного або в цілях оптимальної зворотної сумісності, або просто непідтримуваний. Одна з практик написання коду, яка мене просто дратує, полягає у створенні небажаних побічних ефектів. Що таке побічний ефект? Це шматок коду, в якому створена змінна стає доступною глобальній області видимості, хоча цього не було задумано. Дозвольте мені показати вам кілька прикладів і навчити, як уникати небажаних побічних ефектів.

Array.prototype.forEach() instead of for(var x = …)

Традиційно перебір елементів масиву в циклі здійснювався в JavaScript за допомогою циклу for():

for(var x=0, length = myArray.length; x < length; x++) {
// …
}
// змінні “x” і “length” є побічними ефектами

В даному випадку побічним ефектом буде, як мінімум, індекс для перебору елементів (а, можливо, також і довжина масиву), тобто це змінні, які доступні з глобальній області видимості. Методи прототипу об’єкта Array, наприклад, map, forEach і every дозволяють розробникам уникнути таких побічних ефектів:

[1, 2, 3].forEach(function(item, index, array) {
// Побічних ефектів немає!
});

Тепер для перебору елементів масиву в циклі не потрібно створювати ніяких «корисних» змінних. Це називається «функціональним» програмуванням.

Самовызывающиеся функції

Якщо ви не читали статтю Приховуємо приватні дані в JavaScript і ви не знаєте, як створювати приватні змінні JavaScript, то вам все-таки варто виділити кілька хвилин на її прочитання. Той же самий підхід, описаний у статті, дозволить вам уникнути побічних ефектів з допомогою самовызывающихся функцій:

// Приклад вихідного коду бібліотеки MooTools…
Browser.Request = (function(){
var XMLHTTP = function(){
return new XMLHttpRequest();
};
var MSXML2 = function(){
return new ActiveXObject(‘MSXML2.XMLHTTP’);
};
var MSXML = function(){
return new ActiveXObject(‘Microsoft.XMLHTTP’);
};
return Function.attempt(function(){
XMLHTTP();
return XMLHTTP;
}, function(){
MSXML2();
return MSXML2;
}, function(){
MSXML();
return MSXML;
});
})();
// Три змінні поміщені в самовызывающуюся функцію, тому вони не можуть «просочитися» назовні

Сенс полягає в тому, що ви можете виконувати величезну кількість дій всередині самовызывающейся функції (нової області видимості), не дозволяючи змінним «просочуватися» в глобальну область видимості. Єдине, що може «просочитися» або бути повернуто, — це потрібне вам значення.

Поліпшення вашого коду включає також прагнення уникати побічних ефектів, і ви можете легко цього досягти в JavaScript, якщо будете слідувати кращим традиціям!