Promises Example: then

[00:00:00]
>> Will Sentance: But here's the question. I didn't just get that data from Twitter to not use it. I got it to use it, display it, whatever it might be. But I don't know when that data's gonna come back. It could come back any time. So I'm gonna need JavaScript to somehow when the data does come back and get stored in a property, automatically run some code on it to use it.

[00:00:24]
But how am I gonna do that? It turns out people that this empty array in the own fulfilled property is also super damn important. This empty array is gonna have, or we can put in there, any functions, any code, that we want to have automatically with the help of JavaScript be triggered to run when the value property gets filled in.

[00:00:56]
Which happens when the data comes back from Twitter, which happens whenever it does. And it's going to automatically trigger, at that moment, the data comes back from Twitter, gets updated on the value property, automatically. It's gonna automatically trigger any functionality stored in this array. Cuz in JavaScript, you can store functions as in a list.

[00:01:19]
And usually into it you can store an array of functions here, we can put in a function. And any function we stick in this array will be automatically triggered to run when the value property gets updated. And wait for it, that data in the value property will be auto inserted as the input, as the argument to fill in the parameter of any function that's stored in here.

[00:01:42]
So take a look at that display function there, got a little parameter their data. If we could just get display to be stored in that array, it would be automatically run and our data that came back would fill in, that data parameter when it's auto run when display as auto run.

[00:02:02]
But how would we get display into that array? How do I typically actually magenta to match on this map? How would I typically add to what method? Do I have to add two arrays?
>> Speaker 2: Push.
>> Will Sentance: Push. It's on the unfulfilled properties. You just sort of think what would I do typically.

[00:02:19]
Future data, dot.
>> Speaker 2: Dot, unfulfilled, dot, push.
>> Will Sentance: Dot, push and then pass in the display function. We can't do that unfortunately but it's fundamentally, yeah, exactly right. We can't do that. Did anyone spot why we can't do that from what I said earlier? Tom?
>> Speaker 2: It's a hidden property.

[00:02:38]
>> Will Sentance: Hidden property. Hidden property, can't even get access to this. Exactly right from Tolls Pom. Don't panic though. JavaScript gives us a method built in that allows us whatever we pass to whether it as input will be grabbed and stuck in that array. By the way, behind the scenes, what are they doing for the data to unfulfill that push?

[00:02:59]
And what can people spot might be that hidden, not that hidden. What can you spot might be that method that sticks a function into that unfulfilled array, Peter?
>> Speaker 2: Then.
>> Will Sentance: Exactly, the Then method, the dot Then method, exactly, and that's what we're going to see. By the way, we're also going to see in a moment later on, we're gonna see a little bit later on, where's that method come from?

[00:03:22]
Because it ain't on here. It isn't on this object? We'll see, for once we're in a session that so long, we're gonna see where that method actually comes from this afternoon. There we go. But for now, let's exactly do that line there. Let's get something that's going to function in here.

[00:03:40]
Because there's no point bringing data back from Twitter only for it to disappear in the value property. And we've no idea what's going to show up so we can't use it directly. We've got to make sure we have a function stored in here. It's going to be auto run by JavaScript for us.

[00:03:53]
So here we go, future data dot then passing the entire display function definition. Okay, so future data is this object here. It has an unfulfilled property. I'm not gonna put all the property names and we've got the unfulfilled property and whatever gets passed to then, it's just going to be nabbed, sorry.

[00:04:31]
Is that a word in America? It is.
>> Speaker 2: Yes.
>> Will Sentance: British word like a 19th century cottony word is going to be taken. Whenever it's parser there's gonna be taken and stuck in there. And that's exactly what we do. We take the display function and stuck into the unfulfilled array.

[00:04:53]
Let's put it in. There it is, our display function in the unfulfilled array. Look at that, isn't that beautiful? My goodness. [LAUGH] Aha, that was all achieved by those two lines. But has this goddess all set up? You bet it has. We have all our setup now. We're speaking to the Internet in the background.

[00:05:21]
We've got a nice connection to a nice object here back in JavaScript. It's gonna be filled in with our value when the time comes from the network request responses. Kayla said, the old fulfilled array now has a function that will automatically run when that data comes back. We're done.

[00:05:39]
We get to plow on to at roughly, let's say one millisecond. What line over to. Ethan, what line do we hit at one millisecond?
>> Speaker 2: Console log, me first.
>> Will Sentance: Fantastic, I love everybody staying so. Focus as well exactly, console log('Me first'), there it is in a console.

[00:06:05]
And we have, Me first. There it is at 1 millisecond.
>> Will Sentance: The one thing I regret on this is this bit here being so close to the manic creation to the right. So let's move this slightly. Sense of readiness, that's how long a half marathon is, right?
>> Will Sentance: 3 miles, 3 miles.

[00:06:34]
My sister's doing a full marathon in March, dear, whatever. Very proud of her, very proud, very proud. So which one are we using here? We're using the network request feature, weren't we? What was the label, everybody?
>> Speaker 3: Fetch.
>> Will Sentance: Fetch, exactly, yeah, fetch.
>> Will Sentance: That's our JavaScript label for using the network request for each other.

[00:06:59]
But it's a two-pronged, so it also has consequences in JavaScript as well, pretty amazing. Okay, so while I was doing that, you won't believe what happened. Twitter successfully sends us back at, let's say, what should we say, like 270 milliseconds, something like that? Yeah, 270 milliseconds. At 270 milliseconds, we got good news.

[00:07:24]
We got data back, a message back from Twitter at 270, complete and it came back. Okay, simplified slide here, came back as a beautiful little string here, Hi. On completion, that's what came back. And she comes back in an object for he says package into an object form but we can get the property on which that data is.

[00:07:50]
And there it is, is the high string with a great tweet. Follow this person, hmm? So on completion, we've got this lovely response, but it's stuck in the web browser. How? How, Todd, does it get back into JavaScript? What is it gonna be assigned to back in global memory in JavaScript?

[00:08:10]
>> Speaker 2: Future data value.
>> Will Sentance: Future data value property spot on. And at that, he's gonna trigger what to run, Todd?
>> Speaker 2: The unfulfilled functions.
>> Will Sentance: Yeah, the unfulfilled functions, well put. Which is specifically, here is our?
>> Speaker 2: Display.
>> Will Sentance: Display function, with what as its input?
>> Speaker 2: The value.

[00:08:31]
>> Will Sentance: Fantastic, the value property which is the value, the string?
>> Speaker 2: Hi.
>> Will Sentance: Hi. Excellent from Todd, very very nice. So here we are, way later at 270 milliseconds. 270 milliseconds, we are going to call, and you may already be going, hold on, really? What? We'll just put it on the call stack.

[00:08:56]
We're gonna call display with the input of hi, there it is. Some of my colors starting to become. Display with the input of hi, and brand new. Everybody?
>> Speaker 3: Execution context.
>> Will Sentance: Yeah, exactly. Did we initiated, did we put the parenths on the end? No, these will auto stuck on for us by JavaScript, still a brand new execution context.

[00:09:27]
So and into it we go and then it's local.
>> Will Sentance: Memory is what's the data that goes in, Todd, is just remind us again. The value is?
>> Speaker 2: High.
>> Will Sentance: High, but inside display, what's the label for it?
>> Speaker 2: Data.
>> Will Sentance: Data, yeah, spot on. There it is.

[00:09:51]
Data, and then we console log data which is to say we console log, Todd?
>> Speaker 2: High.
>> Will Sentance: High, Todd's not tired of saying high. There it is, and at 270 milliseconds, people. We have a console log. Hi, my goodness. My goodness. [LAUGH] My goodness, look at that. All of that initiative bar incredible fetch function are incredible, not function.

[00:10:18]
Facade function, that triggered this background work, trigger the network request. Off to the Internet, brought back the data. Where is it gonna go, and what are we gonna do with it? Don't panic. We got immediately in JavaScript a beautiful object, the promise object, with two properties. One, a value, that was automatically updated with the Hi, that came back from speaking to the Internet in the background, the other side of fetches work.

[00:10:49]
And when it did come back, we don't know who's gonna come back, don't panic. We had a function ready to be auto run, with the input being that value property that came back or the value of the data that came back from Twitter. As the input of that function at 230 milliseconds display was stuck on the cool side with high input and we were able to console log hi.