Erro de alternância de calendário em JavaScript

Suponha que queremos criar setas para alternar um calendário. Nesse caso, é possível cometer uma série de erros característicos. Vamos analisá-los.

Suponha que temos botões de alternância e um elemento no qual, por simplicidade, exibiremos não o calendário, mas apenas o ano e o nome do mês:

<button id="prev">prev</button>
<div id="elem"></div>
<button id="next">next</button>

Vamos obter referências para nossos elementos:

let elem = document.querySelector('#elem');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');

Suponha que também temos uma função que recebe como parâmetro o número do mês e retorna seu nome:

function getMonthName(month) {
	let names = [
		'jan', 'fev', 'mar', 'abr', 'mai', 'jun',
		'jul', 'ago', 'set', 'out', 'nov', 'dez'
	];
	
	return names[month];
}

Ao carregar a página, vamos obter o ano e mês atuais:

let date  = new Date;
let year  = date.getFullYear();
let month = date.getMonth();

Vamos exibir em nosso elemento o ano e o nome do mês (simulando um calendário):

elem.textContent = year + ' ' + getMonthName(month);

Agora, vamos adicionar ouvintes de eventos de clique aos botões de alternância:

prev.addEventListener('click', function() {
	// exibe o mês anterior
});

next.addEventListener('click', function() {
	// exibe o próximo mês
});

Vamos agora considerar quais erros podem ser cometidos ao implementar os botões de alternância.

Primeiro erro

Suponha que um determinado programador implementou os botões para alternar os meses:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month + 1);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month - 1);
});

No entanto, este programador cometeu um erro, devido ao qual o mês alterna apenas no primeiro clique, mas não nos subsequentes.

O problema é que a variável month não é alterada dentro das funções - simplesmente se adiciona um ao seu conteúdo e o resultado é enviado para a função getMonthName.

Como nossa variável não mudou, no próximo clique ela ainda conterá o mês atual - e nada mudará.

Vamos corrigir o problema:

next.addEventListener('click', function() {
	month = month + 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	month = month - 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

Pode ser simplificado:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(++month);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(--month);
});

Segundo erro

Muitas vezes esquece-se que o mês deve variar em um determinado intervalo - de 0 a 11. Ao atingir o limite do intervalo devemos mudar o ano (para frente ou para trás), e redefinir o mês para o valor inicial.

Vamos fazer isso:

next.addEventListener('click', function() {
	if (month === 11) {
		month = 0;
		year++;
	} else {
		month++;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	if (month === 0) {
		month = 11;
		year--;
	} else {
		month--;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});