JavaScript the Basics for Beginners- Section 6: Functional Programming | Rob Merrill | Skillshare

JavaScript the Basics for Beginners- Section 6: Functional Programming

Rob Merrill, JavaScript Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (50m)
    • 1. JavaScript the Basics - Functional Programming: Promo Video

      1:55
    • 2. JavaScript the Basics - Functional Programming: Filter

      9:03
    • 3. JavaScript the Basics - Functional Programming: Filter Lab

      8:29
    • 4. JavaScript the Basics - Functional Programming: Map

      7:26
    • 5. JavaScript the Basics - Functional Programming: Map Lab

      7:09
    • 6. JavaScript the Basics - Functional Programming: Reduce

      7:37
    • 7. JavaScript the Basics - Functional Programming: Reduce Lab

      8:17

About This Class

Course 6 - Functional Programming in JavaScript

In this course you will cover: 

  • filter
  • map
  • reduce
  • course review

Through our whole JavaScript the Basics for Beginners course series you will find this is your one stop necessary to enter into the language of JavaScript. We are going to start from scratch and build up our understanding of the world's most popular programming language together. 

View JavaScript in action with whiteboard videos optimized for viewing on your smartphone. This is truly a course that you can engage with no matter where you are. Take your JavaScript eduction on the go! With whiteboard videos you get to visualize what JavaScript does under the hood. 

You can practice JavaScript in your web browser! Take advantage of Google Chrome developer tools to put the JavaScript you have learned during our whiteboard lesson into practice with further examples and challenges. This is our JavaScript playground.

Learning JavaScript is like learning a language. This course won't make a false promise of saying you will master JavaScript overnight. However, this course will immerse you into the world's most popular programming language. 

Each course will introduce you to something new in JavaScript :

  • JavaScript Syntax
  • JavaScript Building Blocks
  • JavaScript Best Practices
  • JavaScript Objects
  • JavaScript Arrays
  • JavaScript Regular Expressions
  • JavaScript Functional Programming
  • JavaScript Algorithms
  • JavaScript Data Structures
  • JavaScript ES6 Syntax

You'll finish this course with an understanding of JavaScript that will let you take a deeper dive into the language and possibly launch you into a new career as a JavaScript web developer.

Learning a new language can be difficult and even feel intimidating. JavaScript the Basics makes the the learning process feel accessible and welcoming!

Transcripts

1. JavaScript the Basics - Functional Programming: Promo Video : Welcome to Java script. The Basics. JavaScript is the most popular programming language in the world has been called the language of the Web Stack Overflow listed as the most popular deaf technology and get have numbers it as the top ranks language learning JavaScript will allow you to be a full stack developer or fund a specialty on the front end or the back end. With JavaScript, you'll be able to cope with front and frameworks like react and angular on the client side . And you can also cut on the back end server side with no Js and create databases with Mongo . DB JavaScript is a language, so it's going to take some time to learn before you can write poetry or a novel in any language, you have to first learn the languages alphabet, how to make words and see how others use it. To learn JavaScript. We're gonna look under the hood. This isn't just going to be an exercise in copying someone else's code to wind up with an application you don't understand. Everything we do will be visual in the form of a whiteboard lesson where you can really see how everything works and connects. If you are a visual learner, this is the course for you. This isn't about going 0 to 60 or zero to hero, because if you really are starting at zero, those courses leave you behind quickly. It's about learning. Understanding and applying is that you could build and create with JAVASCRIPT. Way will then follow our white board. Lessons into the lab way will enter into the Google Chrome software developer. Consul thistles are Java script playground. There is nothing you will need to download for this course. No special tools, no extra steps. Just Google, chrome, everything. You learnt the lesson we will then recreate in the lab together. I'll then give you a code challenge to recreate what we learned together and then we'll look together at a possible solution. Welcome to Java Script. The basics. Let's start speaking job script 2. JavaScript the Basics - Functional Programming: Filter : All right, welcome back to Java. Stripped the basics in this section, we're gonna look at functional programming. This will be a primer on what functional programming is and give you a taste of how it is used in JavaScript. You won't learn functional programming overnight, but you can begin to see the benefits and results of it immediately. One of the characteristics of Java script that makes it well suited for functional programming is the fact that it can accept higher order functions. Ah, higher order function is a function that can take another function as an argument or that returns a function. As a result, functional programming is just how it sounds. Programming with functions in JavaScript functions are objects, functions, air values. That means that functions can be passed along toe other functions. Eric Elliot explains functional programming this way when he says that functional programming glossaries contain a large number of large words. But at its core, the essence of functional programming is really very simple. Programs are built mostly with a handful of very small, very reusable, very predictable, pure functions. Now you probably want to know what pure functions are for now. Concretely, that means a pure function always returns to the same result, given the same parameters of pure function is a function in which, given the same input, will always return the same output, produces no side effects and relies on no external state. Don't worry if that is going a bit over your head. Remember, we're learning a new language, and to do that, you have to hear people talk in ways that you might not be familiar with or comprehend everything that's being said. This section of lessons will be about getting a grasp on how higher order functions work so some of these words will begin to make more sense to get started. We'll look at Twitter. No, we aren't going to talk about their technology stack algorithms or anything like that. But a tweet that I liked It was by Stephen Lucien ER. He used some emojis to illustrate functional programming with map, filter and reduce, which are the three array methods we will turn our attention to and attempting to understand functional programming over the next few lessons. Let's look at the image we have an image with map filter and reduce to Matt belongs an array of three images. Corn, cow and chicken. The word map itself is a method or a function on an array. Then we have the word cook, representing a function as well as if each item is going to go through a cook function. Remember, a function is like a button is a chunk of code that we can apply over and over again. Ah, function is a process, which takes some input called arguments and produces some output called a return value. So within the function or method map that is attached to an array, we're going to pass another method. It will work on each element of the array, and when the corn is cooked, we have popcorn. When the cow is cooked, we have a hamburger where the chicken is cooked. We have an egg. So map is a method that worked on each item of the array and returned a new array in which each element went through a function. Next, we have the filter method on an array. Our ray this time has popcorn, hamburger and aches. This time, each element of an array is going to be ran through a sort of true and false filter for whatever specifics we want to name in this case is a filter called Is Vegetarian and it's a function. It will return a new array with popcorn and eggs. Yes, some vegetarians might not consume eggs, but this imaginary vegetarian does. So it returns in a raid in which every element has been evaluated, true or false, and the true values are returned to a new array. Third, we have the reduced method. This is the most complex and will spend a good chunk of time breaking it down and explaining it. While map and filter have very specific uses, reduce has lots of customizable flexibility before our illustration will look at a simple execution of it that shows that reduce will go through our array and runner elements through a function that will return one value in this case, both popcorn and eggs, the same final destination in our digestive track. Functional programming and higher order functions are good for composition, putting one function into another function, putting smaller functions into bigger functions. Let's go ahead and begin our functional programming analysis with filter filters and method , a k a. A function on a race. It accepts another function as its argument that will return a new array. Previously, we have inserted strings numbers and Boolean says, arguments in our functions. Now we're passing functions. As arguments for each item, we will have a callback function. Filter calls it provided callback function once for each element in an array and construct a new array of all the values for which callback returns of value. That courses to True, the original array is left untouched. Let's look at the syntax. We have our array, then we have the filter method. Then, within that filter, we're passing it a function as an argument. This is what makes something functional programming passing a function toe, a function as an argument. That function then receives a parameter for the current value of the element. This is required. We then run the code block on the current value, and if it is true, we return it to the new array. All right, thanks for hanging on for so long, we're finally ready to get into some code. Let's create an array with test scores will declare a variable called test scores and a Senate values of 90 to 87 54 63 75 59. Let's create a function expression called passing test will declare a variable called passing test. Well, then the sun it the value of an anonymous function will give it a parameter of tests representing the current element in the array will then enter into a code block a return, a Boolean of true or false in regards to whether a test has a value greater than 60. So this is our function we're going to use as an argument. Let's go ahead and declare a variable called graduation. This array will contain all the passing tests. That means the student is graduating will simply run the filter method on our ray. Within the parentheses, we will put in our argument of the function expression that will run on every element in the array. It will return a true or false value for each element and create a new array in which only the elements that they're true will find themselves in the new array. Another way that we can write this out instead of putting our function expression in, as an argument is, we can just write out our function within the parameter and the result of both are the same . Our test scores array has not been mutated is exactly the same. We now have a new array. What if we didn't use filter? How do we go about getting the same desired result from our test scores array? Let's go ahead and look at the code that it would take to accomplish this. Using a for loop. The first thing we will do is create an array called graduation. The first thing that we will do is create an array called Graduation that we're going to fill with values well, then use a for loop to go through each element in the array, starting with the first element. Our test condition will be as long as their current value for our counter is less than the array length will dive into the code block and create a conditional statement. We will evaluate an expression if test scores of Index zero, which is 92 is greater than 60 in our code. Block will now access our graduation array that we created above. We'll use the push method that pushes air value to the end of the array at this point. Are value for current element is 92. So we push that on to the end of our array. We then repeat the process again and again. To Philip are array with values greater than 60. Now, let's look at these two side by side. Clear code less code and easy to keep bug free. I hope you're beginning to see the benefits of functional programming. All right. Thanks for taking this first. Look with me. A functional programming in JavaScript will see you in the lab to begin to put into practice what we have learned. 3. JavaScript the Basics - Functional Programming: Filter Lab: All right, welcome back to the lab and our lesson. We begin our journey into functional programming along with object oriented JavaScript. This is the second pillar in regards to what is essential to be a Java script programmer. We were introduced to the idea that functions air values, which means that you can pass a function to another function as an argument. This is essential to functional programming, pure functions and higher order functions. The benefit of functional programming is the concept of always knowing what you are going to get. That might be a little unclear at this point. We'll unpack those statements through this section on functional programming. But for now, we'll look at kind of a famous saying about the pitfalls of object oriented programming in any language. The story goes that you want a banana, so you ask for a banana, you get a banana. So far, this is a happy story. But you also find that you got the gorilla that was holding the banana as well. And on top of that, you got the jungle that the Grillo was living in. That's the dilemma that people sometimes face when doing object oriented programming you get far more than you are asking for. On the other hand, pure functions have many beneficial properties and form the foundation of functional programming. Pure functions are completely independent of outside ST and as such, their immune to entire classes of bugs that have to do with shared mutable state. They're independent. Nature also makes them great candidates for parallel processing across many CP use and across entire distributed computing clusters, which makes them essential for many types of scientific and resource intensive computing task. Pure functions are also extremely independent, easy to move around, re factor and reorganized in your code, making your programs more flexible and adaptable to future changes. Okay, that was a lot of theory and our last lesson. We surveyed filter, map and reduce and this lab. We're going to go ahead and focus on filter. First, let's create an array well, then use a loop to iterated, which means to go through all the elements of the array and test for condition to be true, if true, will push them into a new array. Let's build that together, and then I'll have you accomplished the same feat with the filter method yourself Let's create an array called Weather. These are the values were going to measure. We'll create a new array in which any temperature that is above 70 will be pushed into a new array called Go Outside. So let's go ahead and declare. So let's go ahead and declare that go out Saturday and initialize it with some empty brackets. Now we'll set up a four loop are four loop will have three statements. First, we initialize or counter to zero will then set our test condition to ask if our counter is less than our weather array length. If that is true, then we'll go into our co block. We then run into a conditional if statement if index of zero on their ray weather is greater than 70 which in this case it is 72. We have a true value and go into our next code block. We have our new array we created called Go Outside, and we use the push method and fill the argument with Index zero of our weather array, which has a value of 72 which will now go in our new array. We repeat this process again, looping through a whole array. Now, when we checked the value of our new go outside array, we get 70 to 84 90 to 85 72. Not bad. That was a lot of work, though. Here is your challenge. I want you to take that same weather array and implement the filter method to do the same thing. Remember, to run the filter method, you will apply the filter method to the weather array. And then you will pass into the filter parentheses, an argument that is a function in which every element is evaluated to true or false, and the true values are returned to the new A rape. All right, good luck. Go ahead and pause the video. It will come back together in a few moments and find a solution together. All right, how to go. Okay, I'm gonna go ahead and look a too quick ways to solve this. The first is to create a function expression that will return true and false values in regards to what we might consider Nice weather. So now will create our array In one line will declare the variable go outside and a sign of the value of our ray weather with the method filter and the argument of nice weather. Remember, nice weather is a function expression. So we're passing a function toe are filter method, and the result is exactly what we were looking for that had a couple of moving pieces. Let's solve it another way. We'll go ahead and declare our go outside variable, and we'll sign of the value of our weather array with the filter method. Well, then, right out, our anonymous function as an argument right there will give it the current value placeholder of temp. That word temp can be anything. It's a placeholder. It could be the letter X, but for human readability, it helps us to know that we're looking at daily temps. Then for each temple or array, we ask if it is true. If it is greater than 70. Now, when we check the value of our go out Saturday, we get the same result. All right. Now, let's build this out a little bit and face a challenge. With a little bit more complexity, we're going to build another rape. This time. I want you to fill the array with objects. This is something we haven't done yet. We have previously filled arrays of numbers and strings and other primitives, but a raise can also hold objects. Let's go ahead and build that array. Let's stick with the weather of fame. We will phone array with the days of the week and a Boolean in regards to whether we can expect sun or rain will want to return an array with the objects that are sunny days. We'll need to create an array in this case will call it sunny Days. Well, then create a for loop. Our first statement will initialize or counter it. Zero. Our second statement will test that are counter is less than our ray length that will send us into the code block. We will use the conditional statement if we're going to look at the first element of the array forecast. It has an object with two property values. The Property Day with the value of Monday on the properties, son, with the bullion of truth and our if statement, we're looking at the value for the property, son, we're going to use the dot notation toe access that property value. This will return true, so we will push into our new sunny array, the whole element at index one, which is our object with both properties. So we will repeat this through all the elements in our forecast array. And here are the results. Great. Now let's do this again. With the filter method, this is gonna be awesome. Will declare a variable that is going to hold our array will assign it. The value of our forecast array will assign it the value of our forecast array with the objects, including days of the week and billions in regards to whether we'll have sunshine or rain will then pass to the filter method of function will give the current value the name weather. Remember, it could be anything. It could just be X. It just represents the current value in the array that we will be running the callback function on, in this case, each element which happens to be an object in the array. Next we run our code block. The filter method will return to the new array all true values. So in our forecast array, we want to return all the current values in which son is true and because this is already Boolean we don't have toe add any code to evaluate the expression. Let's enter this into our consul and we get the same results, much less code less room for bugs and still very readable. Thanks for taking this first look at functional programming in our lab. We'll see you in the next lesson. 4. JavaScript the Basics - Functional Programming: Map: Welcome back to Java script, The basics and this lesson. We're going to continue our primer on functional programming. We're gonna look at the map method before we get into the practical. Let's shed a little more light on the vocab of pure functions we have used a few times so far. Ah, function is only pure. If given the same input, it will always produce the same output. Let's look at an example, Math doubt random. Every time our Java script interpreter runs this method, we will get a different result. Given the same input, we cannot expect the same output. Even though we didn't pass any arguments into any of the function calls, they all produced a different output, meaning that math dot random is not pure math. Dot Random produces a new random number between zero and one every time you run it. When we asked, the computer for a random number usually means that we want a different result. Then we got the last time the math dot random method has its place, but this is an example of a function that, given the same input, does not return the same output. Let's continue to look at higher order functions. Let's continue by looking at a higher order function named map, Remember and JavaScript functions are just like values like any other value in JavaScript. We can take advantage of this bypassing functions as arguments to functions make sure that starts to sink in with you. We can go ahead and start with Matt. The map method will be attached to an array, just like Filter was in our last lesson. We will then pass it a function as an argument. Remember, that is what makes filter map and reduce higher order functions, passing a function to a function. Every element on our original array will interact with this callback function and result in a new array will filter through away some of the items of an array map, transforms all of the items and returns them to a new array. Let's go ahead and look at a similar rate or last flab. We'll look at days of the week and a boolean of sure false in regards to whether there's going to be son, and then we'll also add humidity. With the number of value in our previous lab, we used filter toe only return days in which there would be sunshine with map, we're going to return an array that works on every element in our array. Remember, each element in our ray is actually an object separated by comments. We're going to transform this array by having the map method worked through each element of our array and create a new array by returning the humidity value. We aren't rejecting anything on a chore false value as with filter. But before we do this, let's do it with the more difficult for loop First will declare A new variable that will contain our ray called Humid, will initialize this array with two empty square brackets. Then we'll make our four loop. Hopefully, this is becoming very second nature to know that there are three statements that will go in your for loop statement. One is the initialization of the counter var I equals zero. Statement to is the test condition that the counter is less than the array length of forecast Thin. Arthur's statement is the update of our counter that we will use once we have gone through a code block. If the test condition was true in our code block, we simply name our new array. We created Humid. Then we do the push method on this array because there were going toe want toe add values into our new array. Within the push, parentheses will place her argument. It is the forecast array at the current counter index. In this case is the object with a key value pairs of day Monday, sun true and humidity 10. Within that object, we put dot humidity, which means that we're trying to access the value of the property humidity. And that is what we're pushing into our new a rain as we go through all of the values of our current array and we pushed them into our new array. We find that humid, overturning array filled with values of 10 101 125 115 and 100. This would lead you to believe that you'll probably want to keep an umbrella somewhere near you for the rest of the week. Now, how do we do this? With the higher order function map, we will declare a variable called humid. This will be our array. Notice how with the for loop, you had initialize a new array and assign it to the variable in an earlier step. Not in this case. Map knows that you are going to create an array var human as assigned the value of our forecast a rain. We will then attach the map method. We will pass a function to map. This is a callback function that will be passed each element in our forecast. A rate will give the function an argument of the current value for each element t uses as it goes through each element in the array. Since we've already used the word humidity for a property in our forecast array and humid for the name of our new array, we use the word wetness to capture how saturated the areas. We also could have just used the word X. It doesn't matter, just as long as it matches what we're going to use in our code block that we enter into. We're going to return. Witness the current element in the array with the property value of humidity and that is it faster, right? Every time you use a map, it's have a for loop. You add about 15 seconds to your life and hopefully you'll see it creates less opportunities to right the wrong code. Let's go ahead and look at one more example using map. This won't be anything different than what we have already done, but hopefully reinforce some of the syntax and language for you. Let's use it on an array of numbers. Let's imagine that we want to multiply all of our numbers by three. We'll declare our array. There's going to collect all of our transformed elements that have gone through the map method will sign it the value of our numbers array on the numbers array. We will use the map method. And because the map method is, ah, higher order function, it means that we can pass it of function because functions are value in JavaScript and values could be passed around in Java, script map is going to go through each element in our array. Our current value is represented by the argument numb. Each element in our array, represented by the current value numb, will be multiplied by three. This will transform every element in our ray again. This is different than filter that deletes values that don't evaluate to true. This passes all of the elements in a transformed state. Our triples array now has a value of 15 30 45 60 and 75. All right, Thanks for joining me in this first look at maps. I'll see you in the lab where we begin to put what we have learned into practice. 5. JavaScript the Basics - Functional Programming: Map Lab: All right, welcome back to the lab. In our lesson, we went ahead and looked at the higher order function map. We'll make it a higher order function is its ability to accept another function as an argument. Map is a method on a race. Unlike the filter method, it doesn't delete elements from the new array based on a value of true or false. Instead, it transforms every element. The map method transforms an array by applying a function to all of its elements and building a new array from the return values. The new Array will have the same length as the input array, but its contents will have been mapped to a new form by the function. Let's go ahead and do some work with map and our lesson. We worked through an array of objects. Then we closed with an array that we tripled. Here is your challenge. I want you to implement the map method two times. This means that you're going to create an array, and at this point you will probably want that array to have number values, then want you to use the map method on it twice. That might sound complicated But in this example, it is easier than you may think. In Java script, it's easy to run multiple methods or functions in a row. This is called method chaining. Chaining methods, also known as cascading, refers to repeatedly calling one method after another on an object at one continuous line of code. This technique abounds in J Query, a JavaScript library and other JavaScript libraries, and is even common in some Java script native methods. I want you to take an array of numbers like in our lesson, you conduct elit much like how we tripled it. Then I want you to change the method map directly to the Then I want you to change the method map directly to that and add one to each number in our original rate. Go ahead and give it a shot, pause the video and in a few moments will come back together and find a solution. All right, how to go. Let's go ahead and create an array of numbers. All declare a variable called numbers and a son of the values of 2468 10 and 12. Well, then assign it a variable that I hope to catch are transformed array that the map method has worked twice upon. If you didn't get it, that's OK, but this is probably much simpler than you thought. First will sign to our new array. The value of our numbers array with the map method attached to that will pass an argument. It's a callback function with the current value of molt that will run against every element . I will return this current value of the array times two. If we were to console, log this at this point, we would get 48 12 16 2024. But remember, we also wanted to add one to our new array. So what chain? The second map method to it, as we describe before, it is a simple as adding a dot than attaching another map method. To that Matt Method will pass a function as the argument. This will be a callback function again that worked on every element of our ray designated with the current value of malt. Again, our code block reveals that against each value of molt, we will add one. Now, when we run the value of double, we get an array of 59 13 17 21 and 25. I hope that made sense. Let's go ahead and take on another challenge. This time I'm going to give you an array of greetings will declare a variable called greeting and a sign in an array filled with the string elements of Hi Hello, Hey. And thanks for the challenge. I want you to transform these elements into an array named Shout. I want you to transform each element into an upper case string. If you aren't sure how to turn a string from lower case to upper case, you can either a Google it, which is always good advice. Or you can be go back to our string lesson in our building block section. Also a solid choice. Are you ready? Wait, there's more. Once you've created this shout array, I want you to then get rid of the first element and save it to a new variable called shout . Hi. If you need help with taking an element off the front of an array, you can go back to our second or a lesson, or feel free to consult Google. All right, go ahead and pause a video and give it a shot in a few moments will come back together and find a solution. All right, How do I go? Hopefully you're able to put this together. There are several moving pieces. You'll find that as a developer in any programming language, the importance of being able to synthesize everything that you are learning. I'm pulling it together. Let's first create an array that transforms our greeting array into a shouting array will declare a new variable called Shout, and we'll send it the value of our array greeting. We will then use the map method on our rape that will go through each item in order A that we have given a current value of salutation. We will then call the callback function that we passed a map and on every element of our greeting or in our code block on each current value, we will return the value with the to upper case method. The to upper case turns a string value into another case string. As we go through each element in our greeting array, we wind up with the shower array. We have upper case. Hi. Hello. Hey. And thanks. Hopefully you're able to connect those dots. If you wanted to challenge yourself, you can now create an array called Lower Case Shout. In fact, let's go ahead and do that to make sure this is sinking in. We already have a greeting array in which everything is lower case. But let's imagine that that doesn't exist. And we want to turn all these strings into our lower case array will declare a variable toehold array called greeting Lower case Well, son of the value of our show array. Well, then attach the map method. We will pass to the mat method, a callback function that will work on each of the current values of our array with the name salutation again. Then, in our code on each car value, we will return the value of salutation with the method to lower case that turns a string into all lower case letters. Now, when we look at the greeting lower case variable, we get an array with all lower case string greetings. All right. The last part of our challenge was to save our high from our shower array to a variable called high shop. If you went back in what start ray lesson or searched on Google hopefully found a solution . What takes an element off the front of an array? The shift method. So we declare a variable called high shout and assigned to it the value of our shower array . Then we will use the shift method to take off the front of the array. We don't have to fill in the parameter. We don't need an argument because we aren't adding anything were simply removing a value off of the front of the array. So when we look at high shout, we get high in all caps. All right, that's all we have. For now. Thanks for taking a first look at the map method as a higher order function. We'll see you in our next lesson. 6. JavaScript the Basics - Functional Programming: Reduce: Welcome back to Java. Script The basics. In this lesson, we're continuing our look a functional program. Specifically, we're looking at the reduce method on a race. In our past lessons, we looked at Filter, which rejects elements based on a true or false value when creating a new array and map, which doesn't reject any elements but transforms all of them into a new array. Let's go back to the Twitter image we saw when we first looked at this section on functional programming, which gives us pseudo code for what the higher order functions. Map, filter and reduce Do for Matt Way. See, there's a callback function working on every element in the array. In this case, the function is cook, which cooked each element a K A transforms them into a new array of popcorn hamburger and so makes Filter, then uses a callback function on each element of the array, called Is Vegetarian and based on a true or false value, returns all true values to another new array. Now on to reduce and this emoji pseudo code. We see that a callback function acts on every element in our ray, but it does so in such a way that our element of popcorn and eggs air reduced to one element in this case, the end of the digestive tract. Reduce is great for list transformation if you can't find a pre boat list transformation method than reduce is for you. The reduced method applies a function against an accumulator and each value from the array from left to right to reduce it to a single value. Reduce method executes a provided function for each value of the array. The return value of the function is stored and then an accumulator. Let's start off by looking at the syntax of the array method reduce here we have array with the reduced method attached to it. We have passed to that of function with the promoters of accumulator current value index array an initial value. The first argument is theater Hume, you elated Result of the reduction so far. If there is an initial value, this will be in the accumulator where we start, also known as the previous value. This is the cumulative value returned through each call back. This is required next we have the current value. This is also required. This is the current value of the element. Next, we have the array index of the current element, followed by the array object the current element belongs to. All right, let's go ahead and look at an example to see how this works. Let's declare a variable called in numbers will sign it a value of the array with elements 123 and four. We'll use the reduce method on this numbers array. We will pass to it the callback function with parameters for accumulator and current, which required an index and there ray object that are optional. We will also attack on the optional initial value. Now let's see what they're do. Smith. It looks like in action under the hood. Let's create a column for accumulator current Value index and a ray object as well is the result to track where we're at because we gave a reduced method an optional initial value that will sit in the accumulator when we get started. Our current value is the number one at index zero of the object rain. The result of our code block of accumulator plus current value is six. Remember, this is like a loop, so we're going to continue to move through our array. We haven't accumulated value of six. Our current value is to an index. One of our array object when we add the accumulator to the current value, we return a result of eight when we go back to our accumulator. Now with the value of eight will add it to the current value of three at the index to in our array. Object with the result of 11. Finally, we'll go through one more time. Our accumulator has the value of 11 added to the current value of four at Index three for a total of 15. There you go, a basic implementation of the reduce method on a race. Now let's go ahead and do this one more time with a little more complex approach. Let's reduce multiple of raise within one array into one. Array will start off but declared them variable, called multi R, which will sign the value of array with three elements within it. Each element an array with two elements within it will attach a reduced method to our multi r variable will pass to it. The callback function with the parameters of accumulator, current value index and array the only value we are returning will be in regards to the accumulator and the current fight. We'll go ahead and demonstrate what is going on under the hood, with some rows and columns showing how reduce works. First in our accumulator, first in our accumulator row, we already have an initial value given tow us. It's an array with the vice of negative two and negative one. We can see in our code block that we're going to return the value of our accumulator in this case negative to a negative one and can Cassin ate it. We learned about concatenation in the JavaScript of building blocks section of the course. Feel free to go back to that or Google the can cat method if you need a refresher. Essentially, in this case, we're taking the elements of the array past as an argument to the cat method and attach them to the end of the array. The method is attached to so when we can cat there array of zero and one an index zero, which is native to and negative one. We get a return value of an array of negative to negative 10 and one when we repeat the process with an accumulator value of an array of negative to negative 10 and one at index one with an array of I used two and three, and we can cat this onto the end of the array for our new return value. We have an array of negative to negative 1012 and three. We repeat this process one more time, returning a final value of a single array with the elements of negative to negative 101234 and five. And that's it. Thanks for taking this first look at the higher order method of reduce for a race. We'll see you in the lab to put what we have learned into practice. 7. JavaScript the Basics - Functional Programming: Reduce Lab: All right, welcome back to the lab. In our lesson, we looked at Reduce. Reduce is ah, higher order function reduced Takes two arguments reduced will iterated through our ray and return one value to us reduces flexible and highly customizable map and filter. We already looked at perform one kind of specific task, but reduce has a high level of customization. All right, let's go ahead and do a practice problem. Let's go ahead and look at an array of objects, all declaring variable called home runs and assigned to it objects with property names for batting order and assigning those properties home run number variables. Our goal will be to add up all the home runs from our batting line up will declare a variable called total homers and assign it to the value of her home runs array and called the reduce method on it. We will pass the reduce method, a callback function Onley this time for the parameters. We won't be as descriptive as we were in the lesson. Functional programming usually keeps it pretty simple. Will use parameters A and B for the accumulator and the current value. Since we aren't going to return the index or array. We really don't need to put them in as parameters as we did in our lesson. We will console log are accumulator and current value to see what they're doing. However, I'll just put the string a cumulative, followed by the parameter that will hold our accumulated value, followed by a string current value with this corresponding parameter. Well, then return what we were looking for. The home runs in the lineup. We'll take our accumulated value as we move through the array and add the current value. We start with zero and 12 then move on to 12 and 21 then onto 33 28 so on. When we return the value of total homers, we get 194. All right, let's go ahead and get started with a couple implementations of the reduced method. With a challenge, I want you to create an array of numbers. Let's use at least five. I then want you to use the reduce method to find the sum of all the numbers. Next, I want you to use the reduce method again to find what all the numbers equal when you multiply them together. And then I want you to do one more thing that might require a little bit of brain power. I want you to use the reduced method to return the largest number and an array that will be tricky. You'll need to use some if else logic. All right, go ahead and positive video and give it a shot will come back together in a few moments and find a possible solution. All right, How to go These 1st 2 challenges probably weren't a problem for you, but hopefully allowed you to solidify what you have learned through practice. Let's create an array of five elements 5 10 15 2025 Let's first fund the some of them all. I will just put reduce on our numbers array will pass it a function with Parameters X and Y . Remember, these are the same as our accumulated value and current value Well, then return the final value after we have gone through the array. When we do a quick consul dot log, we see that five plus 10 is 15. 15 plus 15 is 30 30 plus 20 is 50 and 50 plus 25 is 75. Now let's do the product of all the values in the numbers Array will come up with essentially the same code, but instead of the additions operator will use the multiplication operator. We have five times 10 for value 50 followed by 50 times 15 for a total of 750 and so on until we finish our array with the total of 375,000. Okay, time for a big challenge. This will require you to do some thinking. You are going to use the reduced method to go through our array and return the element with the largest value. Let's look at a possible solution. We'll use a reduced method on the numbers array will go back to our parameters of a cumulative and current value. Then we will run into a conditional statement. Our keyword if is going to force us to ask if the expression between the parentheses is true or false. If it is true, we entered the co block. If it is false, we step over it. If it is true, will return the current a cumulative value if false will return the current value. Let's go ahead and switch up our array for this challenge. Let's change the orders. A 10 5 2025 15 and our first run through our cumulative value is going to be 10 and we'll ask if it is greater than our current value of five. That is true, so we'll return the cumulative value of 10 at this point. But we're going to continue to reiterate through our array, so we will ask for next element of our rate. 20 as a current element is smaller than your A cumulative value that is false. So we go to our else statement returning our current element value of 20. We continue to go through our ray until we return the value of 25 as a single value of the array that is the largest. All right, we'll go ahead and close out with one last example that we will practice together. We're going to use both the map method and the reduced method. Together, we're going to use the map method on an array to return a new array. Then we're going to use the reduced method on that array to return the new value of battery , actually instead of doing this together. Let's make it a challenge. You have everything you need to do this easily. It might take some brainpower and remembering the chaining method we saw on earlier lessons , but you can accomplish this on your own. Go ahead and pause the video, and then we'll come together in a few moments and find a solution. All right, How to go? Let's go ahead and create in numbers. Array will declare a variable and the son of the array with the elements 123 and four. Let's first implement the map method. All go ahead and transform every element in the array by multiplying it by. Three will apply the map method. Tore numbers array will pass to it, a function with the parameter of number to represent every item in the array that we're going to transform. And our code block will return our new array of every element multiplied by three. Our next step is to take all the values of this new array and find there some who will change the reduced method to our current coat. We could also just attach it to the triples variable. If we wanted to work in a less efficient way will pass to it. The callback function with the parameters A and B representing the accumulated value plus the current value. Our tripled values are 369 and 12. And now we're going to add these values together. Three plus six is nine nine plus nine is 18 and 18 plus 12 is 30 and now our triples variable has the value of 30. That is all we have for a lab now. Thank you for joining me and taking a look at reduce an action. We'll see you in our next lesson.