Dlaczego tak wielu programistów tak często rzuca tytułowym tekstem (któremu zwykle towarzyszą mniej parlamentarne przerywniki) wykonując gest jak na zdjęciu powyżej? Odpowiedzi pewnie nie trzeba daleko szukać, dlatego dziś postanowiłem przyjrzeć się kilku powodom, dla których pada tak wiele pomstowań i siarczystych przekleństw z tak wielu pokoi projektowych :) Wybrałem 4 najczęstsze błędy JavaScript, bo niestety ale większość problemów związanych z pisaniem kodu w JavaScript wynika z nieznajomości niuansów tego języka - dotyczy to w szczególności osób na co dzień zajmujących się bardziej silnie typowanymi językami programowania…

1# Zakres zmiennych

To jeden z najczęściej popełnianych błędów - wyniesione z silnie typowanych języków założenie, że zakres zmiennych ogranicza się do bloku kodu zawartego pomiędzy dwoma nawiasami klamrowymi…

var x = 1;

if (x === 1) {
    var y = 2;
}

alert(y);

Tak wiem, przykład banalny ale dla niektórych może być mylący… W języku takim jak na przykład C#, powyższa operacja byłaby w ogóle niemożliwa - wystąpił by błąd już na etapie kompilacji. Ale nie w JavaScript! Tutaj wyświetlona zostanie liczba 2 ponieważ, **w JavaScript zakres zmiennych jest zawsze zakresem funkcji **- zmienna utworzona wewnątrz nawiasów klamrowych (za chwilę się dowiesz, że tak na prawdę wcale nie tam) jest więc widoczna również poza nią.

2# Przenoszenie deklaracji

Inną sprawą, o której należy pamiętać, jest coś co nazywamy przenoszeniem deklaracji (ang. hoisting). Otóż w JavaScript możliwe jest jak najbardziej stosowanie wielu rozrzuconych po całym kodzie instrukcji var jednak w rzeczywistości są one i tak traktowane jakby zostały zadeklarowane na początku. Zobaczcie:

function hoisting () {
    alert(x);
    var x = 'dupa';
    alert(x);
}

hoisting();

Powyższy kod najpierw wyświetli tekst undefined, a następnie dupa - spodziewać by się można, że zamiast tego powinien wystąpić wyjątek. Otóż nie, ponieważ nastąpiło przeniesienie deklaracji - powyższy kod jest więc tak na prawdę tożsamy z poniższym:

function hoisting () {
    var x;
    alert(x);
    x = 'dupa';
    alert(x);
}

hoisting();

Dlatego, aby uniknąć niepotrzebnego zaskoczenia, zawsze deklaruj wszystkie zmienne na początku funkcji! Dobrze jest też je od razu inicjować ponieważ, nie dzieje się to automatycznie tak jak w co poniektórych językach programowania.

3# Problemy z this

Ten problem nagminnie pojawia się m.in. podczas korzystania z funkcji wywołania zwrotnego będących jednocześnie metodami obiektu. Spójrzmy na taki przykład:

var test = {};
test.text = 'dupa',
test.showDeferred = function(){
    alert(this.text);
};

setTimeout(test.showDeferred, 100);

Powyższy kod wyświetli (z opóźnieniem) tekst undefined. Dlaczego? Ano dlatego, że liczy się kontekst wywołania, a w powyższym przykładzie tym kontekstem wywołania funkcji test.showDeferred jest przestrzeń globalna - funkcja setTimeout należy do tej przestrzeni i w niej wywołuje funkcje wywołania zwrotnego. Jednym z rozwiązań tego problemu może być wykorzystanie funkcji apply/call/bind:

var test = {};
test.text = 'dupa',
test.showDeferred = function(){
    alert(this.text);
};

setTimeout(test.showDeferred.bind(test), 100);

O tym problemie już kiedyś pisałem na blogu - warto też przejrzeć komentarze pod tamtym wpisem.

4# Operatory porównania

Czymś co sprawia wiele problemów są też oczywiście operatory porównania, które zachowują się trochę odmiennie od tych znanych z innych języków programowania. W JavaScript mamy do czynienia z niejawnym rzutowaniem podczas porównywania dwóch wartości za pomocą operatorów typu == czy !=, które każdy dobrze zna. Dlatego w ich przypadku typ zmiennej nie jest do końca istotny. Spójrzmy na przykład:

alert(false == '0');
alert(null == undefined);
alert("\t\r\n" == 0);
alert('' == 0);

Wszystkie powyższe instrukcje zwracają wartość true!! Dlatego w większości przypadków używaj operatorów takich jak === czy !== - one sprawdzają zarówno typ jak i wartość, a więc zachowują się tak jak prawdopodobnie się po nich spodziewasz.

4 najczęstsze błędy JavaScript - podsumowanie

Wybrałem tylko 4 najczęstsze błędy JavaScript żeby Was za bardzo nie zanudzić… Na bank znalazłoby się tego o wiele więcej. Ja jednak uważam, że większość narzekań na JavaScript bierze się przede wszystkim z niewiedzy na temat działania tego języka i chciałem pokazać, że wiele z tych problemów nie jest trudna do rozwiązania. Jeśli każdy znałby ten język lepiej i co ważne, akceptował jego odmienność, na pewno byłoby wszystkim łatwiej. Trzeba być tolerancyjnym przecież :P