Accessing data from an array within another javascript function

Question

I am trying to access the rate variable from outside the function in which it is defined. I have declared a global rate variable but it is "undefined" at the point I need to use it. I've minimized the code to keep it as clean as possible.

var db = firebase.firestore();
var docRef = db.collection("pricing").doc("default");

var rate; //Setting up global variable to store value

docRef.get().then(function(doc) {
        console.log("Document data:", doc.data().base); //This works
        rate = doc.data().base;
        console.log("Rate:", rate); //This works
    });

console.log("Rate:", rate); //rate is "undefined" but rate variable value
//is accessible if typed via the console?

Your console.log on the last line gets executed before get() is resolved. You should read up on promises and how JavaScript handles asynchronous code to learn more about this behavior. — Wex
– Wex, Commented Oct 7, 2020 at 20:00
Thank you Wex, I will read up on this but any steer as to the code changes I can use to make this work? — Noob
– Noob, Commented Oct 7, 2020 at 21:46

Doug Stevenson · Accepted Answer · 2020-10-07 20:00:23Z

1

docRef.get() is asynchronous and returns immediately, before the query is complete. You use that promise to attach a callback function using then that gets invoked some time later. Meanwhile, your code will continue to execute. What you are observing is that the console log is running before rate gets defined in the callback.

You will have to adjust things so that your code that depends on rate being defined must only execute after the callback. This typically means that you write the code inside the callback, or using another callback.

It's strongly advisable to learn how JavaScript promises work, as they are critical to writing effective code.

answered Oct 7, 2020 at 20:00

Doug Stevenson

321k37 gold badges458 silver badges474 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noob Over a year ago

Thank you Doug, I will read up on this but any steer as to the code changes I can use to make this work?

Doug Stevenson Over a year ago

Yes, put the log inside the callback, not outside.

Niki-Timofe · Accepted Answer · 2020-10-07 20:01:54Z

0

rate is being assigned inside then block, which is executed when Promise, returned from docRef.get() will be resolved. So at the moment of calling console.log, as of then block executes asynchronously, rate is not assigned yet.

answered Oct 7, 2020 at 20:01

Niki-Timofe

1051 silver badge6 bronze badges

Comments

kmiklas · Accepted Answer · 2020-10-07 20:56:49Z

0

It's a race condition: rate is assigned when the promise returns--after your console.log.

You could set your code up to run synchronously; then, the console.log will not run until after the data have been returned:

Firebase Firestore retrieve data Synchronously/without callbacks

Note that this is generally not recommended, as it can negatively affect performance and UX. Pay close attention, and you may notice a short lock-up of the interface. Regardless, per your OP, since you are a "newbie," this may help you here for learning and testing.

edited Oct 7, 2020 at 20:56

answered Oct 7, 2020 at 20:33

kmiklas

13.6k23 gold badges78 silver badges110 bronze badges

Collectives™ on Stack Overflow

Accessing data from an array within another javascript function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related