[Duda] Duda, concatenar cadenas, variables y funciones.

<meta charset="utf-8">

<script>

function saltarLinea(){
        document.write("<br>");
}

function restarEdades(edadPropia,edadHermano){
        var diferencia = edadPropia-edadHermano;
        document.write(diferencia);
}

var edadHermano = 23;
var edadPropia = 29;

document.write("Mi hermano tiene: " + edadHermano + saltarLinea() + " Mientras que yo tengo: " + edadPropia + saltarLinea() + " La diferencia de edad entre mi hermano y yo es de: " + restarEdades(edadPropia,edadHermano) + " años");

</script>

Respecto al ejercicio de la diferencia de edades, quise usar una función para calcularlo y mostrar en pantalla el resultado, ese es el código, pero el resultado que se muestra en pantalla es:

Es decir, muestra los saltos de linea y el resultado de la función que recibe los parámetros edadPropia y edadHermano, al principio y no en el lugar donde están en el código, ademas de mostrar Undefined donde se llama a la función restarEdades y saltarLinea.

Entiendo que la solución propuesta por el profesor no tiene fallos y es simple, pero practicando lo aprendido de funciones llegue a esto.

Alguien sabe por que pasa y como corregirlo? Existe alguna regla que desconozcamos hasta el momento para usar así las funciones?

PD. Si encuentro la explicación o solución, actualizare el post mas adelante, por si gustan revisar.