Duvida - Por quê a divisão é feita antes da concatenação mesmo sem uma ordem de priorização?

Queria começar de trás pra frente. Primeiro, esqueça aquela coisa da escola: parênteses, colchetes, chaves. Aqui é tudo parênteses, então a sua última linha seria:

document.write("A média das idades é" + ((20 + 10 + 30)/3);

E os parênteses são executados de dentro para fora. Primeiro o par de dentro, depois o par de fora.

Agora, vamos à dúvida. Os parênteses alterando a precedência do sinal de adição (o 'mais') são necessários porque o Javascript usa este mesmo sinal para duas atividades totalmente diferentes: adição e concatenação, que têm a mesma precedência, ou seja, a coisa acontece da esquerda pra direita. Então, na sua linha de exemplo:

"A soma das idades é" + 20 + 10 + 30

A máquina vai fazer a primeira operação, que é entre "A soma das idades é" e 20. Como o primeiro operador é do tipo string, então ele vai tratar o sinal + como um sinal de concatenação. O mesmo vale quando ele for realizar as operações + 10 e + 30, sempre da esquerda pra direita.

Já o sinal de divisão, este só serve para uma atividade mesmo: dividir (do jeito que a gente aprende na escola). E mais: esta atividade tem precedência sobre a adição/concatenação (mais uma vez, do mesmo jeito que a gente vê na escola). Mas até a divisão, claro, perde prioridade pros parênteses. Então, para esta linha:

document.write("A média das idades é" + (20 + 10 + 30)/3);

a sequência de execução seria:

• (20 + 10 + 30) por causa dos parênteses
• 60/3 porque divisão tem precedência sobre soma/concatenação
• "A média das idades é" + 20 que é a última operação a ser realizada, uma concatenação.

Apesar disso tudo, boas práticas de programação incluem colocar, às vezes, parênteses em lugares desnecessários, não apenas para ter certeza de que aquele código vai ser executado como se espera, mas também para melhorar a legibilidade do código.

Ok? :)

Muito obrigado, Leandro!

Agora ficou mais claro para mim!