Kiedy stosować else if a kiedy samo else?

pytanie zadane 23 stycznia 2018 w JavaScript przez ildan91 Użytkownik (630 p.)

Witam, Chciałbym, żeby ktoś mi wytłumaczył różnicę między else if i else w JS. Pytam gdyż, często dla poszczególnych warunków pisze się samo if:

if warunek;

Czasami:

if warunek;

else if warunek;

albo

if warunek;

else if warunek;

else warunek;

Czasami działa pierwsza opcja czasami druga czasami trzecia.. U mnie w przykładzie do ostatniego warunku musiałem dać else if. Samo 'else' psuje kod. Dlaczego? Ktoś wie?

<script >
	function sprawdz()
	{
	    var liczba=document.getElementById("pawlak").value;
		if (liczba>0) document.getElementById("wynik").innerHTML="dodatnia";
	else if (liczba<0) document.getElementById("wynik").innerHTML="ujemna";
	else if (liczba=="0") document.getElementById("wynik").innerHTML="zero";
	else if (liczba==0) document.getElementById("wynik").innerHTML="wpisz cos";
	 
	;
	
	
	
	}
	
	
	
	</script>

7 odpowiedzi

odpowiedź 23 stycznia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Dostałeś już widzę sporo odpowiedzi o samej instrukcji IF. Od siebie tylko dodam, że jak już opanujesz IFa to polecam poczytać o switch, co pozwala zastąpić wielokrotne else if i jest lepszą formą dla wielu warunków (choć jeśli miałbyś na prawdę dużo warunków to warto zacząć zastanawiać się może nad jakimś wzorcem projektowym, ponieważ "mega" rozbudowane if oraz switch to też niezbyt dobre rozwiązanie).

I na marginesie poczytaj o formie trójargumentowej:

const a = ( b === 2 ) ? 'yes' : 'no';

Powyższa instrukcja sprawdza zmienną "b" i jeśli ma ona wartość 2 to w stałej "a" zapisuje "yes", a jeśli nie to zapisuje "no". Forma taka często jest stosowana w praktyce aby skrócić zapisy z IF.

No i jeszcze jedno... w JS stosując IF pilnuj abyś potem stawiał klamerki. Co prawda przy pojedynczych instrukcjach nie jest to obowiązkowe ale jest to bardzo dobra praktyka, szczególnie gdy zaczynasz naukę JS.

Obowiązkowo również doczytaj o operatorach "==" vs "===".

Pozdrawiam

komentarz 23 stycznia 2018 przez shotokan Nałogowiec (39,660 p.)

Ta forma trójargumentowa to inaczej operator warunkowy lub zwany inaczej instrukcją przetwarzania warunkowego? Bo wygląda mi na to samo, ale jeszcze takiej nazwy nie słyszałem :)

komentarz 23 stycznia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Powiem Ci szczerze, że w wielu książkach widywałem najróżniejsze nazwy :) Po części pewnie odpowiedają za to tłumacze i ich inwencje twórcze. Najczęściej widuję operator warunkowy, trójargumentowy, trójkowy (pamiętam że gdzieś i takie coś widziałem) itp. Instrukcja przetwarzania warunkowego to jeszcze nie widziałem, ale głównie siedzę w JS więc może to w jakimś innym języku popularna forma np. wśród tłumaczy:)

Jak zwał tak zwał, ważne, żeby Kolega autor posta wiedział jak to użyć i po co :)

Pozdrawiam!

komentarz 23 stycznia 2018 przez shotokan Nałogowiec (39,660 p.)

Dzięki wielkie!
Pozdrawiam

odpowiedź 23 stycznia 2018 przez k.wichura Pasjonat (19,870 p.)
edycja 23 stycznia 2018 przez k.wichura

odpowiedź 23 stycznia 2018 przez Schizohatter Nałogowiec (39,600 p.)

odpowiedź 23 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Nieco abstrahując od tematu dodam tylko, że w takiej sytuacji lepiej zastosować textContent zamiast innerHTML

komentarz 23 stycznia 2018 przez ildan91 Użytkownik (630 p.)

a mogę wiedzieć czemu lepiej?

komentarz 23 stycznia 2018 przez Artek Stary wyjadacz (11,800 p.)

Na pewno będzie szybciej. Jak sama nazwa wskazuje innerHTML jest do umieszczania kodu html. Ty takowego nie umieszczasz za to umieszczasz tekst zatem poprawniej i szybciej będzie textContent.

komentarz 23 stycznia 2018 przez ildan91 Użytkownik (630 p.)

wypróbuję dzięki za podpowiedź

komentarz 23 stycznia 2018 przez imklau Nałogowiec (42,090 p.)

Element.innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. However, textContent often has better performance because the text is not parsed as HTML. Moreover, using textContent can prevent XSS attacks.

odsyłam jeszcze do poczytania :) - mdn

odpowiedź 23 stycznia 2018 przez NiCKo Początkujący (490 p.)

To proste! Słuchaj...
jak masz if'a i masz warunek przy tym if'ie, ale chcesz dodać akcje "co ma się stać, jeżeli tego warunku nie spełni" ALE NIE MA ŻADNYCH DODATKOWYCH WARUNKÓW, PO PROSTU NIE SPEŁNIA I KONIEC, to dajesz else. Nawet tłumacząc z j.angielskiego na j. polski mamy: if...else... ->jeżeli...w przeciwnym wypadku...
Inna sprawa ma się w przypadku, gdy dasz dodatkowe warunki, wtedy dajesz if...if else..if else...if else... else..., ale to zależy, co chcesz osiągnąć. Analogicznie j.angielski->j.polski: if...if else..if else...if else..else ->jeżeli...jeżeli, pod warunkiem, że...jeżeli, pod warunkiem, że....jeżeli, pod warunkiem, że....w przeciwnym wypadku (do wszystkich warunków podanych powyżej)....

Przykład? Okej, trochę "na siłę" przykład, ale myślę, że jasno zobrazuje sytuacje.
1.Chcemy wybrać liczby dodatnie (bez zera) ze zbioru liczb rzeczywistych. Użytkownik wprowadza tę liczbę i przechowujemy ją w zmiennej liczba. Jak będzie wyglądał warunek? No, generalnie musimy zaznaczyć, że chcemy tylko dodatnie (bez zera) wartości, resztę odrzucamy.

if(liczba>0) cout<<"O! Ta liczba jest w porządku!"<<endl;
else cout<<"No, niestety, ta liczba nie jest liczbą dodatnią."<<endl;

2.Podobnie, jak w poprzednim przykładzie, tyle że tym razem chcemy i dodatnie, i ujemne, a zero wywalamy. Czyli jak będzie wyglądał warunek?

if(liczba>0) cout<<"O! Ta liczba jest w porządku!"<<endl; 
else if(liczba<0) cout<<"O! Ta liczba jest w porządku!"<<endl;
else cout<<"Zero! Fuuuj!"<<endl;

Podsumowując: dajesz else, jeżeli nie dajesz dodatkowych warunków, dajesz if else, gdy dajesz te dodatkowe warunki.

P.S.

else if (liczba=="0") document.getElementById("wynik").innerHTML="zero";

else if (liczba==0) document.getElementById("wynik").innerHTML="wpisz cos";

Te warunki nie powinny być na odwrót? Pytam, bo nie koduję w JS'ie ;)

komentarz 23 stycznia 2018 przez ildan91 Użytkownik (630 p.)

jasne, ogólnie nie mam problemu ze zrozumieniem tego, chodzi mi tylko o to czemu pisząc do ostatniego warunku samo 'else' psuło kod. Teraz już ponieważ gdy stosujemy samo else nie powinniśmy pisać żadnego warunku bo bedzie się to odnosiło do wszystkiego tego co nie spełnia wyżej wymienionych warunków. Dzięki wszystkim za pomoc.

komentarz 23 stycznia 2018 przez NiCKo Początkujący (490 p.)

Okej, tylko zastanawia mnie jedna rzecz. Rozumiem, że zmienna liczba jest typu całkowitego, tak? To dlaczego zero w jednym warunku jest ujęte w cudzysłów?

else if (liczba=="0") document.getElementById("wynik").innerHTML="zero";

Może to jest przyczyna?

komentarz 23 stycznia 2018 przez ildan91 Użytkownik (630 p.)

ponieważ bez tego zapisu, nie wpisując niczego w imput będziesz miał napisane pod imputem 0, czyli będzie tak samo jakbyś wpisał 0 do imputu. Dlatego trzeba było wziąć w cudzysłów .

komentarz 24 stycznia 2018 przez NiCKo Początkujący (490 p.)

Aaa, takie buty :) Dzięki!

odpowiedź 23 stycznia 2018 przez Beginer Pasjonat (22,110 p.)

Nieprawidłowo napisałeś trzecią opcję, ponieważ przy ostatnim else (na dole) nie może być już żadnego warunku. Tutaj, w ostatnim else podajesz, co program ma wykonać, jeśli nie został spełniony żaden z wcześniejszych warunków. (Jak gdyby przewidujesz stan awaryjny).

Trzecia opcja, którą podałeś (tylko bez ostatniego warunku) ma częste zastosowania w praktyce.

komentarz 23 stycznia 2018 przez ildan91 Użytkownik (630 p.)

zgadzam się ale już napisałem wyżej. Własnie to był błąd, ze napisałem warunek do same else, gdzie domyślnie else odnosi się do wszystkiego co nie spełnia wyżej wymienionych warunków, Dzięki oczywiście za wpis.

komentarz 23 stycznia 2018 przez Beginer Pasjonat (22,110 p.)

Ja też się kiedyś zastanawiałem, po co stosować drugą opcję z else if, skoro można podać warunki z samym if (pierwsza opcja). Ale zauważ, że wtedy nie miałbyś możliwości napisania, jak program ma się zachować, jeśli żaden warunek nie zostanie spełniony (podając to na końcu w samym else).