JavaScript: The Hard Parts, v2

Repeating Functionality

Will Sentance

Will Sentance

Codesmith
JavaScript: The Hard Parts, v2

Check out a free preview of the full JavaScript: The Hard Parts, v2 course

The "Repeating Functionality" Lesson is part of the full, JavaScript: The Hard Parts, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Will diagrams an function that uses an array as a parameter. Students are then directed to pair with a partner and verbalize the same diagram with one character changed to provide context a case where a generalized function might be useful.

Preview
Close

Transcript from the "Repeating Functionality" Lesson

[00:00:00]
>> Will Sentance: Okay, folks. So we are back building out this function here that's gonna take in an array. Copy right Mr. Bob it was take in an array by the looks of it, 1, 2, 3 here, and create a new array, is then gonna iterate through loop through the input array.

[00:00:14]
Take each element mode from other than by two, fill up the output array with all those doubled values and return out that annuity filled out for the array. Okay, it's something we do, some sort of task like this. We're gonna build it out, diagram it out, but we're then gonna see another function that's going to look, I'm gonna sound out my best position.

[00:00:32]
We're gonna see another function that's, that's why I don't like podiums. We're gonna see another function that's gonna look particularly frustratingly similar. And yet, we're gonna build it out from scratch, again. All right, let's start with our friend Adam. Here we go, Adam. Take it away. Let's start walking through our code here.

[00:00:52]
What are we doing, Adam, in line one of our code here? What are we storing into Global Memory, Adam?
>> Speaker 2: Yeah, function definition with the label copier A and multiply-
>> Will Sentance: Very nice, yeah, the function definition with the label copy array, gonna try and keep this neat, copy array and multiply by two, excellent.

[00:01:15]
The whole function definition is saved, there we go. So, there it is, copy array and multiply by two, it's saved. Let's hit up Matt now, with what is our next line that gets done by JavaScript, executed by JavaScript, Matt?
>> Speaker 2: We're gonna define the constant of my array.

[00:01:32]
>> Will Sentance: Beautiful. Thank you, Matt. It's got what value?
>> Speaker 2: An array of 123.
>> Will Sentance: Beautiful. Thank you, Matt. Now we hit the next Matt, keep going. Now we're gonna define the constant of result. Excellent, I'm really enjoying Matt's loud and confident voice here. So we're gonna keep staying with Matt.

[00:01:48]
Matt, it's uninitialized for now, well we've got to go and do what?
>> Speaker 2: Execution context.
>> Will Sentance: Execution context to execute what?
>> Speaker 2: Copy array and multiply by two.
>> Will Sentance: Copy array and multiply by two, there it is, multiply by two. And we're gonna pass in what as our argument?

[00:02:09]
>> Speaker 2: My array.
>> Will Sentance: Yeah, which is one, two, three, the array one, two, three. Let's create that brand new-
>> Speaker 3: Execution context.
>> Will Sentance: Well done, people. While I just get my edge here.
>> Will Sentance: Okay, there is the execution context, here it is. Let's just put on the call stack, we're good.

[00:02:38]
We're recording this version, right, aren't we? So we're gonna be extra complete in all our, all our stuff. So that for posterity. We have, yeah, copy, array. Multiply by 2, we're running it, it's on our call stack. We always have global, come to second down, I promise. We always have global, did I get anything wrong?

[00:03:01]
>> Speaker 2: No, you just got it, I was gonna ask about the global.
>> Will Sentance: Excellent, global's there on the, I did just get it, excellent, [LAUGH] correct answer, well done well. And now, here's our execution context. With the thread of execution going through the code line by line on the left hand side here, I'm not gonna always write out every line of code, but roughly we're going through the thread of execution.

[00:03:21]
Running the code, and then here's our local memory. Matt, back to you. What is the first thing in our local memory? What are we storing in there immediately?
>> Speaker 2: Our array parameter.
>> Will Sentance: Yes, with assigned what argument?
>> Speaker 2: One two three.
>> Will Sentance: Yep, one two three, there it is.

[00:03:37]
My array shot in, fills an array, one two three. Then Dan, we hit what line next? We hit the body of the function now. Which says to do what?
>> Speaker 2: We want to create a new constant output.
>> Will Sentance: He's spot on, well done, exactly. And assign a what?

[00:03:54]
>> Speaker 2: A empty array.
>> Will Sentance: Excellent from Dan. Now we hit our for loop. Here it is, for loop. We're not gonna go into the intricacies of how you know it's declared but we know that the body of it the bit between the curly braces that line is gonna be done X number of times.

[00:04:10]
How many number of times? As long as I is less than the length of the array, I saw zero, the length of the array's three, we're gonna increment increase I each time. And then we're going to run that line as long as I continues to be less or zero continues to be, I can do to be less than the length of the array, so that's gonna be three times.

[00:04:29]
We're gonna see it play out into the body of the folder we go. I'm going to put these on the left-hand side here, not copying them, but just so we can work with them more easily. We have our array one two three and our output is an empty array, Kayla?

[00:04:50]
Let's hit the body of the for loop. Array position zero is what, Kayla?
>> Speaker 4: One.
>> Will Sentance: One, we take the one and we do what with it, Kayla?
>> Speaker 4: We multiply it by 2-
>> Will Sentance: x when we get 2 we do what with that, Kayla?
>> Speaker 4: We push it into the output array.

[00:05:06]
>> Will Sentance: We push into the output array, there it is. Two, beautiful, good job. Kayla, excellent. Next one Kayla, this time I's value is what?
>> Speaker 4: 2.
>> Will Sentance: There you go don't worry, i's value next time.
>> Speaker 4: 1.
>> Will Sentance: Don't worry people, in my new hot pot I literally only iterate to section make people consistently get that wrong every single time.

[00:05:28]
Because in the end, this is a bat. It's a dated interface for data. But if I've got a collection of data, I don't really care about the index position most of the time, I just want to get the next element. And there's obviously a dated interface dated way of accessing data.

[00:05:40]
I take my data like a anachronistic document any better is it. [LAUGH] Okay, an old fashioned I'd say, like a not perfectly designed, or, because we don't really care about the index most of the time we're using it, we just wanna get the element. And there are new ways of doing it, we're sticking with the traditional way here.

[00:05:57]
That's what I was gonna say, we're not gonna go through the for loop's sort of journey, but it is an interesting interface for data. And Kayla sort of showed us there why, ultimately, seasoned engineers every time like Kayla will still go. Anyway, you get the point. So there it is, position 1, get to 2, take it, multiplied by 2 to get 4, push it to output.

[00:06:21]
There we have it. So for loops, we do it again. There we go, 2, 4, 6. And now the final line Kayla, of copy array multiplied by 2 says to do what?
>> Speaker 4: We return the output array.
>> Will Sentance: Yeah, we return the value of output into what global constant, Kayla?

[00:06:41]
>> Speaker 4: Result.
>> Will Sentance: Into result, well on. And there it is, folk. We took in one, two, three, we ran copyArrayMultipleBy2 on that argument, we've created a brand new array and returned out that array filled in with our doubled elements. Good task, there we go, great. One second, Jason.

[00:06:58]
Well done, everybody. You love this function. [LAUGH] You're gonna love my next function. I don't even wanna get started on how exciting my next function is. Look at this one. [LAUGH] It moved, it's less compelling when it moves. Okay, everyone can see how much it's changing here, people.

[00:07:21]
One character. Literally one character, exactly. What do you think has changed? Everything's the same, but we're gonna rebuild it from scratch because we want to feel in our,
>> Will Sentance: Gut, so to speak. That this is problematic, and there must be a better way.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now