Before we dive into declarative methods, first let's talk about what declarative means in this context. Declarative is a programming paradigm, essentially meaning that we are telling the compiler, or runtime, what we want the result to be. Like filter items that contain the letter E. This is in contrast to imperative programming, where we tell the compiler, or runtime, the steps that it takes to get to our result. So that would be like for each item, if it contains the letter E, keep it, but otherwise discard it and continue on. Let's take a look at some practical examples. So let's start out with an array of items. Let's call it fruit. Now let's say that I want to create a new array that has fruits that only contain the letter E.

Let's call it fruit. Now let's say that I want to create a new array that has fruits that only contain the letter E. You might do something like this. Initialize this with an empty array, and then loop through the fruit array with forEach, and then we get an inline function forEachFruit. If fruit contains E, then fruits that contain E push fruit. So now if we were to empty this into the DOM, like we've been doing, includes, not contains. Okay so if we were to save this and then take a look in our browser, we get back four fruit that all contain the letter E. Now how we've laid this out is an example of imperative programming, because we're laying out the steps that the runtime needs in order to get our results.

Now how we've laid this out is an example of imperative programming, because we're laying out the steps that the runtime needs in order to get our results. So we want fruits that contain the letter E, so we initialize an empty array that holds them. Then we are manually looping through each of the fruit array, and then determining if one includes the letter E, and if so, push it to our new array. And then at the end of it, we get our array back and empty it out into the browser. But now in JavaScript, there's some methods we can use that write more declarative code that's easier to read and understand. So instead of this here, we can initialize our fruits that contain E. But instead of using an empty array, we can call the fruit array and use the filter method on it. This expects an inline function where the only argument

fruits that contain E. But instead of using an empty array, we can call the fruit array and use the filter method on it. This expects an inline function where the only argument is the current item in the fruit array. What filter does is loop through each item in the array, and depending on whether true or false is returned back from an inline function, it either keeps or discards that item in the array. After it's done, it then returns back its filtered array to the variable that we've declared here. So using what we know about inline functions and arrow functions, we can keep this on one line. Now remember, we're only dealing with one argument here, so we don't need parentheses around the inline function. So we can just use the variable for it, which we can just set as f. And we are also just returning something, which means that we don't have to enclose this in curly brackets, and we can keep it on the same

the variable for it, which we can just set as f. And we are also just returning something, which means that we don't have to enclose this in curly brackets, and we can keep it on the same line. We can also exclude the return keyword. So now we just want to return items back that contain the letter E. So in our case, that's just f includes E. So everything that we did here has been shortened down into this single line here with this method filter. And we can test this out by going to the browser and seeing that we have the exact same result as before, except now we have a much cleaner syntax that describes the data that we're getting back instead of how to get that. So while we know that filter loops through each item and determines whether or not it should keep it or discard it, we're using declarative programming here because we're telling the compiler fruits that contain E should just be fruits that have been filtered.

whether or not it should keep it or discard it, we're using declarative programming here because we're telling the compiler fruits that contain E should just be fruits that have been filtered where a fruit contains the letter E. Now there's a couple other helpful array methods that let you write declarative code like this in ES6. For example, reduce takes an array and returns back a single value. So let's say that we had an array of users. I know we've been doing that a lot in this series, but it's pretty useful. And we'll say that each user has one of these star attributes. That's an integer. Now let's say that we wanted to get the total number of stars from all of the users. Instead of doing something imperatively where we initialize this with zero and then add on the amount of stars for each user in a loop, we can use reduce and do this declaratively. So users.reduce. And this inline function requires two arguments,

and then add on the amount of stars for each user in a loop, we can use reduce and do this declaratively. So users.reduce. And this inline function requires two arguments, so we're going to need parentheses. The first one is called the accumulator. It's usually defined as ACC, but it essentially means the value that will be returned back after this function finishes up. So I kind of like to keep this in line with that and so I'm just going to declare this as stars. And the second argument is the item in the array that we're currently performing an action on. So in our case that would be the user. Now what we have to do inside of this function is manipulate the accumulator in order to get back that value that we want. In our case we are adding whatever users stars they have to the main stars collection that we get back at the end of the reduce method. So for that we just use stars, whatever the current value is, and we add

are adding whatever users stars they have to the main stars collection that we get back at the end of the reduce method. So for that we just use stars, whatever the current value is, and we add on to it the user's stars amount. And reduce itself also needs one other argument, a default value, which will provide it with 0. If we exclude that and just have this inline function, if there are no users available, reduce throws back an exception because it can't reduce anything down. It doesn't loop over an array and it has no default value to provide back to the user in the total stars variable. So by providing it with 0 here, if there's a case where there are no users it will return back just 0. So now let's output this underneath what we have above in the DOM and see if it works. Okay and we see the total stars is 15, which lines up with the numbers that we have here. And I'll do one more example, and this is probably my favorite and

in the DOM and see if it works. Okay and we see the total stars is 15, which lines up with the numbers that we have here. And I'll do one more example, and this is probably my favorite and most useful ones, and it's something called map. Let's split these up with some comments before I continue. Okay so map, like filter and reduce, loops over items in an array. If we use the same array that we have up here, this users array, let's say that we wanted to get back just the emails from the users, but we wanted them in an array. So reduce wouldn't work because that's not a single value. Instead we can use map. So if we create a variable called userEmails, and that's associated with users and the map method. Like our other two, this expects an inline anonymous function. And like filter, its only argument is the current item in the array. So for us that's just one user, and we can exclude the parentheses. Now unlike filter, where we

inline anonymous function. And like filter, its only argument is the current item in the array. So for us that's just one User, and we can exclude the parentheses. Now unlike filter, where we return a boolean true or false value, map works with whatever we return back. It will create a new array of those items. So we have three Users. So in here if I just return back a string that said tests, I get back an array that just contained three test strings. But what I want is the user's emails. So instead what I can do is just return back the user's email. And that's really it. So now if I dump this out into the DOM and take a look in the browser, the emails that we had for each of the Users are displaying from the array. And the reason that I say map is so helpful is because I've run across a lot of cases where I need to pull specific items out of an array, especially a large nested array that

the array. And the reason that I say map is so helpful is because I've run across a lot of cases where I need to pull specific items out of an array, especially a large nested array that comes from something like a JSON API, and create a separate smaller array with just specific values. Now these methods can really help clear up blocks of code that traditionally used ephemeral variables and loops, and instead now give you a much cleaner syntax that's easier to understand at a glance. Next up, let's take a look at breaking code into blocks and importing methods using modules.