Call Stack Introduction

[00:00:00]
>> Will Sentance: I want to introduce you to something while I can, called the CallStack. So if you've watched you know what a Call Stack is. But I want to introduce it to you right now because we're gonna see it in action. The Call Stack is JavaScript's way, it's another word which you pronounce two words spelled differently the same way in England, C-O-O-L and C-A-L-L.

[00:00:22]
The Call Stack is JavaScript's behind the scenes way of tracking what line of code is currently running. Whatever's top of the Call Stack, whatever function is top of the Call Stack is the function currently running. There’s always something on it because we consider the overall code, file of code, to be what is called the global function effectively.

[00:00:47]
It's like you’ve taken all the code, wrapped it in a function called global and said run. And so always on there will be global. As soon as the function starts running, it's gonna be added on top and it's gonna now be the top of the Call Stack and it's what's currently running.

[00:01:08]
Whatever's top of the call stack is the function that we're currently running. When we finish running that function, it'll be removed from the top of the Call Stack, a stack is a way of storing data in a computer like an array. It has certain properties, the most important one is all you really care about is what's on top.

[00:01:26]
When you take the thing off the top, all you really care about is that what was there before is still there. So when I finish running this function, I remove it, delete it, I better be back where I was when I started to run that function. Which in this case is gonna be back in global, because this function was auto-run permanently in global we're always in global.

[00:01:42]
It wasn't run inside anything else. Inside of here, if we run a function inside of here, which I have a feeling we're going to do cleanTweets pass data, that's gonna be added on top again. So this is a good time to introduce the Call Stack and its structure.

[00:01:57]
So use imported tweets is on top of the Call Stack and I can use purple to show that this is an auto run function by Node. There we go in we go to it. Now let's get running its code. First thing it says to do inside Sarah Rose.

[00:02:12]
Let us handle our inputs first, our parameters. We've sort of already handled them in the actual parentheses. But let's put them in the local memory. What's our first parameter, Sarah Rose, of useImportantTweets, which has been auto-called because we told Node to do so when the tweets eventually came in go ahead servers?

[00:02:30]
>> Sarah Rose: The parameter is error data.
>> Will Sentance: Error data, excellent, and its value is?
>> Sarah Rose: Null.
>> Will Sentance: Null, which is still data, but it's like data telling us there's nothing there. Excellent, thank you Sarah Rose. And now the next parameter is what, Baveet?
>> Baveet: Data.
>> Will Sentance: Data, and its value is?

[00:02:47]
>> Baveet: The imported tweets.
>> Will Sentance: The imported, excellent, exactly. In the string of five versions, here they are, Tweet 1. You've got to do, that's so annoying, tweet one, hi, or whatever it was, hello. Hello and so forth 1.5 billion characters. Okay, took us by the way 15 seconds to get this function to run, it took so long, that's like forever in coding.

[00:03:15]
Just imagine sitting at your computer and waiting that long. Even we know as humans that's evil, for a computer is a waste of time that could be spent on other things at the same time, perhaps. But hold that thought. Okay, now next line, the first line, the body of the function, Rich, the body of the function, the first line says?

[00:03:30]
>> Rich: To define a constant called cleanTweetsJson.
>> Will Sentance: cleanTweetsJson, still in JSON format, okay, great. And, do we know what to store in it yet? No, the right hand side there is a command to go and run. That was my, answer is no voice. Do we you know what to store in it yet?

[00:03:51]
>> [INAUDIBLE].
>> Will Sentance: We don't because the right hand side is command to go and run a function. What symbols, and by the way we're in charge running this function for once. We wrote the code to say run this function, Do you see we put the parens on the end of it?

[00:04:04]
So let's do it. And the function we're running is what, Zep?
>> Zep: cleanTweets
>> Will Sentance: cleanTweets, okay, and what are we gonna do if a function is running inside of useImportedTweets what's gonna happen to our Call Stack, Sam?
>> Sam: Gets pushed to the top.
>> Will Sentance: Fantastic, the push word is pushed, it gets pushed to the top of the Call Stack, so JavaScript always knows exactly where we are any given moment.

[00:04:26]
And when we finish in that function, where to go back to. It's way of controlling what's running. All right, good, run cleanTweets, and pass it this stringified version of a JavaScript object which is what data format, Matt?
>> Matt: JSON.
>> Will Sentance: Thank you, Matt, exactly. And in it goes, in goes the data, okay.

[00:04:48]
The output of it is stored in cleanTweets.json, and so now we passed it, we removed any mean words, tweet one became Hello, that was already nice, but tweet two just became the string you.
>> Will Sentance: Who knows what else it might have said, but I feel. It was initially a 17 word tweet, no, okay, all right.

[00:05:25]
Out it came, now we need to fiddle with that because that's just a string, it looks like an object. It isn't, It's a string of characters, but one that with the path function, the json.path, built into JavaScript function can take that string of characters and in one go turn it into a nicely formatted object that we can work with.

[00:05:43]
And that's I think what we're gonna do in the very next line. So we declare. Sorry everyone, there was an execution context here, wasn't there? And we exited out of it. That's what was running, it was execution context. I didn't show the insides of it because we didn't really declare how it's gonna work.

[00:05:58]
We just know it returned out data cleaned of the nasty words. We don't know how it worked, we just know that it ran, took in that string of words and looked for any bad words and deleted them, removed them, 1.5 gigabytes of them. That took a bunch of time as well honestly, I don't know how long but let's say like ten seconds in its own right perhaps.

[00:06:21]
Like a bunch of time to go through all that data and pass it out. We've taken 25 seconds in total.
>> Speaker 8: That's a lot.
>> Will Sentance: That's a lot. Yeah, wow, exactly, it's a lot of time to go and pass. Wouldn't it be cool, people, if we could, I don't wanna give it away, but what if we could be pulling that data and cleaning it at the same time?

[00:06:43]
Given that we've got a thread running the background pulling data in, and a thread running here that can do stuff like cleaning, why couldn't we do this at the same time? We'll see on the next slide whether there's a future for us doing this. All right, declare tweets object, we popped cleanTweets off the Call Stack because we finished running it and we returned out the clean tweets data.

[00:07:09]
What's the next line say to do, Mohammed help me out, on the left hand side first?
>> Mohammed: Create a label variable called tweetsObj.
>> Will Sentance: Yeah, constant tweetsObj, tweetsObj, and run on cleanTweets.json, the function json.pass then will take this data, this is a built in to,
>> Will Sentance: JavaScript function.

[00:07:37]
It's built into Javascript, you can go and find on MDN to see how it works. And take the cleanTweets.json, it's clean, but it's still JSON format. Take it and return out this in object form, and store in where, Zep?
>> Zep: In tweetsObj.
>> Will Sentance: In tweetsObj. There it is, into tweetsObj.

[00:08:00]
And that's now beautifully a full formatted JSON object with tweet one is Hello, tweet two is you. Okay, and now, just to show that we have it, and can use it, let's just put in our console. What are we gonna log on our console at this point, William?

[00:08:28]
>> William: The tweet two from tweetsObj.
>> Will Sentance: Which has what string?
>> William: You.
>> Will Sentance: It's you, all right there it is. [SOUND] But look, by the way, how long it took, it took 25 milliseconds to do that.