По-добро кодиране: JavaScript Conditionals

Тази публикация е публикувана първоначално на 11 февруари 2020 г. в моят блог.

За последния ми страничен проект за кодиране, Игра със зарове (адаптиран от моя курс по JS на Jonas Schmedtmann в Udemy), една част от логиката на програмата изисква хвърлянето на зарчето да доведе до променлива, съдържаща случайно число между 1 и 6.

В зависимост от това кой номер регистрира променливата, едно от шестте изображения на лицето на зара след това се показва на екрана с малко изящна манипулация на DOM.

Когато за първи път писах кода, първоначалната ми мисъл беше да напиша оператор if/else с всички условия на случайната променлива, съответстващи на всяко изображение на лицето на зара, както следва:

  let dice = Math.floor(Math.random() * 6) + 1;
    
  let diceImage = document.querySelector('.dice');
  diceImage.style.display = 'block';
     
  if (dice === 1) {
    diceImage.src = 'dice-1.png';
  } else if (dice === 2) {
    diceImage.src = 'dice-2.png';
  } else if (dice === 3) {
    diceImage.src = 'dice-3.png';
  } else if (dice === 4) {
    diceImage.src = 'dice-4.png';
  } else if (dice === 5) {
    diceImage.src = 'dice-5.png';
  } else if (dice === 6) {
    diceImage.src = 'dice-6.png';
  }

Но след това научих, че мога да актуализирам diceImage.src, използвайки принуда на типа, като добавя части от името на изображението като низ със съответния номер на изображението, поставен между:

let diceImage = document.querySelector('.dice');
diceImage.style.display = 'block';
diceImage.src = 'dice-' + dice + '.png';

Ето! Три реда код вместо шестнадесет!

Именно такива неща ме карат да се вълнувам от JavaScript и неговите (и моите!) възможности. Не само има много страхотни концепции за програмиране, които да продължите да учите, но има и безкрайни начини да направите кодирането на тези програми все по-четливо, ясно и ефективно.

Снимка на Fabian Grohs чрез Unsplash