Dúvida sobre ter que declarar a variável dentro da função

Porque dessa forma o nome completo não é exibido:

<meta charset="UTF-8">

Nome: <input id="nome" />
Sobrenome: <input id="sobrenome" />
<button>Exibir nome completo!</button>


<script>

    function exibeNomeCompleto() {

        alert(nomeCompleto);

    }

    var nome = document.querySelector("#nome");
    var sobrenome = document.querySelector("#sobrenome");

    var nomeCompleto = (nome.value + " " + sobrenome.value);

    var button = document.querySelector("button");

    button.onclick = exibeNomeCompleto;


</script>

Mas assim é:

<meta charset="UTF-8">

Nome: <input id="nome" />
Sobrenome: <input id="sobrenome" />
<button>Exibir nome completo!</button>


<script>

    function exibeNomeCompleto() {

        var nomeCompleto = (nome.value + " " + sobrenome.value);
        alert(nomeCompleto);

    }

    var nome = document.querySelector("#nome");
    var sobrenome = document.querySelector("#sobrenome");

    var button = document.querySelector("button");

    button.onclick = exibeNomeCompleto;


</script>