 Well, it's that time of the week again. It's time for Chit Chat across the pond. This is episode number 449 for August 6, 2016, and I'm your host, Allison Sheridan. This week's guest is Bart Bouchotte's back again with more JavaScript and programming by Stealth. How are you doing today, Bart? I am doing fine. We should probably warn people right away that we're actually recording this as video. This is our first time, so it's probably all going to go horribly wrong. But what we're going to do is an attempt to have Bart show us live in video how he solves the JavaScript challenges that he gave us four weeks ago now. That's the idea, right, Bart? That is the idea. So, you know, the idea sort of came to me when I was teaching programming at university. One of the most critical parts of that process was standing at a whiteboard with a class of students going, all right, here's an empty whiteboard. Here's a problem. Now, can we fill that whiteboard with a solution to that problem? And it's the empty screen is the scariest thing out there. And yet so much more valuable than seeing it finished and having somebody walk through it. I used to do something similar with people when they first hired on to work for me, is I would sit them down with a bunch of pieces of scratch paper and I would draw them the organizational chart to show them where they fit in. And, you know, I could have handed them a stack of org charts and it would have meant nothing. But people save those because, you know, really explained it to them. So, I think this should work. If the video recording and the audio recording works and bandwidth holds up and disk size holds up, what could possibly go wrong? Well, we'll give it a Skype's best try and see how we get on. And if worst case scenario happens, we've got audio. Right, exactly. And of course, the actual worked solutions, which we just said aren't really as valuable. But anyway, we have those. Yeah, so when last we left our heroes, you had given us a pause to work on doing your JavaScript challenges. And I ran off and found a service called Codecademy that I've talked about on the on the show on the regular no silicast, where I was able to start with little tiny baby steps actually practicing doing the things that you've been teaching us. And and I think Codecademy has been fantastic. It's it's getting harder. It's definitely getting harder. Yeah, but but I felt like it did a good job of giving me the rote pieces that I was missing because I was learning new things every week, but never getting to practice the little the little building blocks that you had taught us. Yeah. Yeah. And so I'm not completely done. I haven't finished the object part. I'm about 80% done, but not for lack of working on it a lot, but it's been really, really fun. And I've been working through the challenges you've done. And I have how many are there for total five total five, then I got four or five done. And then the fifth one, the fifth one I tried. But success is maybe you'd give me partial credit for spelling my name right on the top of my paper. I think getting through the first four is not bad going at all, because that means that the if you look at all the different things we've learned is different Lego blocks. So the variables Lego block that one's obviously completely owned, or you couldn't have got through the first four challenges, the conditional block is completely learned because otherwise you couldn't have got through the first four challenges loops are obviously in the bag or you wouldn't go through the first four challenges functions are obviously in the bag or you wouldn't go through the first four challenges. So really that that's not bad going. Yeah. Yeah. I was I was pretty proud of myself till I hit the last one. And I did a bunch of it on my own. And as I started making notes of where I made mistakes or where I had questions, but I realized I was very often writing, well, did that backwards? I get the sense there's still a there's a penny floating in Minere that just needs to come all the way down. Yeah, maybe. Luckily, Joe Romansky has written me another one of her fine descriptions trying to clarify some of this for me again. And you've given me another great write up on trying to help clarify it for me. And I like the last one, Bart gave me used burp as the function. And so, you know, I learned better when I'm laughing. So that that definitely helped. Well, I'd already used fart two weeks ago. So yeah, running low and bodily functions here. Well, we haven't used spit yet. Okay, noted. Something to look forward to. Yes, we'll be answered in that mode in that mode. All right, well, let's let's go ahead and get started without any more discussion. Okay, so the challenges are over on Bart B.ie PBS 19 of X some JavaScript challenges. And so I'm using a fantastic WordPress plugin called spoiler so I can the solutions are here, but you can't see them unless you spoil yourself. And I love that. So if for people aren't looking at it, he basically has a show hide solution with a plus button. So you look at the first challenge, you go work it for a while. And then when you need to look at it, you can pop that down and see what he did compared to what you did. That is spectacular. I love that. Yeah, this gorgeous little plug in very straightforward to do. And it really is helpful for this kind of stuff. Okay, so challenge one starts us off nice and easy. So using a loop of your choice, print the 12 times tables from 12 times one up to and including 12 times 12, because I grew up in imperial worlds. So that's how I think still. And so in our JavaScript playground. So a loop of your choice. Do you have a preferred loop? You know, I probably should have had all of my solutions ready. Well, we're going to work on from scratch. So I tend to be more of a while. Okay, so the solution on the website is a four. So we'll do this as a while. So we know that we're going to need a while loop. And we're obviously going to need some sort of a counter to count what we're doing. So I'm going to call mine I because that's just a good idea. Now I equals something. I something. And then I plus plus. So now we've got to figure it. Okay, so where do we want to start? Well, I said 12 times one up to and including 12 times 12. So if I say one, yeah, there we go. So that's easy. So our condition is while I is less than or equal to 12. And then we have to remember that I tend to say less than 13 just because I'm too lazy to type less than or equal to 12. Whatever your brain finds easiest to read, do that. I like to write my code like I speak. So I would say less than or equal to so that's how I write my code. But really, it's ultimately, there's an infinity of right answers. So it's just whatever works for you. So okay, I'm a less than or equal to kind of guy. So there we go. So what are we? So okay, so PBS dot say, obviously, what do we want to say? So we're going to print them out line by line. Yeah, okay. So 12 times I plus I. So I'm concatenating I into the string 12 times. So 12. So the string 12 space x space concatenated with the current value of I concatenated with equal space equal space concatenated with now let's do some mathematics 12 star. Hi. Okay. So that shouldn't theory be that it is interesting to watch. It is interesting to watch the order in which you type things as you create them because I only see them finished. So one of the things I like about the atom editor, for example, is when you put in a parenthesis, it puts in the other side, you put in a squarely bracket, it puts in the other squarely bracket. Well, I do that just on autopilot, whether I'm in text edit notepad.exe, I'm the human bracket matcher. Even when I'm writing in English, if I'm going to quote someone, I'll have the two quotation marks and then step back. Oh, interesting. It's just I always Oh, people like you never forget the attachments and emails, then you probably put the attachments when I say it, I attach it. Yeah. Actually, I usually start by dragging and dropping on to the dock icon for the mail app. So that that when you start from the attachment, you cannot possibly forget it. Right, right. I use the proxy icon. So if I'm in word, I can pick up the proxy icon. Anyway, so the point being, I very much made sure to do my I plus plus first because I I'm not a wild you person and I have this terrible habit of forgetting the I plus plus and having an infinite loop. Okay. So when you do a wild loop, the I plus plus kind of comes at the end after you've done whatever it is you're going to do in that that thing. So but when you do the for loop, that's when you do the I equals one comma I less than or equal to 12 comma I plus plus. Yeah. So the for loop that I'll be on the one line, which is why I like a for loop because everything to do with I is together for you to scan across and make sure you haven't done something silly. I remember you think I would get used to that I plus plus thing and I'm totally at home with it now. Excellent. It's just second nature to slap that in. And I almost always type it correctly. It's a it's a it's one of those items that's just used so much. So yeah, I just want to make you one bigger plus plus. Okay, so there we go. One down, four to go. Now they're not all going to be this easy. I did ramp them a little. So challenge two, write code to print out the Fibonacci series of numbers stopping after the numbers go above 1 million a million. By the way, the hardest part of this challenge was spelling Fibonacci. I spelled you told me you just copy and paste and I should have done that from the beginning. I'd have it spelled four different ways and couldn't figure out where my code wouldn't work. Oh, and I'm not as I haven't spelled at least two ways in my own show notes. Do you really? I do two B's at the top, two C's at the lower down. I can't remember which is right. Yeah, I think it's the two C's. See, I do two ends in one C. So there's three ways to, you said there's a lot of different ways to solve this problem. Yeah, it's difficult to rename that. It is someone's surname, I believe. Anyway, so you may print one number that is above 1 million, but no more. And that just makes the code easier. The first two numbers in the series are zero and one. After that, the next number in the series is the sum of the previous two. Now that's why I gave you two numbers to start with, because otherwise you would have a problem. Because the third number is the sum of the first two. The fourth number is the sum of the third and the second. The fifth number is the sum of the fourth and the third. Right. You get the pattern. Yep. So to help you out, I said build up your solution in the following way. Create an array named Fibonacci with two initial values, zero, one, one. Then we have write a while loop that will keep going until the value actually let's just write the code as we're reading it. So create an array named Fibonacci. That's copy and paste. Is that the right one? It's the one I'm going to use. There you go. It doesn't matter. So far Fibonacci equals an array. How do we make an array? That's got to be the square brackets. Two square brackets, initial values, zero comma one. Okay. So that's the first part done. Okay. Write a while loop that will keep going until the value of the last element of the Fibonacci array is greater than a million inside the while loop through the following. So let's start with a while loop. Wow. Something, something. So we know that Fibonacci needs to stay under a million or yes. So while Fibonacci is less than one, hang on, one, two, three. There we go. Because you can't put in commas. Another one of those little things that makes Perla language I adore. In Perl, you can legally do this and it will not get confused. No, just put underscores instead of commas. Interesting. Yeah. That doesn't get confused and it just knows you mean a big number and that the underscores are for humans only. I adore that. So it's sort of like Google and Gmail allowing you to put a dot in your name just to make it look like Bart dot Boo shots is the same thing as Bart Boo shots. Exactly. That, exactly that kind of thing. Anyway, so that's something JavaScript doesn't do. So I have to kept me zero. So six of them. Okay. So we've definitely dealt with the first part of that. We have a while loop that's going to keep going until Fibonacci is less than a million. Now what do we do in there? Calculate the next Fibonacci number by adding the last two elements in the Fibonacci array together. Add this value to the end of the array. Okay. So oops. That's you're going to get our next Fib. I'm going to go with that little abbreviation there equals. So what is the next Fibonacci? So I took a different approach on this one. I cheated and used something that I used. I learned in Codecademy called Slice. Yeah, I don't, me and Slice are not friends. Slice is a C style thing. I'm not a C programmer. But if you're a C programmer, you'll love slicing arrays. Slice, you can't dice them, but you can slice them. All right. So what's the last element in an array? Well, it's the name of the array. Dot length. And then we want to go to the index of the name of the array dot length. Feeling is hard. Exactly. And then we want to add to it the second last element. So wait a minute. Wait a minute. You've got Fibonacci, then square bracket Fibonacci dot length minus one plus. I have no idea what you're doing there. Okay. So we're going into the Fibonacci array and what element of the array do we want? Well, we want. So if the length is two, we want element one. So Fibonacci dot length minus one will give us, hmm, right? If this was two. Yeah, it just seems funny to call itself within itself. But yeah, but we're saying whatever your length is minus one. So where's the last element and then whatever your length is minus two. So now we know what the next Fibonacci is. So now we need to shove it on the end. So how do we shove something onto the end of the array? Lots of different choices. Plus equal kind of thing. Or was that a push? Yeah. So one way to do it would be just to say the name of the array and then say the name of the array dot length equals next. Right here. It won't work. Yes, I do. Yeah. I'm going to hit the backspace right as well. Okay. So hang on. What is it? You're doing Fibonacci square bracket Fibonacci dot length equals next Fib. No idea what that means. Okay. So Fibonacci dot length is going to be in this case two. Two is the two is the third element in the array. So we're now sticking in a new third element. And then the next time around becomes next Fib. Yeah. Wait, I find that confusing code, but that will work. Hang on. So you created a variable called next Fib. And you said it becomes. Yes. Fibonacci square bracket the length minus one plus. Okay. So next Fib. And then what you're going to do with, then what you're going to do with next Fib is you're going to shove it into Fibonacci at the, at the position Fibonacci dot length, which is three, which would be the third position. So it's one off the end of that length is always one off the end. Yeah. Yeah. Let me just check something. Is it add or multiply? No, no add. Okay. We're correct. Okay. So that is a way to do it. And that is perfectly valid. But I am such a big fan of dot push. So the way I would do it, if I think I did that push. Yes, I did. So I would push the next Fib into the back of the array because that's just easier to read code Fibonacci dot push next Fib slap it on the end. Okay. Okay. So we are now don't we need to, we need some plus pluses down there. You forgot to do our while condition is, is not really very good. So while condition should be the last out, well, the last element in the array is less than a million. So Fibonacci dot length minus one. Exactly. Look at me go girl. Yeah, you got a spell Fibonacci. No, I don't copy paste. Okay. So while Fibonacci Fibonacci dot length minus one is less than a million. Get the next one, show it on the end. Show it on the end. Yeah. And the next time we come up to the while loop, it's the last one we're checking. So next Fib is now the one sitting at the end. So it's the one that gets compared to a million. So we don't have an infinite loop. Okay. But will this one go beyond a million or will this one stop in a million? It will do one above a million because this it will show what on the end and then it will check to see whether the one on the end is greater than a million. So the last one goes on and then we check. Okay. And then we start off. Gotcha. Okay. So we should have now working code that prints something. Wait, you didn't plus plus there. No, but there is no, we're not, we're not counting. Oh, it's not the same kind of while. Gotcha. Gotcha. Okay. Yeah. So our condition is that the last thing in the Fibonacci array has to be less than a million. So we've added something to the end. So we've changed whatever the last thing is. And then we check if it's still okay. So we are incrementing, but we're not jumping in ones. We're jumping in weird values. Okay. But you need to PBS dot say on that bad boy. Well, we have that it hasn't said what to do with that yet. So for now, I'm just going to click run to make sure that there's no errors and do command a command C in case I made an infinite loop click run and it gives no errors and does no output, which is fine. Okay. So, okay. So we're down here. We've done that print the Fibonacci series one element per line by converting the Fibonacci array into a string separated by new line characters. Oh, I didn't do that part. You do say it differently, but you've got the same output. Well, I just said PBS to say Fibonacci. Ah, okay. Well, that will show you as an array, but I wanted a little prettier. So I'm going to do a PBS dot say we know that much is needed. So a fantastic array function I adore is join. I say join it together with new line characters. That's right. I remember you telling us that and I think I need that one in the one I don't know how to do too. Possibly join is amazingly cool. So now we go. There's our Fibonacci series. We go one above a million and then we stop. Yay. So one, three, four, six, two, six, nine. So there we go. We're now two down, two down. All right. So far we have the same code. If I get the same answer. So so far we're, you know, only six lines of code. So they're not big problems yet. No, no, you get different Fibonacci's. No, I said, I said, I said, I don't remember where I said no to. No, yeah, I got that exactly, except I forgot to do the other part. By the way, I can teach you something fun in Safari at some point. If you pinned the JavaScript playground, you don't have to you don't have to flip between two versions of the of the windows because it just it saves everything in the pinned. So I keep JavaScript playground pinned and then I go over to the tab where I'm working that tab for PBS playground has disappeared, but the pin is still there and I can jump right back to it. It's really nice. If I wasn't doing this as a screencast, I'd have the two windows next to each other more screen resolution. Right. Okay. Now the next one is I think a very important one to do because this is one of the most popular interview questions ever. I can trick an interviewer now. Right. If you want to test, if someone understands basic coding, so this tests your understanding of loops and of conditionals, which are some of the most fundamental aspects of programming. And if you can do FizzBuzz, then you know enough to be trained to program in any language. If you can do this, we can train you. Okay. So it's not that you know everything. It's just you, you get the logic. It's the, yeah, exactly. You are, you think programary, therefore we can train you. Okay. Because very rarely do people walk in the door with exactly the skills needed. What you need to check is that they have the competences needed to pick up the skills you need them to have. Yeah. I've heard that described as talents versus skills. So I can teach you Excel, but I can't teach you to be organized. Yes. Yes, definitely. Maybe the military count by beating it into me. No, they can teach you to act organized. They can't teach you to be organized. Fake it till you make it, I guess is what that is. Yeah. Okay. So what is FizzBuzz? Write a program that prints the numbers from one to one hundred, but for multiples of the three, sorry, but for multiples of three, print Fizz instead of the number and for multiples of five, print Buzz. For numbers which are multiples of both three and five, print FizzBuzz. Yep. So basically you should see one, two, Fizz, four, Buzz, six, no, six is Fizz again, seven, eight, nine, no, nine is a multiple of three. So it's Fizz again. This is too hard. It is too hard, but you get what we're trying to do. So let's build it up back to an empty screen. So we're going to loop from one to a hundred. So I'm going to do this one as a for loop because it's just good practice. Var. I actually did this one as a, oh, sorry, talk to a redescription. Keep going. So var i equals one i is less than or equal to 100 i plus plus. Okay. So that's i taken care of. Well, I don't know what to do with i. Well, the default, if all, if there's nothing funny going on, we just print i. So what counts as something funny? So whether, actually this, I was really, really happy with this particular task to do the FizzBuzz one because I finally completely understand modulus or modulo as they call it. Because remember, I had so much trouble with it and Alistair tried to help and you explained it to me and I just couldn't why it was important. This is a case of where you want to say if it's still visible by three, then you want to say Fizz. Well, how do you know if it's divisible by three? Well, if the modulus of i of three is zero, then that means it's divisible by three. Yeah, exactly. So I've already put in the else there. So if it's not a funny number, we just put a print out the numbers of PBS, let's say i. So now the question is what goes up here? So I'm going to say that a number is funny if it's either a Fizz or a buzz. So if I modulus three double equals zero, or if I modulus five double equals zero, then that's a funny number. So why did you use double equals? I use triple equals. I'll use double equals because of many years of habit. Apparently the modern advice is to use triple equals. So you know, the way when you're learning to drive, you have to feed the wheel on a real driver just put their permanent and spins it around. So a driving instructor Bart says use triple equals. Okay, because that's what I did. Okay. So triple equals means that you're checking type and value. Double equals means you're only checking value. Right. So but we already know this is a number so you don't have to check type because we defined it. Right. So the modulus is a number, zero is a number. So double equals and triple equals would behave identically the same here. But if we were getting this as input rather than a variable we had defined, then that's a good, it would be why you'd want to go to triple equals. So basically there's two, there's two schools of thinking. So the old fashioned way, which is the way I still, my brain is still wired is default to double equals and when you really care about types throw in the extra equals. And the new school of thinking is default to triple equals and only when you consciously don't care about type you strip one away. Yeah. So whatever way works for you work that way. Okay. The difference is whether or not you care about type. So now we've said if it's divisible by three or zero by three or five, then we want to pbs.say fizz no, no, or buzz or fizz, because something funny. So what funny? Okay, well fizz, buzz and fizz, buzz. I what I notice is that fizz, buzz is just fizz and buzz happening one after the other. So it's not actually three cases, it's just two cases. So if the number I modulus three double equals zero, we want to fizz, whether it's a fizz, buzz or just a fizz, we just, we always want to fizz. So we're down a loop of it's either going to be divisible by three or five. Now you're saying just in the case of divisible by three, say this. Okay. And we're not going to have an else because I actually intentionally wanted the three and fives to go through cleanly. So I'm going to copy that and say if it's a five, we buzz. And so this has the effect of dealing with the case where it's a three and a five, without us having to write another really long if statement. So I know I should be saving my time for the hard problem because I'm going to need a lot, but I don't understand not having an else in an if statement that just disturbs me deeply in my soul. Okay, well an else is only executed if the condition failed. Oh, and in this case, we know it's going to be three or, divisible by three or five or both. Yeah. So there's no else. We don't want to protect the code because if you put in an else block, it won't happen unless the condition is met. So sometimes you want your code to happen itself. It's sort of like overly constraining a problem. Exactly. So sometimes you actually don't, there is no, there is no else. If this is the case, do this. Period. Okay. So if we're divisible by three, we want to fizz. There is no else. If we're divisible by three, we fizz. If we're divisible by five, we buzz. And that means that if we're divisible by three and five, we fizz and buzz. Right. So if you come through here with i equals 15, you'll say, is 15 modulus three equals zero? Yes, it is. Is it? Yeah. So that or will happen straight away anyway, because an or is lazy. Is it divisible by three? Yes, it is fizz. Is it divisible by five? Yes, it is buzz. And so the output is fizz, buzz. And I have a slight mistake here because of course, pbs.say will print a new line character. So I need to do something a little bit clever. So var out for fb, I don't know. I don't know what you're okay. So right now we'll fizz and buzz on two separate lines, which is wrong. I want to fizz buzz together. So I'm going to say var. That's how you're going to do both. Okay. Equals an empty string. And I'm going to say to say plus equals fizz. And I'm going to say, because like if I can't do a pbs.say until I know the whole line. I have no idea what you're doing. Well, but you're supposed to be explaining it as you go, not having me look at it at the end. So stop. Okay. So the problem with what I had there was that every time I do a pbs.say a new line is created because pbs.say is print new line. It's like going ding on an old typewriter. So in the case of 15, it would have said fizz and then on the next line buzz, but that's not what the problem is. The problem is fizz buzz on one line. So how do I get it on to one line? But you typed all this stuff and now I don't know how it was constructed. Don't demo and then, but type it all and then say wait, or it's just like looking at it finished. You know, you see what I'm saying? Okay. So you comment, you are comment, you are. Okay. So I see what the problem we're trying to solve is, but what are you doing now? All right. So this is how it was. And then we have the problem. So pbs.say. You don't have to put it all back in, but okay. So you get that if I was doing that, if it was 15, it would say fizz on one line and buzz on the next line, but that's not what we should do. We should be having fizz buzz. So you're going to define another variable. Yeah, which I'm just calling to say, I don't know. I don't know what it is though. All right. It's a variable I'm going to stick fizz and or buzz into and then print it when I'm ready. So we start off with an empty string. So we're going to pbs.say whatever it is we want to say. So I'm calling it to say equals and then two quotes. So an empty not equals becomes an empty string. Thank you, Jill. Exactly. Okay. So then we say if we're divisible by three, then our empty string should have some fizz added to it. Oh, okay. So to say plus equals fizz. All right. So to say becomes equal to whatever it was with fizz took on the end. Now it was an empty string. So all right. And then we say if it's visible by five to say becomes whatever it was with buzz took on the end and then we do, we actually say all of it together. So if this was say six, the first if statement will be true. So the empty string will have fizz took to the end of it. The second if statement will be false because six is certainly not divisible by five. So it will get said will be fizz, which is great. That seems like a really hard way to do it. I did the multiple if statements, but I did it by saying if it's divisible by three and divisible by five do fizz buzz. Else divisible by three say fizz. Else divisible by five say buzz. Else say I. That also works. It seems like a having to create new variables seems excessively complex to me. But like you say infinite ways to do it, infinite ways to do it. So my thinking is deal with a not funny case and then deal with the funny cases. It's just how you break up the problem, right? Yeah. It seemed like, wait to the not funny. Well, I did the not funny case at the bottom too. Yeah. It's a different structure. This is the end of the day. But trying to combine it seemed to make it get more at a variable seems like it would use, I don't know, that uses memory space or something, doesn't it? Yeah. I'm not I'm not obsessed with being with saving memory if it makes the code harder. Yeah. I would contend that this makes the code harder because creating a new variable and figure out what it is and what it means is harder than reading four if statements that are identically formatted. But that's okay, Bart. You can do it this way if you want. Yeah. I don't know. One of the things you do so often is build up a string. So this is this is a very common design pattern. Just build up a string. Okay. All right. You can do it that way if you want to. I have to say it's not right or wrong as long as the as long as one as long as the output field is correct. It doesn't matter how you got there. Okay. In theory, you could write an if statement with a hundred elses cascading all the way down and hard code the whole thing if i equals one print one if i equals two print two if i equals three print fizz. I mean, you know, right? I wouldn't recommend that as an approach. Okay. Let you keep going because I do need to save my time for the last one. I could say do it until a thousand and then your hard coding wouldn't work so good. Okay. Okay. Anyway, so that's three down. Okay. So four factorial and actually gave people a choice here. So okay. Anyway, so write a function to calculate the factorial of an arbitrary number, the name of the phone and name the function factorial. It is only possible to calculate the factorial of a whole number greater than or equal to zero if an invalid input is passed return nan and the or equal to zero is another head nod to Jill because she corrected us that you can do zero. Yes, I was wrong. I thought factorial of zero made no sense, but it actually does. There is exactly one way of organizing nothing. Anyway, as a reminder, the factorial of zero is one and the factorial of any positive number n is defined as n times the factorial of n minus one. You can write your solution either using a loop of your choice or using recursion. Test your factorial by calculating test your function by calculating the factorial of the inputs in the PBS playground. If no inputs are set, print a message telling the user to enter numbers into the inputs. So did which one is recursive? Recursive means you means a function that calls itself. Okay. So if inside a function called factorial, you call a function called factorial, you're recursive. Okay. All right. So it's like, if the barber cuts everyone's hair, does the barber cut his own hair, that kind of stuff, that's recursive. Okay. Head exploding stuff for a lot of people. And the other option then is a loop, so a while or a four. Okay. So regardless of which we choose to do, we start our code the same. Oops. I keep on doing command tab instead of command till e. So command a back. Ooh. I've done that about a thousand times. So function factorial, and I say something about arguments. What do I say about arguments? I say. Which one are you going to do? Well, it doesn't actually matter yet. I haven't reached a decision point yet. Okay. So name the function factorial, check. It is only possible to say blah, blah, blah, blah. Okay. So I got it. I need one, I would need one argument, which I am going to call n because I am a very boring sod. And n, so if something return, man, what's the something? So how did you throw in there and all of a sudden? I don't know why you did that. Okay. Where we say it is only possible to calculate the factorial of a whole number greater than or equal to zero if an invalid input is passed return nan. Okay. So this will be if this is where we have to test to see if they put in letters or numbers with digits, extra digits. So what's the easiest way to test? So there's a couple of different options we have here. So we could say so a number is a whole number if the number is equal to itself turned into an integer. That's one approach you can take. So you could say if n double equals parse int n, that means that'll only be true if n was a whole number. But it can be a negative number in that case. All right. And then you'd have to go further and say and n is greater than or equal to zero. Then you've got that works. So if somebody puts a string in, what happens with parse int n? parse int of any string will go to nan. Okay. n is the string is not the string whatever it was is not equal to nan. So that would fail. Okay. But why are we returning nan? Because I said to. Why did you say to? Well, because the factorial of nan makes no sense. So I thought we're going to throw an error. In this case, because all the other arithmetic functions in JavaScript return nan as the output of something funny. And this is an arithmetic function. I thought it made more sense to behave like the rest of JavaScript. But we told them. If an invalid input is passed, return nan. Okay. So we don't tell the user what they did wrong. No, we're just, yeah, the function doesn't care. So the function is going to be wrapped in some sort of UI. So that's up to the person using the function to do the functions job is only to do the math. Okay. The way I did it was if the input is less than zero or input is a string where I did equals equals equals quotes, double quotes, or is nan input. Then I said throw an error. So that would mean that 4.5 would have got in because 4.5 is not is a number. It's not a whole number. Yeah, you're right. You're right. So that's one way to do it. My preferred way for positive whole numbers because I adore regular expressions is to say turn whatever it was stringify n. So turn it into a string and then match it against the regular expression starts with ends with a digit plus. So that only makes sense to people who like regular expressions. So that regular expression is starts with and then ends with a dollar and hat or start and end of string and then slash t is any digit and plus means one or more occurrences of that will only match a positive integer. But if you're not a regular expression fiend, that is not human friendly code. Yeah, that just looks like a catwalk on your keyboard whenever I see your regular expressions. Right, exactly. So some people's brains, I think in regular expressions, they are not obscure. They're not weird to me. I just think that way. So that works for me. So I would write the code like that for myself. But I actually think that most human beings would much prefer that way of doing it. Yeah, I'm not saying I couldn't learn it, but it's like you showed me Swahili once and I never got to type Swahili. It still looks like a catwalk down a keyboard to me. Yeah, as I say, the only way to get good with regular expressions is to use them a lot. Maybe in your terminal experience, you'll start to use eGrip so much that regular expressions become a thing. In which case, when you have that skill, why not use it in JavaScript, since you have it anyway? Yeah, I can never remember how to use eGrip. So I sit there sadly knowing I learned it and can't remember how. But okay, keep going. Yeah, it's a matter of having a real problem to solve. You can't learn it in the abstract. So someday you're going to have something where the only solution is for me to talk you through regular expressions and that'll work. Good. Okay. So we've now dealt with all the easy stuff. So we've got a real number. It takes an argument. If the argument is garbage, we throw an error. Now we actually have to do the work. Now we actually have to calculate a factorial. So which one do you want me to do, the recursive or the loopy one? Well, I understand how to do loopy one. So maybe you should torture me with a recursive one. Perfect. Okay, that sounds good. This is like telling the instructor to give me harder sit-ups. Okay. So whenever you're writing recursively, you should always think, how do I stop going down the rabbit hole? So you know the way if you look at two mirrors that are perfectly parallel, they go on forever. You can have an infinite loop in recursion by just simply calling yourself forever. So you always want to think there's got to be some way I return something that's not a call to myself. And so in this case, the escape patch is, we know that the factorial of zero is one. Okay. So we say if... Why didn't we say n? n triple equals zero. Okay. Return one. Okay. So now you know you've created an escape patch? We have an escape patch. We haven't done anything useful yet. Now we've got to call ourselves. So what's the rule? So the rule is the factorial of n is n multiplied by or times the factorial of n minus one. Okay. So otherwise we return n star factorial n minus one. That's it. That's horrible. Right. Some people's brains do not like this. I just saw the back of my own head. Yes, you did. But there's an escape patch. So when you come in with n equals four, four is fine. Four is not zero. Okay. Then I got to return four multiplied by the factorial of three. So at that point, a second... But how can be four? Right. So your function is executing and now it's waiting on an answer. So it stops and a second copy of your function is spawned, which three is the argument, and it gets as far and it waits and a third copy with two is spawned and then a fourth copy with one is spawned and the one with one... Oh, it has to wait two. A fifth copy is spawned with zero. The zero gets an answer. It passes its answer up. It passes its answer up. It passes its answer up. So you get to the first one, which returns the answer. So you have multiple copies of yourself. It's only going to return one. It's not going to return. It's going to return n times the output of the one. So each hanging one is waiting for the other side of the star. So I'm waiting and then I'm going to multiply and return. So what happens when n equals zero? So when n equals zero, it just returns one. So at that stage, you have five of them hanging in midair. Each of them waiting to multiply themselves by the answer they get handed up. And by returning one that allows them to finish? Right. Because then the one where n equals zero actually isn't waiting on anything. It has an answer. It doesn't have to wait another copy of itself. And then the one where n was equal to one gets an answer from its call. So it says return one times something. Ah, I got an answer. It's one. One times one. I return one. Then the guy above him says, I got to be two times something. Oh, I'm two times one. Then the guy above him says, I'm returning three times something. What's something? Ah, something is now two. No, is it? Whatever. I'm really sad I asked you to do this one. This hurts. So we haven't finished though, right? You've got to call it or say it. As far as here. So okay, we have a function, great. Test your function by calculating the factorial of the inputs in the PBS playground. So now we got to actually use our function. Now it exists, but we haven't told it to go. So var the inputs equals PBS dot inputs. Okay. I always do that for my own benefit. So we got the inputs. So I also say that if there's no inputs, we should say something. If there are no inputs, print the message. So that's easy. So if something else, it was wrong. So we say PBS dot say you're an idiot. No, please enter one or more numbers into the inputs. And there's two schools of thought here. You either tell them what they did wrong and you tell them what you'd like. And I'm very much of the opinion you should tell people what you want, not what you don't want. Okay. So if someone puts something wrong and I wouldn't say, no, no, I didn't want a string, I'd say I want a number. Okay. It's a philosophical thing. So what do we put here? Well, if the inputs dot length is greater than zero, we want to actually go ahead and do something. Otherwise, we say please start fucking sense. Does that seem reasonable? Yeah. So in between, then you're going to say, got to call me function. No, just want to use it. So what do we want to do? Put some English in the factorial of concatenated with. Oh, we got a loop. We got a loop. We got a loop. Yeah, one of these. We got a loop. So which kind do we do? Wait, where's the loop? Well, we haven't got one yet. We've got a right one. So the inputs plural, someone could have entered three numbers, whatever we do here. We've got a loop. Okay. I didn't let them put in three numbers. I just ignored the other ones. Okay. That is that is a test of your function. So I'm going to for loop it. Or yeah, so for var i equals zero, i is less than something i plus plus, what do we want i to be less than? I don't know what you're doing. So I don't know. Well, I'm looping over all the inputs. Okay. So I'm going to say make i be less than the inputs dot length. Okay. So we're just looping over an array. So for each element of the array, I'm going to say pbs dot say, oops, the fact of the factorial of concatenated with the inputs i space is space concatenated with call my function at long last factorial of the inputs i. So this is where I start. I don't know. This might not be valuable to talk through on the show, but this is where I start to get really tangled where I would have put factorial parentheses n. I wouldn't have put factorial the inputs. Even worse, factorial the inputs square bracket i, it seems like you've got a lot more in there than I would have ever thought of putting in there. I'm just spacing it out a bit. So this n up here is a placeholder. This n comes into existence here and falls out of existence here. It is our alias for whatever it is they'd like the factorial of. So n is actually this array of pbs dot inputs. No, it's element i of pbs dot inputs. It's going to be a single number, right? We have, I don't know. Okay, well, no, the square bracket called it the inputs. I put a plural, but it's only one thing. No, no, the inputs is an array, but the inputs i is an element of the array. Where did the inputs become an array? Right here, far the inputs equals pbs dot inputs. The actual definition up here says that you can use three text boxes. You can access individual inputs with pbs dot input. You can access all non-empty values as an array with pbs dot inputs. So that tells you that pbs dot inputs always gives you back an array. Okay. So the inputs is an array. The inputs square brackets i is the i-th element of the array. It's not the whole array. I never would have thought to do that, but okay, I understand what you did. I just wouldn't get there, but okay, keep going. I got you. You got me. Okay. Okay. I think we're done actually, assuming I haven't made any typos. Okay. Paste everything. Oh, yeah, okay. That would help. I don't know what these correct answers are. She's putting in two five and seven. And they're all in. Booking our code. Okay. So we have a book in our code, and I'm pretty sure I know what it is, but I'm going to keep my mic short for a minute. Okay. So two, if two percent n, n is greater than or equal to zero, return n. Two is definitely, its percent is two, and it's definitely greater than or equal to zero. So why did it return n? Do you see it? I'm not seeing it immediately. So it's the thing is a string of two has come in here. Ah, we didn't stringify or not opposite a stringify. Yeah. So I'm actually rather surprised we didn't have an infinite loop. Pleased. Ah, no, I'm not surprised. String multiplied by always not. How is this a string? How are we, you typed in a two, not a string. Is it because PBS DevInputs are always strings because they're form fields? Correct. So I forget, how do we turn a string into a number? Well, we can actually, for real, we can say n equals percent n. And we just asked it that you can't then tell it that we asked it. Yes, I can. Why can't I tell it? I'm the boss. Because you already said that it would be Nana if that were true. No, I'm saying if whatever it was is the same as whatever it was as a string. Oh, hang on. Yeah, we have a more fundamental problem. You're asking the wrong question. You're asking the opposite question, right? I'm asking the opposite question. It should have been less than or equal to and not percent. Oh, there we go. We just got to invert everything. Would that be the same as inverting each one separately? If you had said n not equals equals percent n and less than or equal to zero or less than zero. Okay. If you remember your Boolean algebra, if you split the knot, you have to invert the and to an or. Yeah, okay. It's easier not to split the knot. All right. Okay. So at that point, you're saying if if n, so n will never be and will never be percent of n because n is a string. So you have to tell. Okay. So this is a double equals, not a triple equals. So the string to double equals the number two. Okay. Let's. Okay. No, I see. I see what you're saying. Yeah. So if this was 2.5, you would have the string 2.5 being equal to the number two, which is not the same. But if this is valid, it will be the string to being equal to the number two, which is not triple equal because triple equal to a type. Okay. All right. Okay. And then we're saying, yeah, we're backwards and then this is fine. So if the number has to be greater than or equal to zero. So we should have, yeah. So we should have not. So is the string n greater than or equal to zero? Yeah. So this is what's okay. So this is a string and that's a number. So if we remember back to installment one ish of JavaScript. Oh, yeah. If this will get converted to a number automatically because JavaScript does type conversions. Okay. So that wasn't our problem. Wasn't the type conversion. It was that we wrote it backwards. It was that we wrote it backwards. Now our type conversion would have come into play here where we triple equalsed. So that's where you have to parse into it. Yeah. So now I got to say that NB. Yeah. So why didn't that make a loop? Because we never got beyond here. We just returned none. Oh, okay. Okay. But with that fixed, you would now have a loop if you hadn't added that n equals parsing. My escape hatch would have been blocked by an equal sign. Okay. Bad. Okay. So now we should have working code. And we do, I think. Possibly. But two is definitely the factorial of two. That's two times one times one is two. And I'm not good enough at maths to do the rest of my head. I'm pretty sure they're right though. They look familiar. I tell you what, real quick, I'm going to jump in. I'm on another computer for those watching the video. I took my keyboard away from myself. So I wouldn't accidentally do something on screen. Oh, so it should have been, what are we asking five? I'll just do, I have to do them one at a time. 120, that's correct. And seven should be 504. 504. You did it correctly. Yay. Okay. It made me happy to see you make a mistake though. Right. But a programmer makes a mistake on average of nine lines of code. There's 21 lines of code there. We made two mistakes. We're right on schedule. What is that? There's assigned a lot of programmers having their offices that talk about, you know, I found a bug and created three more or whatever it is. I fixed a bug and created three more. Yeah, that all happens. Yeah. All right. Okay. So we're done. Thanks for everybody for listening. This is No. So now we're getting to the big one. And this one is, this is so big that I actually intentionally made it something we would do in pieces, which is why there's so hard, so high partial solutions. Yeah. Yeah. I liked that once I figured out, I tried copying the last bit of code and seeing how it ran and it didn't work. And that was because Yeah. You don't get there till step five. Test what you have so far with the following code. Right. So that shows you how it should work. Questions, will it work or not? So let's build it up piece by piece by piece. And this is going to build up nicely. Okay. So JavaScript out of the box has no bleeding idea what an imaginary number is. Not a clue. Doesn't exist in JavaScript world. So we're going to have to teach it what a complex number is. Okay. Explain people what a complex number is. So a complex number is this weird mathematical thing that involves a real component and an imaginary component where the imaginary component is some amount of times the square root of minus one. So I would like the audience to know this is why I chose mechanical engineering because they told me about that in my electrical engineering class and I said, I'm out. I'm not going to do this. It's a whole branch of mathematics based off the whole idea of what if. You know, what if you could do the square root of a minus number, but you can't. And then off you go. You can't in our physical universe, but strangely enough, the magnetic field and the electric field are related through imaginary numbers. So it does work. It actually has real physics effects, even though it's complete. Like what? I walk over to somebody and I grab their arm and I twist my two hands in opposite directions and I say, torque, you got it. That's why I want mechanical engineering. But okay, you and your cute little imaginary number will create complex numbers with real numbers and imaginary numbers. Sounds great. Now I'm also telling you that we're going to call this new prototype slash type slash class slash data type, whatever we're sitting and we're going to use. We're going to call it complex number. So that immediately constrains us to some things. So that means that our code is definitely going to start and he's going to put in a big comment here because I always put in a big comment at the start of a new prototype. Define imaginary number, can't spell. You also get to see how bad I am at typing. Find imaginary number, prototype, three. So anytime we're defining a prototype, without even thinking, just on autopilot, you're going to type function, paste the name, and then you're going to type blah dot prototype dot something equals function. That's exactly what I wrote. I pointed to Pat last night when I was working on this homework and I'd written complex number dot prototype dot quest mark, quest mark, quest mark. Yeah. So the first thing I always do is you make a function with the same name as a prototype and this is going to be slash slash the constructor. Now, okay, now we've got to go read what we're actually supposed to do. Like even without, without reading anymore, I know I need this much code. So now the question is what do I do? Okay. So the job of the constructor is to, is to build up the data that is needed inside the object and then we tack on the functions later. So what is the data that makes up an imaginary number? Well, it's a real part and an imaginary part. So I am saying here for now, the constructor will take, will not take any arguments. So there we go, completely empty, no arguments. In the constructor, initialize a key named underscore real to the value zero. So we're going to say this dot underscore real equals zero. What else do I say? Whoops. Also initialize a key named underscore imaginary to the value zero. Okay. Okay. So far, so good. I'm wrong on the second line. Good. Okay. Okay. So this is a model that's going to become what we were talking about. I thought it said to return it. I thought it said to return that, but no, it's saying you're, you're defining it. In the constructor, initialize a key. Okay. Right, right. So we're saying. I'm slowly getting this piece. It's starting to get in there. Okay. Good. Okay. So at the point of creation, all our imaginary numbers will start off as zero, zero. So we're saying, when I say, build me an imaginary number, it's going to contain zero, zero. Okay. Which is a perfectly valid thing to do. So that's, that's that done. So, okay. So the key pair is underscore real and zero and underscore imaginary and zero. Yes. Exactly. Two keys, two values. Okay. There they are. Okay. Add a so-called accessor function to the prototype to get or set the real part of the complex number and name the function real. Okay. And the accessor functions, we hadn't talked about in a long time, I remember them, but that means a function that's going to reach into the constructor and do something with it. What's going to reach into the object that was built by the constructor. Okay. And manipulate internal values. Okay. So for example, changing the value of this underscore, this dot underscore real. Exactly. Adding to it, subtracting from it, stringify it, doing something to it. Okay. Yeah. All right. So I've said we're going to call it real. So now I know that it's going to be complex number dot prototype dot real equals function. Okay. So now what? Let's keep reading. If no arguments are passed, the function should return the content, the current value of the underscore real key. Well, that sounds easy. Yeah. I actually got stuck on that. Okay. Well, if arguments dot length double equal zero. So I forgot all about arguments dot length. That's kind of an important one. Yeah. So, but what is it again? It is every time you're in a function. So here we're in a function. This special variable is created automatically for you by JavaScript. And it is an effect that it is an array of all the arguments and it has a length feature. So if there were no arguments, then the arguments dot length is zero. But we know that we already have a real underscore real on underscore imaginary. There's zero. Okay. Well, they're not arguments to this function. They're just properties of our object. But we already said this function had no arguments. Right. Well, no, we were saying so this function. So the prototype had no arguments. Yeah. So the constructor function had no arguments, but now we're in a whole new function, right? We said function blue. Because we're not done typing in between those two parentheses there. We're not. We've dealt with, so we've, we have done this. If no arguments are passed, functions are to turn the current value of underscore real. Okay. Well, yeah. If no arguments are passed, oh, sorry, not return zero, return this dot underscore real. Now we've done what it says. So how could you return this dot underscore real if there's, oh, you're saying we have, oh, wait, I think I've got it. So we're creating this prototype that's going to look over at that, that object function thing we did to start with the constructor. And it's going to say, it's going to say, did I get any new values? No, well then just use the one I already had, which is this underscore real, which should be zero. Right. So this is when you don't pass any arguments. Was that right? Mostly. Okay. Pretty, pretty close. Yeah. So when you don't give it an argument, we want you to tell me what's inside. And if you do give me an argument, we want you to make what's inside become that. Yeah. Okay. So we've made on the first half of that. Okay. All right. If you didn't give me one, if you didn't give me any arguments, just tell me what's inside. Okay, fine. Return this underscore real. So now if there is a first argument, make sure it's a number. Okay. Well, we can do that. We can do that in a couple of ways. So either I could say if, so we can talk about arguments zero as the first argument, which I find very cumbersome. I don't like using arguments like that. So I can give it an alias, let me say or. Sorry, I was rereading something else you'd written. What was this test for? Okay. So you flip back to the other screen. Okay. So we're saying that if there is a first argument, make sure it is a number. Okay. Now, how do I address the first argument? So if there wasn't one, we've dealt with that case, but if there is one, so I can either say if arguments zero, and then do my test for a number. Wait, zero. But I don't write. Oh, element zero. Yeah. Now I don't like dealing with the arguments array like that. I prefer to just give it a name. So I'm called, so I just went up here and I just went or. So now we can alias, we've aliased argument zero as or. So I can say or if, if argument zero. Oh, because we're going to have two arguments. Well, no, there's only going to be zero or one. Yeah. No, there's going to be zero and one. No. If there is a first argument, we're only interested in a first argument. Okay. All right. I'm just building it up here as it says. Okay. Anyway, I'm just calling it or because or is easier to type. So if now, how do we test for number again? Is number, isn't it? Or not is nan. Yeah. Yeah. That's why if not is nan. Parentheses are okay. Good. What do we want to do? If it, okay. Set it as the value of underscore real. Okay. So then I say this dot underscore real becomes or. Okay. Anything else? And then we do something, which for now is going to seem like complete voodoo, but we just do it because I said so. Return this. This is a really, if you just use the pun on the word this all the time. This is a really common technique. It's called, it enables something called function chaining, which I just wanted you to park. I don't want you to fixate on it. Okay. Let me make sure I understand what we said. So we said, which one do you want? Okay. No. Let me just read what I can read now. So we've got a prototype. Oh, sorry. I think this is a slight line. We've got the prototype called real of complex number. And it's got a function and its input is r. And we're saying if we didn't get anything for r, then return put, just hang on to this dot underscore real. We're not hanging on to it. We're returning it. Well, I don't know what return really means. Okay. Because it doesn't say it. It just, but we already know this dot underscore real is zero. So why do you have to return it? Well, it's zero when the object is created, but we could manipulate it. So then it may not remain zero. But it isn't. We aren't. Who says so? Okay. We are creating. Because we just said we said it's zero. Okay. No, nothing is anything yet, right? This is defining what an imaginary number is. Until we say something becomes equal to a new imaginary number, nothing exists. This is a blueprint. We're building a blueprint. Right. But we just, we already know we've invoked this function thing, this complex number thing. And we've already told it. This dot underscore real is equal to zero. No, we haven't invoked anything. We have said that when the constructor is invoked, we will set underscore real to zero and underscore imaginary to zero. So we haven't done it. What is returning this dot underscore real do? It's going to do nothing until we invoke the real function. So we are at some stage in the future going to say var my number equals new imaginary number with no arguments. And at that point in time, this function runs. And this function creates a new object with two properties called real and imaginary. So my underscore number. Wait, my new, there is no new, there is no imaginary number in all your code. You can't call it. It doesn't exist. No, we are making it exist. Complex, sorry. Thank you. That's what was throwing me up like, well, wait a minute. You can't be making it. There we go. Okay, so now say again, because I was lost, because it made no sense. Okay. So until we do this, until we say new complex number, all of this is just a design. It's not actually happening. Right. So when you create a new one, then do this. When someone then says pbs dot say my number dot real with no arguments, then it should say zero. I don't know what return this dot underscore real is doing. Okay. So pbs dot say. Why are we returning it? Well, because we want to be able to access it. So we might do something like my number dot real plus four. Yeah, it's not very exciting. It's going to be four, but. Because otherwise we don't have it. It doesn't. It's an accessor function. Its job is to let us reach in and get the value. Okay. Okay. Okay. So now what happens if we call it with an argument? pbs dot saying stuff makes sense to me, but I guess it's because I'm not inside the computer. Shouldn't be chattering all the time saying this stuff. But to me, that's what makes sense. Right. It's just the fact that it now knows what. So. Okay, let's do this now. We've called it here with no arguments. Let's call it with an argument. So now we say my number. I should have called it my num dot real four. Now let's do a pbs dot say my number dot real with no arguments. So it was zero. We've now made it before and then we've gotten back the fact that it's four. I don't have any idea what you just did. Okay, can we go back? Go back to the code because I'm derailing you and it's getting worse. No, we need to go back to the code, but we need to go back to it in a very specific way. So at this point in time, line 24. On line 24, we are calling our constructor function. And we are saying that my number becomes equal to whatever the constructor function does. And the constructor function is adding underscore real and underscore imaginary into my number. So at that point in time, my number has an underscore real property of zero and an underscore imaginary property of zero. And it also has a function called real because we've added it to the prototype complex number dot prototype dot real. So every complex number has a function called real. So we can say my number dot real. If we call it with no arguments, all it does is reach in and give back whatever the current value of real. Okay, okay. So the first time we do that we pbs- Because we said return this dot underscore real is the reason that pbs dot say my number dot real with no arguments returns says zero. It returns to zero which pbs dot say no. To say yes or no when I say sentences like that because you start explaining again and I get stuck. So let me say it again. Is the reason pbs dot say parentheses my number dot real with no argument types a zero on the screen is because in the prototype for dot real, it says to return it. Yes. That's the reason it knows what it is. Other without that line 13, you wouldn't ever know in the when you're running this function that this dot underscore real is zero. If we take this out, JavaScript will go. What are you talking about? Well, no, I just want to get rid of line 13. So let's well that just says there is no prototype. There is no my number dot real. Yep, that's not what I meant. I meant just I'm just asking about line 13. Okay, let's do that then. Sorry, where's me delete key on this mic? Okay, all four were delete then. Function and then delete. Hold on. I'm used to having a really big keyboard. And this laptop does not have a really big keyboard. So line 13 wants to go away. Yeah, just like 13. It should be confused. It will be confused. It will I predict it will print out undefined, undefined. Oh, object object. Close enough. Okay, because it doesn't know what it is. Okay, I think I got it now. Now you can keep going. Okay, so is there anything else we need to do? I think we have fulfilled our assignment here. Yeah, okay, we've done all that. You said function chaining and we're just going to hang loose on that. Yeah, so the line 19 is doing what we're told, why we're doing it. I haven't explained yet. I've just told you that returning this is a really common thing to do. So return this. Okay, okay. Create a similar accessor function for the imaginary part of the complex number. I'm good at this part. I know how to copy and paste and change word real to imaginary. So imaginary there. Return this dot underscore imaginary. Otherwise, we should probably rename you to I just to be consistent. See that bugged me that you used I. I thought we weren't supposed to. I thought you'd I was reserved for that index thing. So I called mine I am. Oh, okay, we'll call it I am. Okay, I never going to use I equals I am. Okay, so we've copied and pasted on the same thing twice. Yeah, so I should still run without any errors. I like that you copy it first. I copy it first. If I made an infinite loop, then I lose everything. Yeah. Been there, done that. Don't want to do it again. Okay, so that's part three finito. Add a function to the to the prototype named to string. Okay, I got as far as typing the beginning of this part. And that's where my head exploded, but it was 1130 at night and I was sleepy. See if I wrote it correctly. Type that to string equals function. Not much we know without reading any further. So now let's read further. This function should return a string representation of the complex number. Okay, well, that's a sensible thing for something called to string to do. The rendering should adhere to all the following rules in the general case. Yeah, can we just have a simple case first and run it without doing all of these? Absolutely. So let's just do a general case. So in the general case, a complex number is written as So far Okay, we can't start PBS, but that's saying right there. No, because we're returning return, return, return. By the function name pro, this function should return. Okay. I like saying I've got the hang of it. You've got to get out of that habit or you're not going to be able to do anything useful. Yep. I'm type stuff. I'm going to actually return the answer. I'm going to figure out what the answer is. Well, so why do you create a variable? Well, because we're going to be building this up, right? We're going to be calculating all sorts of stuff together. So I know it's going to end. It's going to start with an open curly break. But why can't you just say return space quote? I could, but it's going to get longer and longer and longer. You like all these extra variables laying around and that confuses me. Well, that's four. Right. But why does it need to be on a separate line? It can just be So plus this dot I think your quotes and your I think I'm okay. Why do you want quote left parenthesis quote? Well, because an imaginary number when you write it out looks like Or it's because I'm telling you what it looks like. I'm telling you that an imaginary number looks like Oh, I didn't know those parentheses for prayer. Okay. All right. That's generally how you write them. So you don't get all. So parentheses, the real number plus a number times I Right now. So I need this plus symbol. But see our special case is already running at the problems. But let's write it like this. And Can you move your cursor? I can't read what that says. There you go. Thanks. Start underscore imagine imaginary. We need a plus Hi friends. That seems sane, doesn't it? No, no, I asked and it's I am And no, it's this that underscore my Oh, it's just a letter I It's just a little right. It's a string I Okay. And at this point I am doesn't exist because that's over there in that prototype. We don't know what it is. That's not in the global scope. Exactly. It's in the function. Do you need to How come you don't have a semicolon right where you just put your cursor? No, you just moved it. You were up on line 31. 31 and 20 I would have thought needed semicolons. I do. Well, look at now the script is just sometimes forgiving. Line 20. No, not like. Oh, yes. Actually you're right. Line 20 as well. Line nine. Line nine actually doesn't because it's not equal to a function. But line nine. Line nine that 11. Yeah. Oh, because it's not a function. Wait, it is a function, but it's not in this format. Bloody, bloody equals function. So technically it doesn't. But if it confused doesn't hurt. Okay. Does absolutely doesn't hurt. Absolutely doesn't hurt. There was many of these. I'm just trying to feel like I had some value here, Bart. Okay, so we've said complex number that prototype dot to string is equal to a function with no inputs. And all we're going to do is return this here string. Right. So let's try use this string. So why do we call it to string? Is do we make that word up? That is one that we have made up in line with a convention. Right. But it is a made up word. We could have called them boogers. We just want to make sure it's not a sacred word. That's all. Okay. It's not a sacred word. It's a word that we've all decided is important. Yeah. Okay. So I'm going to say the real part is five. Wait. You got two reels. Yeah. There we go. So that's now saying insensible. Okay. So wait. Talk through what you've written down on the bottom now. So now var my number equals new. Complex number. So we're calling the prototype. So we're saying build me a new one using the constructor function. Why wouldn't you just put in five comma three or whatever four comma five in between the parenthesis? Because we haven't yet made this constructor function smart enough to do that. We've just written a dumb constructor. It will get smarter as we go through this, but right now I've just said that's why I said for now the constructor will take no arguments. Okay. So right now it's a dumb constructor. It just always builds you zero zero. Okay. So my number now contains zero zero. Let me say my number dot real four. So we're using this accessor function with one argument. So it actually says this dot underscore real becomes. So my number dot underscore real is now four. My number dot underscore imaginary is now five. So now we can do something sensible and say my pbs dot say my number dot two string. Why does two string have to have parentheses on either side? Parenthesis means go. It's a function. It means execute this function. Oh really? Yes, parentheses is like casting your magic wand. It's like go. On a function. On a function name. So two string is a name of a variable that happens to be a function. So to make it go parentheses it. So there we go four plus five i. Now immediately we have a minor problem if I say minus five. What does our code do? Oops. Right. Our code is not behaving very well here. So we need to be a bit smarter. Our two string function is too naive. Right. Now I need my variable. Okay. Let's initially just start off. By grabbing all that stuff. Let's grab it all because we're going to need it all but we're going to need to do a little bit of jigglypokery with it. Return out now. So up as far as here. So it's going to be the same. So we definitely want that. Wait what? Would you? Oh you're just making space gotcha. So we're going to start it off with an open friends and whatever the real number is. That much is always the same. So then we got to say. So because the real number can be negative, positive, decimals. There's nothing to test for. What if it's a string? Well that can happen because our accessor function takes care of all that. Oh that's right. We already checked to see if it's a number. And that's why you have accessor functions. They are a filter to make sure that the only stuff that gets into your object is good stuff. Right because the only way to get in is to call the imaginary function. Right. And it will just not accept it if you talk rubbish at it. Just go out and set off. Okay so blah blah blah blah blah. If, okay so if this dot underscore imaginary is less than zero. Then we actually want to do the next thing. We want to say ans becomes whatever it was. Before you do this, talk the logic of what you're doing. I don't know. You're just typing. Okay so we know that depending on whether or not this underscore imaginary is positive or negative. We want to actually change this plus sign to sometimes the minus sign. Well what you did was it's not incorrect. Plus minus five i isn't wrong. It's not wrong. So we're just prettifying. We're not. It's not messed up. Yeah it's not. Yeah we're just making it behave like I told you to. Okay so this is where you said if the imaginary numbers negative change the plus or minus. Yeah okay. So if this that imaginary is less than zero we stick on a minus. Else. You got to do more than that because it's going to say minus minus if you do it that way. We do got to do. We still got some work to do. So far though that much is correct. We're now correct as far as that space. Now we've got some work to do though. So. How's that correct? Is that correct at all? A minus will now it'll say minus minus and it'll be wrong as opposed to just not pretty. Okay but I haven't printed the number yet so I haven't gone wrong yet. Now I'm going to print the number and now I have to be clever. Remember our friend the maths. I don't know what you're doing. So I followed you. You're just typing stop typing. I know. No no no you got to stop typing because you're supposed to explain as you go back on line 36. You said the answer gets added to it a minus. Or a plus. If we're negative we stick on a minus. Otherwise we stick on a plus. So so far we have prens. Four. So prens concatenated with this that on the square real. Don't you have to concatenate that piece on the end? You're just plus equalizing it. Right. And there's no plus equals concatenate. Becomes equal to whatever it was with the other things stuck on the end. A string. I thought that was addition. Yes but the plus sign is either addition or concatenation. If it's a string it knows to concatenate. Exactly. Yes. Okay all right that's good. Okay so we're going to add a string otherwise the string of minus. Otherwise if it's not less than zero we're going to make it a plus. And then we got to be clever about how we actually print the number. Because we don't want to print a second minus sign. Because if you print the second minus sign it would look very silly wouldn't it? Well it'd be wrong. Yes. Where it was right before. Right so the maths library is at our disposal. And the maths library contains a function called abs which gets the absolute value. Yes. Yeah. So if we get the absolute value of this dot underscore imaginary then it won't print a second minus. Okay okay. Because the absolute value of minus five. I was confused because you already had it taped and I'm doing it. Okay got you. And then what is the last thing so blah blah blah we're this far and then we've got to concatenate our i. So hence plus equals the letter i and the closing brands. So in theory if I hit run again we should see a more sensible can't find variable maths. Yeah because it's not plural. You and your British ways. JavaScript is British. Oh wait. Apparently not. No JavaScript is American. Okay so that's behaving better. Four minus five. You know I'm going to get that wrong forever because you did that. A four plus five. So that's behaving well depending on whether you put a plus or a minus. So that's good. Our code here is better. Okay. So what else does our code have to do? It probably needs to get a bit smarter. Like 48 more conditions to go through. Do we want to go through them all? Do we? Is this worth spending our time on or will we take it as given? Because these are just conditions to make sure it's written correctly. Yeah. All these are. Yeah and so we could probably read through those. Okay in that case. Do you want to copy? I'm going to copy all of this. It's quite messy. That's not going to work in the wrong mode. You're going to get all the line numbers. There we go. Double click. Command A. There we go. There you go. Not that I've done that a hundred times. So let's make sure it still works. Good. It works. I'm going to take a moment now to bring us back to our function chaining. So this is really quite cumbersome. My number dot real four, my number dot imaginary five. Wouldn't it be great if I could just do that? Well actually I can. That is function chaining in action. Right. My number dot real parentheses four dot imaginary. Oh that's kind of cute. Right. Because this is a reference to whoever called me. So this is a copy of my number. So my number dot real returns my number. Well I can just dot imaginary it. So this is a reference to the object I was called on. So by returning this we just get the stick functions. Slow down and start over. Not even close. Show me where we put this again. Okay. So in the code. So in the function real. So where is the function real? Here it is. Okay. That's the line that makes that lovely shortcut possible. Okay. So this is the prototype dot real return this. And this is r at this point. This is going to. All right. So this becomes whoever is calling the function. So my number dot real. So when we say my number dot real inside real. This is my number. Wow you love talking in circles Bart. This is a magic word right. This the magic word this is a magic word. It has it has meaning. It basically means that whatever object I'm being applied to. So it makes the code generic. Right. So we say my number dot real. Then this is becomes an alias to my number. If I then say. You just said my number. Why do you need an alias to my number? You just type my number. No but in here but in here. We have no idea that my number right in the prototype. How do we refer to to real? How do we refer to any possible imaginary complex number forever more? We've got to return to it in a generic way. So we use the magic word this as a standard for whoever it is. Call this function. Right. So here whoever it is is my number. But if I say for my other number equals new complex number. And then I say my other number dot real. Six. No. Right. Now real is there's one function real. It's here lines 11 to line 20. That function has to work on my number. My other number. My other other other number. Right. It has to work generically. It has to work for every single complex number ever. That's what the magic word this is for. So when I say my my other number dot real. My other number becomes this. When I say my number dot real. My number becomes this. This is a standard for whoever it is I'm helping it. Okay. But who am I helping out in those in those equations you just wrote below. Those lines. So on this line here my other number dot real inside real. This is my other number on this line inside real. My number is the one that gets mapped to this. So we are saying call this is by telling me it's my number. But then when I ask you what my number is you say it's this. So that I'm just in a circle. Sorry. My number is the variable we credit here on line 87. Why do we need to have it be this what I don't understand where this is a magic word. This is not something I have made. I've heard you say that. I understand this is a magic word and it's doing something. But I don't know what it's doing. It's going in a circle. It is a stand in for whatever called this function. Okay. Can we just you've got a variable called my number. My number becomes this or this becomes my number. This becomes my number inside the function real because I said my number dot real. And then the next time my other number becomes this inside the function real. Why do I care about this? Because the same function. Yeah, I know. Well, the same function is now working on two different objects. So that's why we have to use the magic word this otherwise we couldn't write a function like that. I don't want to write a function like that. We've never used it before and we haven't had to do this. So I don't see what's different about this use of it. Is it because you're doing these chains that you have to keep. Okay. We're going to chain you aren't changing my number. You're just using my number. You're not using my number and my other number. Okay. So what happens if I take out the line I'm telling you is important? That's another way to approach it. Gone. We're not returning this anymore. Cancel, not save. I've done that a lot of times. Undefined, it's not an object. So why is that happening? I don't know what it does. Right. Okay. So this much happens first. My number.real4. It now returns nothing, which is undefined. So when we return this, is my number.real parentheses four equal to this? My number. parentheses four becomes whatever was returned. No, no, no, no. I said my number.real parentheses four. Is that this or is it just my number that's this? From which point of view? Okay. So ignore the end of this line. So when this happens, it will evaluate to whatever is returned by that function. So this will be collapsed in to whatever is returned by the function. So we return this, but this is actually a reference to my number. So all of this just becomes my number. And then we're saying my number dot imaginary. Hmm. Well, look at the time. It's not even starting to sink in yet. So actually, I'll comment that back out. Comment it back out. Okay. Comments it. Okay. And now go down the bottom and now get rid of or comment dot imaginary negative five. Yeah. Okay. Wait. Comment. So the comments. Yeah. Let's go. Okay. That will network fine. It will. Okay. Okay. So it's the my number dot for parentheses real that becomes this. And then we can say this dot imaginary. That's what it is. Yeah. Yeah. Yeah. I think I've got it. I could never reproduce it, but I think I've got what you're doing. Why it works. Ha ha. Except we're wrong. We didn't. I've done something silly. Look, Hazel's cleaning up my desk on screen. No, go back up to the top. We did. We comment. No, no, no. Put it back. We commented out this. Did we? Yeah. Do not comment that back in. Oops. No, we didn't. Thank you. I say save all the time. That's because it's so ingrained into all of us forever. Right. Always save the power to go at any minute. I'll have a look. Google docs basically unmapped command and control s so that you can just hit it to your heart's delight and it doesn't do anything. Clever. Yeah. Yeah. Figure out how to do that. All right. I think we have gotten it. Okay, so let's get rid of all this. We don't need this extra bit. So we have our save function. We've inherited a very clever one. So if I say imaginary is minus one, it behaves just as minus four, minus i. It's all very clever. Follows all the rules. So now what's next? Five. I thought we were done. Oh, good lord. No, test, right? So now in theory, if we've written everything correctly, this code will just work. Change your copy. Thank you. I like that you can double click. So replace my test code with real test code. So none of this should give no errors and just work. None of this should give no error. Okay. This should get, yeah. So what are we doing? So we just created a bunch of complex numbers for us so that we wouldn't have to... Yeah, so you say var cn1 equals new complex number. We said it's real part to two. It's imaginary part to three. And then we two string in, two plus three i. Okay, great. Create a second complex number. And this time we're going to say var cn2 equals a new complex number. Because a new complex number said it's real, said it's imaginary and say it. There we go. Create some more complex number, but don't bother to say them. Just print them. New complex number five, blah, blah, blah, blah. These are really only here so that I can see that all this is working minus three, 21, minus i, i, 4.7i. All the different permutations of how we might want to print out a complex number are all working. That was nice of you to rate the test for us. If I'd ever gotten that far. Yeah. That's, I wrote the test because otherwise I couldn't have wrote the code to then, you know, get out of test cases. Okay, so the question is, how far do we want to proceed in this before we lose out of energy? Oh my goodness, we're not done. So part six. Oh, seven, eight, nine. Yeah, so right now we have a great stopping point, my opinion. I'm like, it's really up to you. It's an hour and 21 minutes. It seems like a point we probably should stop. Because one of our discs is going to fill up with the video recording. Probably mine. All right, so will we pick this up next time? If you, yes, absolutely, I will be delighted too. This is actually quite entertaining to do it this way. Yeah, and by the way, what you guys are seeing on video is what I've been seeing most of the time. I've been seeing at least something along these lines. So I think hopefully that'll be more fun for people. And the fact that we finish here with a test case is a perfect place to finish. So we now have a very, very basic complex number class or prototype. We can set its values and we can print it out. I had no idea there was more to this. That's terrifying. Right, but our imaginary numbers are now really quite boring things, right? What's really clumsy.real.imaginary. And we can't add them. We can't subtract them. We can't multiply them. So they're not really very powerful yet. I'm glad I gave up last night at midnight or 11.30. Yeah, because basically we've got to teach JavaScript everything of a complex number. So far, we've taught it how to print them out, how to store them and how to print them out. Now we want to teach it how to add them, how to subtract them, how to multiply them. Did you really think I'd be able to do this? Yes, really? Slowly, but that's why there's partial solutions each all the way. I know, but I mean, there's so many things in there we don't know how to do. I mean, you've given us all the little building blocks, I guess, but not having ever used. Every Lego brick is what you've seen before. But we've never even typed parse int on our own in any of the tests that I can remember. Maybe one. I think we have. It's pretty common. Anyway. Anyway, okay. We have a sane halting point. All right. Well, I guess we'll stop this recording. Oh, this worked. Well, fingers cracks should be terrible if we went through all this and the listeners never heard anything. I'm sure somebody heard something. Okay. Okay. Well, until next time, happy competing.