O JavaScript é muito dinâmico nos dias de hoje, mas eu ainda vejo um monte de código herdado, seja para compatibilidade ideal com versões anteriores ou simplesmente porque esse código não foi mantido. Uma das práticas que me faz estremecer é a codificação que cria efeitos colaterais indesejados. O que é um efeito colateral? Uma parte do código segundo o qual uma variável é criada e está disponível ao longo de uma extensão quando não precisa estar. Deixa eu mostrar a você alguns exemplos e como evitar esses efeitos colaterais indesejados.

Array.prototype.forEach() em vez de for(var x = …)

Um loop através de um array do JavaScript foi tradicionalmente feito por meio de um loop for():

var myArray = [1, 2, 3];

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

// "x" and "length" are side effects

O efeito colateral desse padrão está, no mínimo, no índice em execução assim como no tamanho – eles estão disponíveis dentro de todo o escopo. Métodos protótipos array como map, forEach e every permitem que o desenvolvedor evite esses efeitos colaterais:

[1, 2, 3].forEach(function(item, index, array) {
	// No side effects! :)
});

Nenhuma variável auxiliar precisa ser criada para o looping, evitando, assim, os efeitos colaterais. Isso é chamado de programação “funcional”.

Funções autoexecutáveis

Se você ainda não leu Hiding Your Privates with JavaScript, e não sabe como manter as variáveis privadas em JavaScript, reserve alguns minutos para lê-lo. O mesmo padrão fornecido nesse artigo permite evitar os efeitos colaterais por meio das funções de autoexecução:

// Example from MooTools source...

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

})();

// The three vars are stuck in the self-executing function, they don't "leak" out

A essência aqui é que você pode fazer um monte de processamento dentro da função autoexecutável (um novo escopo) sem deixar as variáveis escapando para fora – o único item devolvido ou vazado é o valor de retorno desejado.

Ajustar o seu código inclui evitar efeitos colaterais, e o JavaScript torna mais fácil se você seguir essas práticas básicas!

***

David Walsh faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://davidwalsh.name/preventing-sideeffects-javascript