De início é bom esclarecer que "Concatenar PHP no JS" talvez não seja a melhor descrição do que ocorre aí, acredito que o termo mais correto seria algo como "Dinâmicamente gerar JS com PHP", afinal o que ocorre é que você cria partes de javascript printando (echo) conteúdo do PHP.
Respondendo a questão: dependendo do seu caso eu diria que é a opção mais apropriada sim. Se você tem um JS pequeno, digamos algo como seu exemplo de umas 20 linhas ou menos, e ele precisa manipular dados que estão no server-side (php), dar um echo e pegar o conteúdo que você precisa do PHP é simplesmente a maneira mais simples, se funciona e é código legível não tem porque alguém reclamar.
Caso seu JS tenha um tamanho razoável a situação já muda, ter uma mega bloco de javascript no meio de PHP code é algo que eu considero pavoroso, destoa completamente do código em volta, é difícil de ler e é algo que nitidamente quebra separação de responsabilidades. Neste caso eu recomendo colocar o JS no devido lugar, um arquivo .js separado, e para você ter acesso aos valores phpnianos (heh que palavra infeliz) de que precisa existem três opções:
- Ajax, seu javascript faz um request para o server pedindo os valores de que precisa. É uma solução "pura" visto que você não mistura php e javascript diretamente, porém é a mais inchada já que você vai ter que ter um bloco AJAX no js, um php endpoint ("url que o ajax vai chamar") e uma request extra que o cliente vai ter que fazer após carregar a página.
- No php faça echo dos dados que o js precisa como value de um input hidden, ex:
echo '<input id="mypreciousdata" type="hidden" value="' . $var . '" />';
e no js você faz algo tipo console.log($("#mypreciousdata").val());
. Esta também é uma solução "pura" em termos de separação de código, não gera overhead como ajax e é razoávelmente simples.
- No php gere um JS que tem os dados armazenados em algum objeto global, ex:
echo '<script>var MeuApp = {data1: "' . $var . '", data2: "' . $var2 . '"};</script>
e no seu JS basta acessar a tal variável console.log(MeuApp.data1);
. Essa costuma ser minha estratégia mais usada pois considero a pragmática. Embora misture código js e php para inserir os dados no objeto serão apenas algumas poucas linhas de código nisso, estando o grosso do seu js que vai usar os dados em um arquivo separado.