Грешка при забрана на преход по връзка в JavaScript

Нека имаме връзка:

<a href="">link</a>

Да вземем нашата връзка в променлива:

let link = document.querySelector('a');

Нека прикачим към нашата връзка манипулатор на кликването. В същото време ще предотвратим прехода по връзката, за да избегнем презареждане на страницата:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});

Изглежда, че сме се предпазили напълно от неочаквано поведение. Всъщност това не е така. Работата е там, че при възникване на синтактична грешка JavaScript кодът просто няма да се изпълни, блокирането на връзката няма да работи и ще се осъществи преход по нея.

В този случай няма да видим нито резултата от изпълнението на кода, нито грешка в конзолата, тъй като страницата ще се презареди. Нека умишлено направим грешка в кода и се убедим на практика:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // синтактична грешка
	event.preventDefault();
});

Този проблем има характерен признак: ако погледнем в конзолата в момента на кликване върху връзката, за миг ще видим червена грешка в конзолата, която почти веднага ще изчезне.

Разбира се, няма да успеем да прочетем текста на грешката, което значително затруднява нейното откриване. Има обаче хитричък метод. Трябва в href на връзката да поставим диез. В този случай преход по връзката няма да се случи и ще видим хвърлената в конзолата грешка:

<a href="#">link</a>