Как избавиться от большого количества else if?

Question

[FIain]

Здравствуйте, практикую JS, создал небольшую игру где пользователь должен угадать число, но меня смущает наличие большого количества else if, является ли этот подход правильным? Если нет, то как можно переделать код?

import { declOfNum } from "./declofnum.js";

const userInput = document.querySelector('input');
const button = document.querySelector('button');
const number = Math.floor(Math.random() * 10);
const triesTitle = document.querySelector('h2');
const triesSpan = triesTitle.querySelector('span');
let tries = 10;

export function getUserInput() {

    if (userInput.value === '' || userInput.value.length === 0) alert('Ошибка');

    if (tries === 0) return alert('У вас закончились попытки');

    else if (userInput.value == number) return alert('Поздравляю, вы угадали');

    else if (userInput.value > number) {
        alert('Вы ввели слишком большое число');
        tries--;
        triesSpan.textContent = declOfNum(tries, ['попытка', 'попытки', 'попыток']);
        triesTitle.textContent = `У вас осталось ${tries} ${triesSpan.textContent}`;
    }

    else if (userInput.value < number && userInput.value != '' && userInput.value.length != 0) {
        alert('Вы ввели слишком маленькое число');
        tries--;
        triesSpan.textContent = declOfNum(tries, ['попытка', 'попытки', 'попыток']);
        triesTitle.textContent = `У вас осталось ${tries} ${triesSpan.textContent}`;
    }
}   

button.addEventListener('click', getUserInput)

Comments

[maksam07]

return alert ?

[FIain]

maksam07, подправил код, это неправильный подход? Просто хотел чтобы когда попыток не осталось или когда пользователь угадал число был выход из функции. Лучше сделать alert, а потом return?

[maksam07]

FIain, https://developer.mozilla.org/en-US/docs/Web/API/W...
У алерт, так сказать, нет значения, которое функция возвращает.

Далеко не лучшая оптимизация кода, просто первое что пришло в голову:

function getUserInput() {
    if (!tries) {
        alert('У вас закончились попытки')
        return false;
    }

    let value = userInput.value;

    if (isNaN(value)) {
        alert('Ошибка');
        return false;
    } else if (value == number) {
        alert('Поздравляю, вы угадали')
        return true;
    } else {
        tries--;
        triesSpan.textContent = declOfNum(tries, ['попытка', 'попытки', 'попыток']);
        triesTitle.textContent = `У вас осталось ${tries} ${triesSpan.textContent}`;
        
        if (value > number) {
            alert('Вы ввели слишком большое число');
        } else if (value) {
            alert('Вы ввели слишком маленькое число');
        }
    }
    return false;
}

Answer 1

[Adamos]

let variants = [
  { condition: (tries === 0), alert: 'У вас закончились попытки' },
  { condition: (value == number), alert: 'Поздравляю, вы угадали', returnValue: true },
  { decreaseTries: true }
];
for(let i = 0; i < variants.length; ++i) {
  let v = variants[i];
  if(typeof v.condition === 'undefined' || v.condition) {
    if(v.alert) {
      alert(v.alert);
    }
    if(v.decreaseTries) {
      tries--;
      triesSpan.textContent = declOfNum(tries, ['попытка', 'попытки', 'попыток']);
      triesTitle.textContent = `У вас осталось ${tries} ${triesSpan.textContent}`;
    }
    return v.returnValue || false;
  }
}

Все варианты перечислять не стал, нужные добавляются по аналогии.