Pomoc w nauce, javascript, krótkie pytanko

Cześć zakładam sobie topic w którym będę czasem pytał o różne sprawy dotyczące codzenia, nie chce robić co rusz nowego topicu więc będę po prostu miał jeden.

Zacząłem od paru dni uczyć się programowania (wiem, że teraz ciężko o robotę, tak sobie hobbystycznie kodze) na www.codecademy.com, rozpocząłem od javascriptu i zrobiłem w jednym zadanku mini gre "papier, kamień, norzyce" przeciwko komputerowi, aczkolwiek gdy użyłem skróconej wersji kodu dla pentli if else to AI powiedziało, że kod jest mało czytelny i mimo tego, że miał dosłownie 3 linijki, a wyglądał on tak:

const chooseTheWinner = (userInput, computerInput)=> {
return userInput === computerInput ? 'draw' : userInput === 'rock' && computerInput === 'paper' ? 'Computer win' : userInput === 'scissors' && computerInput === 'rock' ? 'Computer win' : userInput === 'paper' && computerInput === 'scissors' ? 'Computer win' : 'Player win';
}

Niestety nie wiem jak zrobić żeby wyświetlało na forum zrobiło mi enter w kodzie :D
Pytanie brzmi następująco czy AI ma racje czy taka forma kodu jest mniej czytelna aniżeli 15-20 linijek kodu zapętlonej pętli if lub pentli if else if ?
Nie ufam AI bo oszukuje :D

1. pętla pisze się przez ę
2. if to nie jest pętla
3. ja nie lubię długich linii, 80, 120 góra 160 znaków. ile masz tutaj?

ok, 274, trochę długie, trochę nieczytelne jak muszę przewijać kod. ja programuję na lapku z małym ekranem więc nie lubię takich linii

Zakładaj osobny topic do każdego pytania bo zrobi się tu bałagan a topiców na tych forum zwłaszcza technicznych i tak nie ma zbyt wielu - rozruszasz forum

Co do pytania - tak - praktycznie każdy linter ci zakaże zagnieżdżać operatory warunkowe. Czy jest czytelne? Patrzę na to od 20 sekund i gdyby nie to że wiem co ten kod ma robić to bym nadal nie wiedział co robi. Gdybyś go rozbił na linijki:

return userInput === computerInput
  ? 'draw'
  : userInput === 'rock' && computerInput === 'paper'
    ? 'Computer win'
    : userInput === 'scissors' && computerInput === 'rock'
      ? 'Computer win'
      : userInput === 'paper' && computerInput === 'scissors'
        ? 'Computer win'
        : 'Player win';

to jest trochę lepiej, ale nadal kiepsko z czytelnością. Na kod powinno się spojrzeć i wiedzieć co się dzieje, jak analiza tak krótkiego fragmentu zajmuje więcej niż 30 sekund to coś jest przekombinowane.
Lintery zazwyczaj pozwalają na tylko jeden operator warunkowy na raz. Resztę powinieneś sobie wydzielić do zmiennych.

Poza tym powtarzasz się trzy razy - są trzy przypadki gdzie zwracasz "Computer win" więc możesz je połączyć:

if (userInput === computerInput) return 'draw';
return (userInput === 'rock' && computerInput === 'paper') ||
       (userInput === 'scissors' && computerInput === 'rock') ||
       (userInput === 'paper' && computerInput === 'scissors'))
         ? 'Computer win'
         : 'Player win';

nie czytelniej? Tu też jest limit - nie powinno się łączyć w zasadzie więcej niż 3 warunków i to też lintery często wyłapują.

Dzięki za odpowiedź

Bardzo nieczytelnie. Za długa linijka, która w dodatku zawiera w sobie zagnieżdżone rozgałęzienia, których nie widać. Proponuję tak:

const ranks = ["rock", "paper", "scisors"];
const winnerString = (user, computer) => {
  const diff = ranks.indexOf(computer) - ranks.indexOf(user);
  
  if(diff == -2 || diff == 1) {
      return "Computer wins";
  } else if (diff == 0) {
      return "Draw";
  } else {
      return "Player wins"
  }
}

Może trzeba chwilę pomyśleć, ale mniej czytania i mniej powtarzających się literałów.

@elwis: i o to chodzi w programowaniu. Też od razu pomyślałem że czemu nie zrobić metody ewaluujacej wynik ze wskazaniem. Dobra robota Pan!

ale kombinujecie

const getWinner = (user, computer) => {
  const beats = { rock: 'scissors', paper: 'rock', scissors: 'paper' };
  
  return user === computer ? 'draw' 
    : beats[user] === computer ? 'Player win' 
    : 'Computer win';
};