Variable will not become global

Question

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)

Does this answer your question? [What's the difference between using "let" and "var"?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var) — Tushar Shahi, May 12 '22 at 10:27
you must define your variable outside your functions - see my answer — Fadi, May 12 '22 at 10:30

GigiSan · Accepted Answer · 2022-05-12T10:40:48.863

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

Thank you, this is running however when I log the name outside of the function the name appears blank calling inside the function logs the name. — Lewis Revel, May 12 '22 at 10:33

score 0 · Answer 2 · answered May 12 '22 at 10:26

you must declare Variable before the fetch function

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

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

score 0 · Answer 3 · answered May 12 '22 at 10:26

Define your variable outside your functions:

var global_Name; // this is your global variable 

n = Math.ceil(Math.random() * 80);
console.log(n)


function randomStarwars(){
    fetch('https://swapi.dev/api/people/'+n)
    .then(response => response.json())
    .then(data=> {
        global_Name= data.name // use it without var

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

function2()
{
global_Name =  // use it without var
}

function3()
{
 global_Name = // use it without var
}

Variable will not become global

3 Answers3