Я нашел очень забавную карту бинго для конференц-связи на Pinterest и хотел создать приложение React на ее основе для использования во время конференц-связи. Приложение все еще находится в разработке, но вы можете найти его здесь, если хотите играть и во время конференц-связи.

В любом случае, этот средний пост посвящен не самому приложению, а простой функции, которую я в итоге написал для отслеживания счета, то есть подсчета маркера.

Я большой поклонник reduce, и для меня это был подходящий момент, чтобы использовать его для увеличения счета каждый раз, когда проверялась оценка. Вот что я в итоге написал:

function getScore(board) {
  return board.reduce((score, row) => {
    return (
      score +
      row.reduce((counter, cell) => {
        return counter + (cell.checked ? 1 : 0);
      }, 0)
    );
  }, 0);
}
export default getScore;

Теперь я думаю, что это выглядит красиво, как агрегация поднимается вверх от внутренней функции до последнего возврата. Ты бы согласился с этим?

Тем не менее, я смотрел на это и думал: «Это действительно читабельно?».

Учитывая, что у меня было много тестовых сценариев, я решил провести рефакторинг, используя императивный подход, и вот что я в итоге написал:

function getScore(board) {
  let score = 0;
  for (let y = 0; y < board.length; y += 1) {
    for (let x = 0; x < board[y].length; x += 1) {
      if (board[y][x].checked) {
        score += 1;
      }
    }
  }
  return score;
}
export default getScore;

Я должен сказать, что это, вероятно, более читабельно, и я ясно могу сказать, что мне будет легче объяснить себе в будущем, что делает эта версия функции getScore, если я увижу ее через пару недель.

Но действительно ли я хочу поставлять свой код с этой версией или, возможно, мне следует поставлять его с более элегантным функциональным подходом? Какой из них вы предпочитаете? Что вы думаете?

Ресурсы

Примечания

Спасибо Kim за обзор кода 🙏