Czemu zmiana else if na samo if w tym przypadku zmienia działanie mojego kodu

Question

Robię w js taką funkcję, która sprawdza, czy podana liczba jest dodatnia, ujemna, czy równa zero.

const response = document.querySelector('#response');

function chceckNumber(x)
{
    if (typeof x !== "Number")
    {
        response.textContent = 'Podana wartość jest nieprawidłowa. Wpisz dowolną liczbę';
    }
    if (x == "")
    {
        response.textContent = 'Nie podano liczby';
    }
    else if (x > 0)
    {
        response.textContent = 'Podana liczba jest dodatnia';
    }
    else if (x < 0)
    {
        response.textContent = 'Podana liczba jest ujemna';
    }
    else if (x == 0)
    {
        response.textContent = 'Podana liczba jest równa zero';
    }
}

window.addEventListener('keydown', (event) => {
    if (event.key === "Enter")
    {
        const inputValue = document.querySelector('#number').value;
        chceckNumber(inputValue);
    }
})

Podany wyżej kod działa prawidłowo, ale gdy zmienię warunek

if (x == "")
    {
        response.textContent = 'Nie podano liczby';
    }

na

else if (x == "")
    {
        response.textContent = 'Nie podano liczby';
    }

co w efekcie daje taki kod

const response = document.querySelector('#response');

function chceckNumber(x)
{
    if (typeof x !== "Number")
    {
        response.textContent = 'Podana wartość jest nieprawidłowa. Wpisz dowolną liczbę';
    }
    else if (x == "")
    {
        response.textContent = 'Nie podano liczby';
    }
    else if (x > 0)
    {
        response.textContent = 'Podana liczba jest dodatnia';
    }
    else if (x < 0)
    {
        response.textContent = 'Podana liczba jest ujemna';
    }
    else if (x == 0)
    {
        response.textContent = 'Podana liczba jest równa zero';
    }
}

window.addEventListener('keydown', (event) => {
    if (event.key === "Enter")
    {
        const inputValue = document.querySelector('#number').value;
        chceckNumber(inputValue);
    }
})

sprawia, że bez względu na wartość w polu tekstowym wyświetla się odpowiedź, że podana wartość jest nieprawidłowa.

Czy ktoś wie dlaczego tak się dzieje? Jestem bardzo ciekwawy, czemu to tak działa

Comments

ja przypomnę tylko, że nagrywałeś "chcąc uczyć innych", odcinki dotyczące JavaScript np. a potem chyba nawet node.js

Przyczym raz, że tutaj trywialny jest błąd, są to jako tako podstawy, dwa, możesz przecież samemu prześledzić i debugować czym jest "x"

---

Wiciorny jak zawsze na posterunku B)

Answer 1

typeof x jest równe "string".

Answer 2

1. Najzwyklejszy console-log-debugging rozwiązuje ten problem.
2. Nie używaj ==
3. W wersji pierwszej po wykonaniu bloku if dalej sprawdzasz i wykonujesz kolejne bloki if. 
4. Typescript rozwiązuje takie problemy.

Comments

W jaki sposób TS rozwiązuje takie problemy?

---

Jak typujesz po number to raczej nie sprawdzasz w ciele funkcji czy typeof się zgadza i czy zmienna nie jest pustym stringiem.

---

Ale tutaj typowanie po number nie ma sensu, bo ta funkcja zawsze dostanie string ;) Co więcej: string pochodzący od usera, więc nie masz pojęcia, co tak naprawdę dostajesz. TypeScript absolutnie nic nie pomoże w walidacji danych w runtime.

---

Co więcej: string pochodzący od usera, więc nie masz pojęcia, co tak naprawdę dostajesz. TypeScript absolutnie nic nie pomoże w walidacji danych w runtime.

Gdyby ten argument był zasady, to podważałby całą sensowność typowania w tsie. Jeśli ktoś nie pilnuje swojej walidacji to zgoda, typy nie pomogą. Swoją drogą pisanie w jsie bez znajomości API z którego się korzysta tak właśnie się kończy - wszystko może być wszystkim. I tutaj TS może już pomóc.

---

Gdyby ten argument był zasady, to podważałby całą sensowność typowania w tsie.

Ale co ma typowanie w build time do walidacji w runtime? To są dwie zupełnie osobne kwestie. Można sobie otypować dane w API… ale potem trzeba i tak zrobić walidację, bo nie wiesz, co Ci przyjdzie.

Swoją drogą pisanie w jsie bez znajomości API z którego się korzysta tak właśnie się kończy - wszystko może być wszystkim. 

Tego też nie rozumiem w kontekście tego kodu. Wartość pola tekstowego zawsze jest stringiem. 

---

Robię w js taką funkcję, która sprawdza, czy podana liczba jest dodatnia, ujemna, czy równa zero.

Dalej uważasz że funkcja powinna dostawać string jako argument? Gdyby napisał to w tsie typując po number od razu poleciałby błąd.

Ale co ma typowanie w build time do walidacji w runtime?

No dość dużo, bo jak sam słusznie zauważyłeś nie ma sensu typować bez walidacji.

---

Dalej uważasz że funkcja powinna dostawać string jako argument? Gdyby napisał to w tsie typując po number od razu poleciałby błąd.

Dla mnie to jest funkcja walidująca dane przekazane od usera. Od usera dostaję stringa, więc przekazałbym tam stringa. Można rzutować na liczbę przed przekazaniem do funkcji, ale równie dobrze można to zrobić wewnątrz. W sensie serio nie widzę jakiejś wielkiej zalety z wykorzystania TS-a tutaj.

Answer 3

document.querySelector(...).value zwraca zawsze typ string*, więc zawsze się wykona pierwszy blok (IMO w tym przypadku lepiej jest użyć isNaN)

    if (typeof x !== "Number")
    {
        response.textContent = 'Podana wartość jest nieprawidłowa. Wpisz dowolną liczbę';
    }

 

---

 

W pierwszym przypadku są zawsze wykonywane pierwsze if-y, czyli blok A i B.

w drugim przypadku mamy tylko jeden blok if-ów, pierwszy, który zwróci wartość true przerywa dalsze wykonywanie bloku if-ów, czyli w tym przypadku jeżeli x nie jest liczbą, true zwraca pierwszy if (przerwanie sprawdzania kolejnych if-ów), drugi if w przypadku gdy x jest liczbą nigdy się nie wykona bo jakakolwiek liczba nie jest równa pustemu łańcuchowi znaków ( "" ).

 

*

<input id="text" value="0"><!-- domyślnie type="text" -->
<input type="number" id="number" value="0">
<pre id="response"></pre>

<script>
  window.addEventListener('keydown', (event) => {
    if (event.key === 'Enter')
    {
      document.querySelector('#response').textContent = 
        typeof document.querySelector('#text').value;

      document.querySelector('#response').textContent += '\n';

      document.querySelector('#response').textContent +=
        typeof document.querySelector('#number').value;    
    }
  }) 
</script>

 

 

BTW,

spróbuj zapisać tak blok warunków, według jednej z zasad tu opisanych: 5 Tips to Write Better Conditionals in JavaScript

const response = document.querySelector('#response');

function chceckNumber(x)
{
  if (isNaN(x)) {
    response.textContent = 'Podana wartość jest nieprawidłowa. Wpisz dowolną liczbę';
    return;
  }  
  if (x == "")  {
    response.textContent = 'Nie podano liczby';
    return;
  }

  response.textContent = 'Podana liczba jest ' + 
    ((x > 0) ? 'dodatnia': (x < 0) ? 'ujemna' : 'równa zero');
}

window.addEventListener('keydown', (event) => {
  if (event.key === 'Enter')
  {
    const inputValue = document.querySelector('#number').value.trim();
    chceckNumber(inputValue);
  }
})

 

[ Difference Between =, ==, and === in JavaScript ]