Jonnie Grieve Digital Media: Website Blog.

Archived Posts: JavaScript Archives – Jonnie Grieve Digital Media posts.

100 Days of Code: Day 6 Write-up

Project 5 – Using forEach, iterate over the percentages and store all percentages over 50 percent in the array upperRange.

We’ve reached Day 6.  I did try for “Day 6” being the Saturday just gone however numerous things conspired against that. So I wrote most of this write up a few days ago.  It was generally a successfull attempt; barring a couple of quirks I’ve managed to get through both of these JavaScript forEach challenges.

When I started this, I  was either returning an empty array in my console.log or the number 30.

With things still fresh in my mind from previous sessions, I’m testing for values below above 50 in the array and discarding the rest and trying to use the parameter variable to store the results of calculations.

I felt like I was very close but still far away from the answer.

I certainly have the understanding this time of what needs to be done, but implementing it is the tricky part.  I’ve attempted it enough times so let’s see how the solution compares.

This was perfectly acceptable for the challenge.  But inside the code block was the trouble.   I tried to apply thought and the process of elimination to get the answer.   I tried every combination… except the right one.


Since we know we’re calling the forEach method on the percentages array. we don’t need to pass it into push method.  We use the current value parameter for that.

SIX  Using forEach, iterate over the colors array and store the hex colors that start with the letter F (ex. #FF0000) in the array filteredColors.

Again, this challenge is very similar to the previous one. Starting with an array of hexadecimal strings and an empty array for the filtered values to be added to.

Thinking back, I can’t remember too much trouble getting the right answer. Except that for whatever reason, I couldn’t get the console.log to appear in the terminal.  console.log(filteredColors); should return the filtered colours but for no reason that I can see nothing happens. I verified the accuracy of the code having applied it to the code challenge checker.

I’ve even passed it through with 2 alternative answers… a solution that uses the startsWith() method and the other with charAt().

That said, when I bring the code over to a local file on my laptop, it’snot adding anything to the new array even though there’s are no runtime errors in the code.  I’m close, but it’s more than that, I’m seeing a runtime error returned for the first time.  My thought is that it might be a deprecated feature in node.js.  My version of Node is 8.6.0 but in Treehouse Workspaces, it is functional in version 5 of Node.

The final version of my solution uses a shortenecd syntax of the charAt()  method.


100 Days of Code: Day 5 Write-up

Whether I’ll have time to commit to 100 continues days of this challenge I’m not a sure. But I intend to complete the 100 days. So for the final day of the working week, I went back into my exploration of the JavaScript foreach method. I tackled the third and fourth of a set of 7 JavaScript scenarios.

Challenge 3 – “Turn the number of strings from an array into floats and add them.”

So in this problem. there’s a string array and a variable with an integer of 0. Very quickly I realised I’d needed the parseFloat() method; the method that converts values to the correct data type.

Did I need to go further and use a reducer? My initial thought was no, as these challenges (by my memory) don’t cover the use of one of those advanced array methods.

I felt like I was, no matter how much I look at the code, in need of some help. So before I talk about how the walkthrough went, and if it made sense to me, this was my attempt. For context, this is the array I needed to call foreach on and my attempt.

I was closer to the solution than I thought.

With stringPrices.forEach()  – apparently I didn’t even need to assign the call to forEach to a variable, the call to foreach would hapilly exist on its own.

I correctly remembered parseFloat to get the values in the proper way.

So we use stringPrice as the parameter of the anonymous callback function as the way to change the data type of the values in the array. Which means we’re now ready to start totaling up the numbers.

To do that,  we simply define a constant variable at uses the parameter to pass the values from the stringPrice  array to pass in the values.

It’s a little ironic how simple the calculation is; adding the value of one variable to another, which is what has happened in the next part of this challenge. But in this case, I was thinking about more complicated code than it needed to be.

I was on the right track to using += to output the sum of an array, I was just going about it the wrong way.

The use of stringPrice  also important and relevant to how the code works. I talk more about that further down in this post.

Challenge 4: Using forEach, iterate over the alphabet array and store each letter in the array noel except for the L character.

This challenge started with an empty array and string with the split() method called on it, which turned it into an array of single characters called alphabet.

My thought with this one was to use push to populate the empty noel array with everything initially, then identify the position of the “L” value in the new noel  array attempting to remove that index from the group.

Again, I don’t seem to have an issue working out which methods I need to use to solve a problem, and I had an inkling I should have used a condition statement. But, this is what these practice sessions are all about. To get me thinking about what can be done with these methods and practice with theme.

The main solution (I’m sure there are others) is below.

For me, the biggest takeaway is this….If I wasn’t sure about the purpose of current value parameters in these callback functions,  I am now. It’s the way JavaScript iterates values in loops by applying them to a temporary variable.  It’s a variable of any name that can be used in calculations.  That knowledge, that refresher is more valuable to me than memorising any piece of code.

100 Days of Code: Day 3 Write-up

For day 3 of “100 days of code” challenge, I turned my attention to practicing forEach loops in JavaScript. All I’m doing today is running through some practice scenarios that use forEach methods.  I’ll do a couple today, for this post.

The first scenario, taken from Treehouse is this…. “Using forEach, add together all the elements in the numbers array, and store the total in the variable total.”

Very straightforward. At first, I tried something like this…

Off the top of my own head…. and it was wrong. I think I was thinking about forEach in PHP, or another iteration method in JS. Anyway, it was wrong.

What I’d wish I’d thought to do was check out the documentation. I’d have seen then, that the forEach method, when assigned to an array works by taking a callback function.

Using the new ECMAScript syntax the forEach method looks more like this:

So you have a given array which you call forEach.

– if you want to iterate over an array, that, in its simplest form is how you would do it.

What you then need is an anonymous callback function with a variable as an “iterator” variable.

Taking all this into account, my solution to the challenge was as follows.

Another solution is

numbers.forEach(number => total += number);

It’s essentially the same solution. I merely opted to use curly braces to make clear where the functional part of the anonymous function takes place.

The second challenge, as expected was a little more complicated.  The task said, “Using forEach, copy only the first 2 characters of each string in the days array and store the abbreviations in the dayAbbreviations array“.  But armed with the refreshed knowledge of how to use the method, I got started with

Once I got that far though, I got stuck.

Since there’s an empty array alongside that code, it seemed to me we want to populate array initially with the values of the days array. Then, of course, we need a string manipulation method to retrieve only the first 2 characters of each array value. So I opted for push and substring, hoping to cut array values from the beginning of each string to show only 2 characters.

Substring was okay but it turns out slice() was a better method to use. I’m quite pleased that I thought of push and string manipulation. However my implementation needed a lot of work. The final solution was as follows.

Again, I added console.log() to the function to prove the values were being correctly output.

Those “am I cut out for this?” moments

Am I cut out for this? Why am I even bothering? How can I prove to a client or an employer that I am capable of producing their brief if I’m not capable of doing the simple things?

These are questions I ask myself frequently.

I’ll get the positive bit over with first of all.

Yes, I am cut out for this. I am bothering because I am doing the thing I love the most. I am capable of more than I give myself credit for.

I love making websites and writing code and I love learning more about how to do it better than I was doing it yesterday. I love learning about what’s out there. But more often than not I am finding myself going back to old ground just to refresh myself on what I have learned.

I have to remind myself and retrace my steps just to keep myself on a level playing field with the rest. That’s not me putting myself down. It’s just the way it is. And I’m not saying either that neuro-typical people don’t also struggle with learning coding; taking in what they have learned and having the confidence to put it into practice. But I’ve got what others have in spades.

Let me tell you all what has happened in the last few days that has made me question my abilities yet again.

An Android I was attempting to load a view (or a screen) from the home screen of an app I was learning to develop. There was a problem that not only prevented the screen from loading. It requited one piece of code for each button that loaded the screen.

The answer to the problem was staring me in the face but I couldn’t see it.

In a separate JavaScript project I had a React proptype (i.e. a property of a component in React.js project) declared as a number but was being read by React as a String property. And I had no idea why since the property was clearly defined as a number property.

The answer to the problem was staring me in the face but I couldn’t see it.

In both cases the answer was simple and really was staring me in the face, just screaming “Come on Jonnie, this is easy, work it out”.

But I couldn’t. My brain was just not latching on, no matter how many times I went back and forth through the project. I needed help and the answer spelt out to me by a second pair of eyes.

Of course, asking for help when you need it is never a bad thing. But moments like those, are crushing. The realisation that the bugs in the program were entirely your own doing and easily fixable. And so much time was wasted before finally seeing the light.

This is why sometimes I question whether I’m the best person for this. Because I lack the ability to think outside the box enough times and clearly look at a problem.

There’s only so many times you can look at an error message and fail to read between the lines and take the right action based on what it says.

I do have an “excuse” so to speak for these issues in my Dyspraxia as it influences so much about the way I think and see things but it doesn’t make things feel any better when the self doubt kicks in.

But that’s what makes us all stronger isn’t it? The collective experience of our failures and low moments.

I continue to be motivated by my goals. To learn to be a better developer and programming thinker; to build my business and achieve my dreams.