Избегаем побочных эффектов в JavaScript

Дата публикации: 2015-06-23

От автора: В настоящее время JavaScript развивается очень динамично, но я до сих пор сталкиваюсь с большим количеством устаревшего кода, написанного либо в целях оптимальной обратной совместимости, либо просто неподдерживаемого. Одна из практик написания кода, которая меня просто раздражает, заключается в создании нежелательных побочных эффектов. Что такое побочный эффект? Это кусок кода, в котором созданная переменная становится доступной из глобальной области видимости, хотя этого не было задумано. Позвольте мне показать вам несколько примеров и научить, как избегать нежелательных побочных эффектов.

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

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

Традиционно перебор элементов массива в цикле осуществлялся в JavaScript с помощью цикла for():

var myArray = [1, 2, 3];
for(var x=0, length = myArray.length; x < length; x++) {
	// ...
}
// переменные "x" и "length" являются побочными эффектами

var myArray = [1, 2, 3];

for(var x=0, length = myArray.length; x < length; x++) {

// ...

}

// переменные "x" и "length" являются побочными эффектами

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

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

[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;
	});

})();

// Три переменные помещены в самовызывающуюся функцию, поэтому они не могут «просочиться» наружу

// Пример исходного кода библиотеки 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, если будете следовать лучшим традициям!

Автор: David Walsh

Источник: //davidwalsh.name/

Редакция: Команда webformyself.

Метки: JavaScript