Por que o array é exibido no terminal com quebras de linhas e não tudo em uma linha só?

É a forma como o console do navegador (ou terminal) interpreta e formata os dados, quando você utiliza o console.log() para imprimir um array em JavaScript, o navegador (ou Node.js) geralmente converte o array em uma string para exibi-lo. Cada elemento do array é convertido em uma linha separada para facilitar a leitura e a visualização.

Utilizando o método join() do JavaScript. Esse método une todos os elementos de um array em uma única string, utilizando um separador especificado.

const menuPrincipal = ['lasanha', 'feijoada', 'macarronada'];
const menuDeSobremesas = ['pudim', 'sorvete', 'brigadeiro'];
// Unindo os elementos do array em uma única string, separada por vírgula com join()
const menuCompleto = menuPrincipal.concat(menuDeSobremesas).join(', ');

console.log('Veja o menu completo:', menuCompleto);

let matriz = [];
let valorInicial = 1;

for (let i = 0; i < 3; i++) {
  let linha = [];
  for (let j = 0; j < 3; j++) {
    linha.push(valorInicial++);
  }
  matriz.push(linha);
}

console.log('Matriz de duas dimensões:');
console.log(matriz);
matriz.forEach(row => console.log(row)); // visualização em linhas e colunas

console.log('Elemento na segunda linha e terceira coluna:', matriz[1][2]);

// matriz.splice(2, 0, 15);
// matriz[1].splice(2, 0, 15)

matriz[2][1] = 15;
console.log('Matriz após adição de elemento:', matriz);

// console.log(matriz);

No console.log('Matriz após adição de elemento:', matriz); o terminal exibiu tudo em uma mesma linha agora, pq esse funcionamento diferente?

É a forma como é interpretado e formatado os dados, quando você usa o forEach para iterar sobre as linhas da matriz e imprimir cada linha individualmente, o console tem mais contexto para entender que você quer uma visualização linha a linha; Ao passar diretamente a matriz inteira para o console.log, o JavaScript converte a matriz em uma única string, acredito que nesse caso, pode não ter contexto suficiente para formatar a saída em múltiplas linhas.

Tanto que ao aumentar os elementos, ele se comporta de maneira diferente:

let matriz = [];
let valorInicial = 1;

//for (let i = 0; i < 3; i++) { 
  for (let i = 0; i < 5; i++) { // mudando de 3 para 5 para aumentar os elementos
    let linha = [];
  for (let j = 0; j < 3; j++) {
    linha.push(valorInicial++);
  }
  matriz.push(linha);
}

console.log('Matriz de duas dimensões:');
console.log(matriz);
matriz.forEach(row => console.log(row)); // visualização em linhas e colunas

console.log('Elemento na segunda linha e terceira coluna:', matriz[1][2]);

// matriz.splice(2, 0, 15);
// matriz[1].splice(2, 0, 15)

matriz[2][1] = 15;
console.log('Matriz após adição de elemento:', matriz);

// console.log(matriz);

E isso também é valido para o outro exemplo:

const menuPrincipal = ['lasanha', 'feijoada', 'macarronada'];
const menuDeSobremesas = ['pudim', 'sorvete']; // retirando um elemento
const menuCompleto = menuPrincipal.concat(menuDeSobremesas);

console.log('Veja o menu completo:', menuCompleto);