Bite-sized JavaScript

Let's do some codingJs exercises and write some pseudocode

Exercise your body and mind

Today was a beautiful 78 F here in New York City. To boost my mood I went on a long walk, which doubles as my primary form of exercise and transportation. Sometimes the walks are shorter (based on my energy and time), but the important thing is to do it consistently everyday.

Programming requires a similar approach. At web design school Perpetual Education (PE) we historically used the book Exercises for Programmers (see resources section). These bite-sized exercises help expose me to new concepts and build confidence.

More recently I was introduced by PE to a website called CodingJs. While it definitely has its issues -like the instructions sometimes being unclear and the tests being inaccurate- it serves as a cool little “JavaScript gym”.

The problem statement

A problem statement is a description of the problem at hand that can (hopefully) be solved, with whatever programming language you (the programmer) deem most suitable.

Since we are running the code in the browser, we are using JavaScript. We run the code in the CodingJs testing environment so we can see the tests pass, and get that nifty little checkmark on the homepage.

Visited links with checkmarks next to them, indicating completed exercises

The exercise I chose is from the Array-3 section, and is called countClumps. The problem statement:

Say that a “clump” in an array is a series of 2 or more adjacent elements of the same value. Return the number of clumps in the given array.

Examples

• countClumps([1, 2, 2, 3, 4, 4]) → 2

• countClumps([1, 1, 2, 1, 1]) → 2

• countClumps([1, 1, 1, 1, 1]) → 1

Writing the pseudocode

Before we start, let’s make sure we fully understand what the problem statement is asking for. We should find a clump of numbers, which is defined as “2 or more adjacent elements of the same value”.

• Inspect the contents of the array

  • Use a for loop?

    • Start counter at 0

    • Go up to second to last array item

    • Increment counter by one

  • Get current element

  • Get adjacent element

    • Do current and adjacent element equal each other, and did we encounter a nonidentical value?

      • increment counter

      • Has the loop reached the end of the array?

        • We can check this be seeing if arr[i + 1] === undefined

          • If true, return counter

I had some issues with this approach, and didn’t feel confident in the logic. I couldn’t write the logic to increment the counter correctly.

Loops are nice and all, but they can be verbose and hard to debug sometimes. Not to mention unnecessary when we have more modern tools at our disposal.

Instead of using a for loop, I decided to use a different approach by turning the array into a string. I then used a regular expression to check for instances of repeating numbers. Here’s the pseudocode:

• Turn the array into a string.

• Write a regular expression to check for repeating digits of the same value.

  • Use capturing groups, and reference previously captured items. Add a quantifier to check if one or more digit of the same value is repeated.

  • Add the global g flag to ensure we don’t stop looking after the first match is found.

• Call the match method on the newly created string, and pass the regular expression as the argument. It will return an array of matches.

• Return the length of the array of matches.

The code

function countClumps(nums){
  let numsLength = nums.length;
  
  let numberRepeatedRegexp = /(\d)\1+/g;
 
  // \d character class escape represents any digit character, equivalent to [0-9]
  // 1 refers to the previously captured group.
  // the + quantifier says "one or more times"
  // combined, match a number repeated one or more times, greedily ( as many times as necessary)
  // finally, the g flag says don't stop searching after the first match is found
  
  let numsAsStr = nums.toString().replaceAll(",", ""); 
  // turn the array into a string, replace all commas with empty string
  
  let matches = numsAsStr.match(numberRepeatedRegexp);
  // call match method on string, pass regular expression to it
  
  // if the array is empty, or no matches are found return 0
  if (!numsLength || !matches) {
    return 0;
  }
  
  // else if array matches are found , return the length
  else if (matches) {
    return matches.length;
  }
}

What do you think? Was this easier than the loop approach I first attempted ? A lot of people are afraid of regular expressions. They certainly can be intimidating, but they are powerful tools for string matching and replacing.

By the way, it’s worth mentioning I DID NOT write that regular expression in the codingJS sandbox (where the code is run). I wrote it in a regular expression tester called regex101

This is a website that has functionality which allows me to see in real time what text my regular expression is matching. Here’s what it looks like:

The regex101 website, showing the regular expression and matching text. Identical to the solution, with the exception of the m (multiline) flag needed to match the text that spans multiple lines.

How would you have solved this problem? Tell me in the comments

Resources

• Perpetual Education (Web Design and Programming school)

• Exercises for Programmers (Brian P Hogan)

• CodingJs

• Regular Expressions (MDN)

• Regex 101 (Regular expression tester)