Variable will not become global

I have a variable in a function and I want to call it outside of the function however it says ‘Name is not defined’. Please advise on how I can make this variable global.

n = Math.ceil(Math.random() * 80);
console.log(n)
function randomStarwars(){
    fetch('https://swapi.dev/api/people/'+n)
    .then(response => response.json())
    .then(data=> {
        var Name = data.name

    })
}
addEventListener("click", randomStarwars)
console.log(Name)

Answer

You may want to take a look at variable scope.

The reason you can’t access it it’s because it’s defined inside the .then() lambda function and can only be accessed there.

To have it available outside that function you need to declare it outside it:

n = Math.ceil(Math.random() * 80);
var Name = ""; // Here, for example
console.log(n)
function randomStarwars(){
    fetch('https://swapi.dev/api/people/'+n)
    .then(response => response.json())
    .then(data=> {
        Name = data.name; // Remove 'var', because it's already declared
    })
}
addEventListener("click", randomStarwars)
console.log(Name)

Update after your comment:

You don’t see the value in your console.log because the value is assigned inside a Promise, which is never run right when declared.

To console.log the Name effectively, you need to chain another .then() and log it there:

n = Math.ceil(Math.random() * 80);
var Name = ""; // Here, for example
console.log(n)
function randomStarwars(){
    fetch('https://swapi.dev/api/people/'+n)
    .then(response => response.json())
    .then(data=> {
        Name = data.name; // Remove 'var', because it's already declared
    })
    .then(() => {
        console.log(Name) // This guarantees the value has been set, aside from any errors that might occur before
    })
}
addEventListener("click", randomStarwars)
console.log(Name) // This is executed before the Name is set