Mi solución

Acá dejo la solución que había encontrado yo. Al ver la opinión del instructor me surgió una duda: ¿Qué hay que priorizar?¿Ahorrar código o que el código sea entendible para otras personas? porque como dice el instructor, el código en su ejemplo aumentó, pero es mucho mas intuitivo a la hora de verlo y entenderlo.

<ul>
    <li class="invitado">
        Nombre <span class="nombre">Diego</span>,
        edad <span class="edad">23</span>
    </li>
    <li class="invitado">
        Nombre <span class="nombre">Daniel</span>,
        edad <span class="edad">42</span>
    </li>    
    <li class="invitado">
        Nombre <span class="nombre">Marcos</span>,
        edad <span class="edad">27</span>
    </li>    
    <li class="invitado">
        Nombre <span class="nombre">Fabio</span>,
        edad <span class="edad">18</span>
    </li>

    Total de las edades: <span class="total"></span>
</ul>

<script>

    var items = document.querySelectorAll(".invitado");

    var totalEdades = 0;

    for(var i = 0; i < items .length; i++) {
        var edad = edadDeUnInvitado(items[i]);
        totalEdades +=parseInt(edad);
    }

    ingresarTotalEdades(items,totalEdades);

    function ingresarTotalEdades(items,totalEdades){

        var total = items.querySelector(".total");

        total.textContent = totalEdades;

    }

    function edadDeUnInvitado(invitado){

            return invitado.querySelector(".edad").textContent;
    }
</script>