Hands On Programming with Javascript array reduce

This video covers use cases and programming problems where reduce higher order function could be useful on arrays. If you like to do a quick refresh on what reduce() method is and how it works, it is covered in How reduce works on JavaScript arrays You may want to watch that first and continue working on the code examples here.

Code

//Example 01
let studentData = ["John Doe", "Some School", 6, 7, 8, 7, 9, 9,-1, "Some School"];
let numbers = studentData.reduce((newArray,cur) => {
    if(typeof cur === "number") newArray.push(cur);
    return newArray
}, []);


console.log(numbers)


// Example 02
let transcript = ['hello', 'there,', 'how', 'is', 'it', 'going?']
let finalTranscript = transcript.reduce((acc, cur) => acc+' '+cur)
console.log(finalTranscript)


// Example 03
let realEstate = [
    {
        id: '3c5f4c26-f048-11e9-81b4-2a2ae2dbcce4',
        name: 'Vancouver Luxury Apartments',
        price: 450000
    },
    {
        id: '3c5f4e9c-f048-11e9-81b4-2a2ae2dbcce4',
        name: 'Calgary Housing',
        price: 330000
    },
    {
        id: '3c5f52d4-f048-11e9-81b4-2a2ae2dbcce4',
        name: 'AGM Apartments',
        price: 300000
    }
];


let total = realEstate.reduce((acc, cur) => acc+cur.price, 0);
let average = total/realEstate.length;
console.log(average);

Full Transcript

0:00 Hi everyone. It's Deeksha Sharma from bonsaiilabs. Welcome to the series on JavaScript. This video today is purely hands-on and we will be covering a couple of use cases where reduce higher-order-function could be useful on arrays. Now if you would like to do a quick refresh on what reduce method is and how it works, I covered that in this previous video. The link is in the description below, so I recommend you watch that first and continue working on the code examples here. So let's start. Let's go through the first problem. We have an array studentData which contains the strings and numbers together. Now our goal is to separate out these numbers into a new array so that we can perform some mathematical operations on it. And this is what our results should look like. So now on our code editor, we already have the studentData array.

0:44 Now we declare a variable numbers, this variable is going to store the results of reduce method that will be called on studentData. The result will be an array of numbers. Now, the first argument to reduce method is a reducer function that takes an accumulator and the current element. Let's call the accumulator and newArray and the current element. The second argument to reduce method is an initial value which we pass it as an empty array, so that accumulator keeps accumulating the values inside this array. Now inside the reducer function we check if the type of current is number, we would like to push them into a newArray, which is nothing but an empty array we passed in the initial value. Finally, after all elements have been traversed, we would like to return this newArray. Console.log is now going to log the value of the numbers array.

1:27 Now when we run it, we get this resulting array and this is what our expected result was. Here's the second variety of problems where reduce higher-order-function could be useful. Let's say we have an array transcript containing these strings. Our goal is to concatenate all these strings into a single one such that we get this result. Now back on our code editor, we already have the transcript array. Let's write the finalTranscript variable, which is going to hold the result of the reduce method. We call transcript.reduce and we write the reducer function which takes an accumulator and the current element. Inside the reducer function we would like to concatenate the accumulator with an empty string and the current element. Now one thing you would notice, we are not passing any initial value and since we are not passing an initial value accumulator, we'll take the first element of the array and starts accumulating from that value.

2:18 Next we would like to log the value of finalTranscript and we do console.log finalTranscript. Now let's go ahead and run the code and there you go. We have "hello there, how's it going?" Now if you notice there is no space between the words, so let's introduce a space and now run it again and there you go. We have "hello there. How's it going?" And every word is concatenated into a single string. Let's look at another example. We have an array realEstate containing objects and each object contains id, name and price for a property. Now our goal is to get the average price of the properties in realEstate array, which should give us back the result of 360K average. On the editor, we already have the realEstate array in order to calculate the average, let's have the total first.

3:06 Let total is equals to realEstate and we call the reduce method. Now the first argument is the reducer function that takes an accumulator and the current value. This reducer function is going to calculate the sum of all the prices for the properties in realEstate array. And we want to keep the initial value to zero so that accumulator starts from zero and add up the prices. Now since our goal is to calculate the average, we are going to divide the total that we calculated above with the length of the realEstate array. And let's now log the value of the average. Alright, so now when we run the program, it gave us 360K which was the expected average. I hope these exercises give you an idea on what problems you could potentially solve by using reduce method on arrays. Thanks for watching this video and if you have any questions, feel free to drop the comments. You may want to subscribe to this channel if you want to learn fast with these short videos. Until then, my friends keep learning and share your knowledge.