O resultado do código esta sendo diferente mesmo eu usando as variáveis que dão o mesmo valos

Eu estou como o código escrito praticamente igual ao de exercício. que é esse.

<meta charset="UTF-8">

<script>
    var ano = 2016

    document.write("Flávio tem " + (ano - 1977) + " anos");
    document.write("<br>")
    document.write("Joaquim tem " + (ano - 1996) + " anos");
    document.write("<br>")

    ano = 2017
    document.write("Barney tem " + (ano - 1976) + " anos");

document.write("<br>");    

 var idadeFlavio = 39;
 var idadeJoaqui = 20;
 var idadeBarney = 41;

var media = (idadeFlavio + idadeJoaqui + idadeBarney) / 3;

document.write ("A média das idades é " + Math.round(media));

 document.write ("<br>");
 document.write ("<br>");

var nome = "Flávio";

document.write("A idade de " + nome + " é " + idadeFlavio);

</script>

O resultado dele é:

"Flávio tem 39 anos

Joaquim tem 20 anos

Barney tem 41 anos

A média das idades é 33

A idade de Flávio é 39"

Igual ao do professor.

Para tentar otimizar o programa eu queria deixar as variáveis "idadeFlavio", "idadeJoaqui" e "idadeBarney" não como números e sim como variáveis como no começo do código como uma equação:

var ano = 2016

    document.write("Flávio tem " + (ano - 1977) + " anos");
    document.write("<br>")
    document.write("Joaquim tem " + (ano - 1996) + " anos");
    document.write("<br>")

    ano = 2017
    document.write("Barney tem " + (ano - 1976) + " anos");

Então eu escrevi o código assim (linhas alteradas 16, 17 e 18:

<meta charset="UTF-8">

<script>
    var ano = 2016

    document.write("Flávio tem " + (ano - 1977) + " anos");
    document.write("<br>")
    document.write("Joaquim tem " + (ano - 1996) + " anos");
    document.write("<br>")

    ano = 2017
    document.write("Barney tem " + (ano - 1976) + " anos");

document.write("<br>");    

 var idadeFlavio = ano - 1977;
 var idadeJoaqui = ano - 1996;
 var idadeBarney = ano - 1976;

var media = (idadeFlavio + idadeJoaqui + idadeBarney) / 3;

document.write ("A média das idades é " + Math.round(media));

 document.write ("<br>");
 document.write ("<br>");

var nome = "Flávio";

document.write("A idade de " + nome + " é " + idadeFlavio);

</script>

Mas o resultado não é igual ao anterior do professor. O resultado fica:

"Flávio tem 39 anos

Joaquim tem 20 anos

Barney tem 41 anos

A média das idades é 34

A idade de Flávio é 40"

Mudando o resultado da idade media e da idade do Flavio mas apenas no ultima linha.

Algum consegue me explicar aonde esta sendo o meu erro?