JavaScript, powszechnie znany jako JS, to język programowania o szerokim zastosowaniu, charakteryzujący się dużą elastycznością i popularnością. Niemniej jednak, jest on również podatny na różnego rodzaju usterki i nieprawidłowości, które potrafią przyprawić programistów o ból głowy.
JS jest często wykorzystywany do zapewnienia interaktywności po stronie klienta w większości aplikacji webowych. Bez niego, strony internetowe mogłyby być postrzegane jako statyczne i mało angażujące. Mimo to, zmienna natura tego języka czasami sprawia, że relacje programistów z nim oscylują między miłością a nienawiścią.
Błędy w JavaScript mogą powodować, że aplikacje działają w nieprzewidziany sposób, co negatywnie wpływa na doświadczenia użytkowników. Badanie przeprowadzone przez University of British Columbia (UBC) miało na celu zbadanie przyczyn oraz skutków tych błędów. Wyniki tego badania rzuciły światło na pewne powtarzające się schematy, które obniżają efektywność programów JS.
Poniżej prezentujemy wykres kołowy, ilustrujący wnioski z tego badania:
W tym artykule przyjrzymy się bliżej typowym przyczynom błędów w JavaScript, ujawnionym w badaniu (oraz innym, z którymi spotykamy się na co dzień), a także przedstawimy sposoby, aby uczynić aplikacje mniej podatnymi na awarie.
Problemy związane z DOM
Document Object Model (DOM) odgrywa kluczową rolę w interaktywności stron internetowych. Dzięki DOM możliwe jest manipulowanie treścią, stylem oraz strukturą witryny. To właśnie możliwość tworzenia interaktywnych stron internetowych HTML, czyli manipulacja DOM, była pierwotnym powodem powstania JavaScript.
Nawet po pojawieniu się technologii backendowych opartych na JavaScript, jak Node.js, praca z DOM nadal stanowi znaczną część zadań wykonywanych w tym języku. Z tego powodu DOM jest często źródłem błędów w aplikacjach JavaScript.
Nie jest zaskoczeniem, że badanie wykazało, iż problemy związane z DOM są przyczyną aż 68% błędów w JavaScript.
Przykładowo, wielu programistów często popełnia błąd, próbując odwołać się do elementu DOM zanim ten zostanie w pełni załadowany, co skutkuje błędami w kodzie.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Typowe błędy i usterki w JS";
</script>
<div id="container"></div>
</body>
</html>
Uruchomienie powyższego kodu w przeglądarce Chrome spowoduje wyświetlenie błędu w konsoli programisty:
Błąd ten wynika z faktu, że kod JavaScript jest zazwyczaj wykonywany w kolejności, w jakiej występuje w dokumencie. W konsekwencji, przeglądarka nie jest świadoma istnienia elementu
podczas wykonywania skryptu.
Istnieje kilka sposobów rozwiązania tego problemu. Najprostszym z nich jest umieszczenie
przed tagiem script. Można również użyć biblioteki JavaScript, takiej jak jQuery, aby upewnić się, że DOM jest w pełni załadowany, zanim zostanie podjęta próba dostępu do jego elementów.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("container").innerHTML = "Typowe błędy i usterki w JS";
</script>
</body>
</html>
Błędy składniowe
Błędy składniowe pojawiają się, gdy interpreter JavaScript natrafia na kod, który nie jest zgodny z jego gramatyką. W sytuacji, gdy interpreter podczas analizy kodu natknie się na tokeny nieodpowiadające standardowej składni JavaScript, zgłosi błąd. Zgodnie z badaniem, błędy składniowe stanowią 12% wszystkich błędów w tym języku.
Błędy gramatyczne, takie jak brakujące lub niezamknięte nawiasy, są najczęstszymi przyczynami błędów składniowych w JavaScript.
Na przykład, podczas używania instrukcji warunkowych, aby odnieść się do wielu warunków, zapomnienie o dodaniu wymaganych nawiasów może prowadzić do błędów składniowych.
Spójrzmy na poniższy przykład.
if((x > y) && (y < 77) {
//dalsza część kodu
}
Jak widać, brakuje zamykającego nawiasu w instrukcji warunkowej. Czy dostrzegasz ten błąd?
Poprawmy go:
if ((x > y) && (y < 77)) {
//dalsza część kodu
}
Aby uniknąć takich błędów, należy dokładnie zapoznać się z zasadami gramatyki JavaScript. Poprzez regularne ćwiczenia w kodowaniu, można łatwo wyłapać błędy gramatyczne i nie wprowadzać ich do tworzonej aplikacji.
Nieprawidłowe użycie `undefined` i `null`
Niektórzy programiści nie są w pełni świadomi poprawnego sposobu używania słów kluczowych `undefined` i `null`. Badanie wykazało, że niepoprawne stosowanie tych słów kluczowych jest przyczyną 5% wszystkich błędów w JavaScript.
Słowo kluczowe `null` jest wartością przypisania, która jest wykorzystywana, aby oznaczyć brak wartości. Co ciekawe, `null` w JavaScript jest także obiektem.
Oto przykład:
var codeJS = null;
console.log(codeJS);
//wynik: null
console.log(typeof codeJS);
//wynik: object
Z drugiej strony, słowo kluczowe `undefined` wskazuje, że zmienna lub inna właściwość, która została wcześniej zadeklarowana, nie ma przypisanej wartości. Może również oznaczać, że nic nie zostało zadeklarowane. `undefined` jest typem samym w sobie.
Oto przykład:
var codeJS;
console.log(codeJS);
//wynik: undefined
console.log(typeof codeJS);
//wynik: undefined
Co ciekawe, gdy użyjemy operatora równości (`==`) i operatora identyczności (`===`) do porównania `null` i `undefined`, ten drugi nie uzna ich za równe.
console.log(null==undefined); //wynik: true console.log(null===undefined); //wynik: false
Dlatego znajomość poprawnego sposobu użycia `null` i `undefined` może pomóc uniknąć błędów w programach JavaScript.
Niezdefiniowane metody
Innym częstym powodem pojawiania się błędów w JavaScript jest wywoływanie metody, która nie została wcześniej zdefiniowana. Naukowcy z UBC stwierdzili, że ten błąd jest odpowiedzialny za 4% wszystkich błędów w JavaScript.
Oto przykład:
var coder = {
name: "Piotr",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Tak wygląda błąd wyświetlany w konsoli programisty Chrome:
Powyższy błąd występuje, ponieważ funkcja `speakNow()` nie została zdefiniowana w kodzie JavaScript.
Nieprawidłowe użycie instrukcji `return`
W JavaScript instrukcja `return` służy do zakończenia działania funkcji i zwrócenia określonej wartości. Błędne użycie instrukcji `return` może obniżyć optymalną wydajność aplikacji. Jak wynika z badań, nieprawidłowe użycie instrukcji `return` powoduje 2% wszystkich błędów w aplikacjach JS.
Przykładowo, niektórzy programiści często popełniają błąd, nieprawidłowo dzieląc instrukcję `return` na kilka linii.
Chociaż kod JavaScript można podzielić na kilka linii i uzyskać poprawny wynik, przerwanie instrukcji `return` może okazać się katastrofalne dla działania aplikacji.
Oto przykład:
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Po uruchomieniu powyższego kodu w konsoli Chrome, pojawi się błąd `undefined`:
Dlatego należy unikać dzielenia instrukcji `return` w kodzie JavaScript.
Podsumowanie
JavaScript po stronie klienta to wszechstronne narzędzie, które pozwala tworzyć zaawansowane i funkcjonalne aplikacje internetowe. Jednakże, brak zrozumienia specyfiki i zawiłości tego języka może skutkować obniżeniem wydajności twoich aplikacji.
Dodatkowo, programiści JavaScriptu potrzebują kompleksowych narzędzi, które pomogą im w rozwiązywaniu problemów z wydajnością i szybkim wykrywaniu błędów.
Dzięki kompleksowemu zestawowi narzędzi do testowania, jesteś w stanie zidentyfikować nieprawidłowości, które obniżają wydajność strony. To jest klucz do poprawy funkcjonowania witryny i zapewnienia użytkownikom optymalnych wrażeń.
Życzymy udanego i bezbłędnego programowania w JavaScript!
Artykuł opracowany przez Alfricka Opidi.
newsblog.pl
Maciej – redaktor, pasjonat technologii i samozwańczy pogromca błędów w systemie Windows. Zna Linuxa lepiej niż własną lodówkę, a kawa to jego główne źródło zasilania. Pisze, testuje, naprawia – i czasem nawet wyłącza i włącza ponownie. W wolnych chwilach udaje, że odpoczywa, ale i tak kończy z laptopem na kolanach.