DEV Community: Carl McIntosh

Map(), Filter(), Reduce()

Carl McIntosh — Thu, 03 Dec 2020 16:48:02 +0000

Advanced Array Methods

Filter, Map and Reduce are 3 extremely powerful array methods that can take a lot of the burden off of loops in your code. They will also make your code cleaner and easier to read.

Filter

Let's say you have an array of items like above and you only want to keep the items with a number above 5. A for loop, if statement and .push() array method would reach that goal.

You would need to define a new array for the items to go, so that the original array stays intact. The for loop then iterates over the length of the array and pushes the index that matches the condition in the if statement into the new moreThan array.

The filter array method takes away a lot of the effort and leaves much cleaner code.

Filter takes in a callback function with three arguments.

the current item,
the current index - Optional,
the array that filter was called on - Optional

For the majority of cases you will only ever take in the current item so for these examples I will exclude the latter two arguments. if you wish to read more about the other arguments, check out the MDN docs on the subject.

With the filter method, there is no need to define a new array as all the work is down by the filter method. There is also no need for the for loop and if statement as the filter method will visit each item and return a new array based on the retuned condition. With the filter method the return statement must be a boolean or else you will encounter problems with your code.

To make this code even cleaner we could also use an arrow function instead to provide an implicit return.

const moreThan = items.filter((item => item > 5));

Map

The map array method will loop over an array and produce a new array transformed by the callback function it takes in. Like the filter method it takes in three arguments

the current item,
the current index - Optional
the array that map was called on - Optional

Again I will focus on just the current value but more information can be found here.

Like the filter method, map will loop through each item in the array and return a new array based on the condition give. Unlike filter this should not be a boolean.

The second example here shows how you can change the array from one of strings to one of numbers. Map has looped over the array here and returned the length of each word instead.

Notice how for the third example here I am using the same array as the second example. The original array never changes when you use these array methods, which is important for reuse-ability.

If you are not using arrow functions, you will need to include a return statement or else you will end up with an array filled with undefined.

Reduce

The reduce method works differently to the previous two methods, in that you're not limited to returning a new array. You can 'reduce' the array down to strings, numbers, objects etc...

The reduce method takes in a callback function that has 4 arguments. Unlike the map and filter methods, where only one argument was essential, two of these arguments are essential for reduce to work

the previousValue - Also known as the accumulator
the currentValue
the current index - Optional
the array that reduce was called on - Optional

As well as the callback function, the reduce method can also take in an optional value to indicate the initial value. This is because at the start of the array there is no previous value so it acts as the beginning of the loop. If this was not there, the callback function will take the first value of the array as the previous value, this value then acts as the start of the loop. This can lead to some issues, which I will explain. The best practice for the reduce method is to include an initial value.

The classic example for the reduce method is to add all the values in an array to 'reduce' it down to one total sum.

The initial value at the end (0) makes sure the total starts with 0. If it's removed the total will start with 12 and not include it in the final total. This will result in the same value at the end. Great!

However if we wanted to do something different with our reduce function, like add from a particular number, then the initial value has to be included to start the total in the correct position.

Say you wanted to subtract the array values from 100, you would need the initial value, otherwise you will start subtracting from 12 and return -26.

There is nothing stopping you from using reduce to combine words instead of numbers.

Finally, I will show one example where you could use all three of these functions at once using an array of objects.

First the shopping list is filtered, the condition looks at the price key in the objects and excludes everything that is not below 2.5. This is then mapped and only the price key is returned, this can then be reduced by adding the values and returning this number.

Conclusion

My First React Custom Hook

Carl McIntosh — Tue, 24 Nov 2020 13:17:03 +0000

Premise

I've created a simple counter in React that increases and decreases a number, using the useState hook in React to pass down props to the buttons. I wanted to create a hook that showed the previous total to the user

It uses useRef() to store the current value. This is then placed inside a variable. The useRef hook returns an object with one property (current) You can read more about useRef here https://reactjs.org/docs/hooks-reference.html#useref

usePreviousTotal

I've also used a useEffect hook as I'm reaching inside the DOM to grab the current value, this is stored in the dependancy array as I only want to render this when that value changes. You can read more about useEffect here https://reactjs.org/docs/hooks-effect.html

Now all that is left is to import the hook into the app.

And that's it. Look more at the React docs for more information.

School of Code Day 2

Carl McIntosh — Tue, 22 Sep 2020 17:47:16 +0000

Most of today was spent learning about objects and arrays. The beginning of the day was a recap of the functions and loops we were working on yesterday, moving onto objects and how they function. One thing that stuck in my mind was how blank objects are are not equal to each other, they are uniquely identifiable while being empty. We learnt about dot and bracket notations and also nested objects. In the afternoon, we spent time on arrays, declaring, reading and looping them. We finished off with a great talk by Joe (sorry I missed his last name) who talked about our hero journeys.

School of Code Day 1

Carl McIntosh — Mon, 21 Sep 2020 16:57:29 +0000

Day 1 over and my brain is frazzled, but in a good way. I've learnt quite a lot and feel the need to understand it a little bit more before the day is done.

Today we learn't mostly about functions although had some introductions to the data types. (Strings, numbers, booleans, null, undefined and objects). Functions I need to work on, I am having trouble getting to grips with the loop functions, but i'll get there.

Career Change Into Tech

Carl McIntosh — Mon, 21 Sep 2020 16:56:46 +0000

Background

I'd been bored, unfulfilled and getting slightly complacent in my job. It may sound big headed to say, but it was true that I could (figuratively) do my job in my sleep. I had done it for 15 years and I had definitely hit a ceiling. There was no 'Senior Print Production Manager' job to be had, every few years the company added some new innovation and new products and I just absorbed all the new information and carried on.

The past couple of years, I had become disillusioned with my role. Upper management were not taking my ideas on board and I was tasked with more and more work because they knew I would just get on with it and the job didn't challenge me in a positive way. It got to the point where I just wasn't looking forward to going into the office anymore.

I began to take an interest in coding, at first I just wanted to see how websites worked so I found a Udemy course that gave me the beginnings I wanted, unfortunately I didn't have the time to commit myself fully into the subject so the course tended to be a start stop activity when I had time, I initially applied for Cohort 3 of School of Code, but didn't continue with my application as I wasn't in a position to quit my job and learn full time.

Around a year ago in my company cuts were starting to be made in all areas of the business as the company tried to save money. ( I should say that my company mainly printed products for schools) Schools were ordering less and less. This is where my complacency came into play a bit. I was so good at my job, and the company in no way had anyone who could take over what I brought to the table, but I still didn't see the writing on the wall. Then Covid-19 happened.

Furlough

I was furloughed, which wasn't surprising as the schools had all closed and so there would be no orders coming in. I used the extra time I had to look more into coding and found a great interest in the subject. Being furloughed I should have used the time to knuckle down and get firm grasp on the subject, that's not what happened. Having been working full time or in full time education for pretty much my entire life (I went from school to university and a part time job to full time employment) i decided to take some downtime. I spent time learning the keyboard, playing way, way too much Playstation and a surprisingly large amount of time fishing. I was in alien territory as I had never been unemployed.

Again this is where the complacency starts to creep back in as I fully believed that once Covid was under control I could go back into my job and everything would go back to normal. I was in constant contact with my employer who assured me that everything was ok with the business. Then one week it wasn't.

I received a call from my boss saying that we needed a meeting, during the first of what turned out to be three meetings, I was told that my job was at risk of redundancy. At that point I knew my job wasn't at risk, it was already gone (the third meeting was them telling me I was made redundant). I was asked the normal questions of whether I had any ideas of how the company could save money, I offered suggestions on how they could raise the companies profile,
new product ideas which they hadn't taken on board before when I suggested them and I even offered to take a pay cut, but I already knew they had made their minds up and this was them doing everything 'the legal way'. A lot of people may have felt like it was a punch to the gut to be told their job was at risk. I felt, almost a sense of relief, I was being forced to take a look at my working life and make some decisions.

The Next Step

You may think at this point that I would finally follow my dream of becoming a full time coder. You'd be wrong. I was trying to think practically, I had a full time job which was coming to an end, I have bills and a mortgage to pay and I was on what I would call decent money, so to swap that to pursue a career in a field I had no expertise in would (I believed) be foolish. After finding out I was being made redundant, I made a plan in my head. I had a three month notice period to work off and I was put on gardening leave so I had all the time in the world to apply for jobs, which I began doing. I updated my C.V and applied for positions I felt I would be suited for. Let's call this 'panic mode'. The problem with being so loyal to one company for your entire career is 1. The notice period, which in my case was 3 months. 2. The lack of experience. Yes I had 15 years experience as a Print Production Manager but I had already decided that I did not want to get back into that field. This was my fresh start, so it was all about finding what I had in transferable skills to take into a new role. This is where I was finding problems, transferable skills are a great thing to have, but a lot of jobs that I found interesting were not looking for transferable skills, they were looking for actual skills. It got to the point where I was applying for jobs and being told I wasn't moving forward or recruitment agencies telling me they didn't have anything that fit my skills or just not getting any response at all. This is when I saw the School of Code were preparing for another bootcamp.

School of Code

I had followed the School of Code since I applied for the 3rd Cohort about ten months previously. On that occasion I took time to make my avatar as part of the application but didn't submit it in time. At that point in my life I was working long hours and didn't believe I was at the best point to move on with the application. When I saw that they were putting on another bootcamp I instantly applied and submitted my avatar, I figured I would see what the next step of the process was. Once I had submitted my video answering questions about myself I figured that would be as far as it went, when I made it through that, the next stage truly opened my eyes.

The scratch project truly was an amazing thing to put into the application process. After watching the CS50 video, and completing the scratch project that followed, I had decided that this was what I was going to do and I would do anything to get there. I started looking into other bootcamps I could finance myself as i never believed I could get through all the application stages. I started up the Udemy course again and found different apps to help with my skills. I figured I had my redundancy money to fall back on to help finance any course I ended up doing, but I made the decision to make the career jump.

Now

Now, I wouldn't be writing this blog post if I had not been successful. It's the right time for me to be doing this and in the grand scheme of things everything seems to have fallen into place at just the right time. If I hadn't had been made redundant at that exact point I would not have applied and be changing my career now. I'm beyond excited to be starting this journey and will give it my all to make myself successful.