Функциональное программирование с Array.push () и Array.splice ()

Question

Я только начинаю изучать функциональное программирование и хочу применить это на практике в моей личной разработке React, чтобы развить функциональное мышление.

Вот вопрос: В функциональном программировании неизменность является частью его характеристики, позволяющей избежать изменения данных на месте. Но рассмотрим использование push() и splice() в следующем методе, является ли использование в обоих из них приемлемым в функциональном способе программирования, учитывая, что и const squares = [];, и const boardRows = []; не являются глобально определяемыми переменными?

renderBoard() {
    const squares = [];
    const boardRows = [];
    const rowBlock = (squares) => (<div className="board-row">{squares[0]}{squares[1]}{squares[2]}</div>);
    const div = (boardRows) => (<div>{boardRows[0]}{boardRows[1]}{boardRows[2]}</div>);

    let index = 0;
    for (var j = 3; j > 0; j--) {
        for (var i = 0; i < 3; i++) {
            const square = this.renderSquare(index++, [j, i + 1]);
            squares.push(square);
        }

        const boardRow = rowBlock(squares);
        boardRows.push(boardRow);
        squares.splice(0); //clear array to store squares of next board row
    }

    return(div(boardRows));
}

Answer 1

Нет, это, вероятно, не следует рассматривать как лучший способ сделать это функционально - как вы сказали, функциональное программирование должно избегать мутаций, и в этом случае (как в большинстве случаев) (многие) мутации не нужны. Попробуйте создать массивы сразу, используя Array.from, что не требует ни мутаций, ни переназначения:

const length = 3;
const boardRows = Array.from({ length }, (_, outer) => {
  const j = 3 - outer;
  const boardRow = Array.from({ length }, (_, i) => (
    this.renderSquare(outer * length + i, [j, i + 1])
  ))
  return rowBlock(boardRow);
});