pndcode

[pndcode]

Confirmation Pop-up One Liner

Here’s a simple one-liner for providing a confirmation box in React:

[pndcode]

Find the Longest Word

Introduction

Keeping in line with the previous post in which we have explored a novel solution to the FizzBuzz challenge, here we will have a look at another basic programming challenge: to find the longest word for a given input string. In its simplest solution, this challenge requires a basic understanding of loops; particularly how the iterator binding behaves. However, I will also be providing two more alternatives which use .reduce()  and .sort(), respectively.

As in the previous post, I will first introduce solutions which are standard for this exercise, then show a novel approach which I devised.

Basics

Regardless of the approach, the first step in this challenge is always to apply the .split() method to the input.

The .split() method divides a string object into an ordered list of substrings, places these into an array, and finally returns the array.

The split (or division) is performed by virtue of the parameter (so-called separator) provided in the method call. It is common for the parameters provided to be either (’’) or (’ ‘). Please note that there is a subtle, yet fundamental difference in the two. The former returns individual characters from an input string, whereas the latter returns individual words from a string. You may also pass a regular expression as separator.

For Loop

The most popular approach to this problem starts by declaring a binding with the let keyword, to which we assign the split of the input string so that it returns the individual words.

We then declare a further ‘counter’ binding to which we assign the value ‘0’. Through this binding we will keep track of the word counter through every iteration in the loop. Finally, we declare ‘result’, the value of which is an empty string which will later take on the value of the longest word.

We iterate through the entire length of the split string, then branch into a conditional statamente based on the comparison of the iterator and the counter, which is 0 at the beginning; counter then takes on the value of the .length property of the iterator. The loop continues until the highest value is found.

Finally, within the conditional statement nested inside the loop, result takes on the value of the longest iterator string and is returned by the function.

For the input:

findLongestWord(”All along the undertow, is strengthening its hold! ”);

The output should be:

strengthening

What is the type of result and why? How can the code be changed so that it returns the result along with the word count?

Reduce (found at FreeCodeCamp)

The .reduce() method works by boiling down a collection of values into a single value. It does so by executing a user-supplied iteratee callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The parameters to be passed to the iteratee function are articulate and the functioning of the method complex, so I’ll just recommend you read the relevant documentation.

For our purposes, let’s simply keep in mind we are using the first two of the four possible parameters to be passed to the iteratee function, namely previousValue and currentValue, as referred to in the documentation.

As in the previous solution, we declare a binding which holds the split of the input string; however, in this solution, we may go one step further and apply the .reduce() method directly. The .reduce() method takes an iteratee function as a parameter, which in turn takes two paramaters, longest and currentWord. Furthermore, we provide an optional initial state as a second parameter to the  .reduce() method in the form of an empty string. This allows us to have the iteration performed by the iteratee function take on the value of the longest string through the empty string, which is determined by a simple comparison written with the ternary operator syntax.

Finally, we return the longest word.

For the input:

“Halleluja , Winnie Pooh! ”

The output should be:

Halleluja

Sort (partially inspired by FreeCodeCamp)

So far we have returned only the longest word in a string. Let’s have a look at a different approach by returning an array of sorted results in descending order.

We begin with the same approach as in the previous solution, only this time we call the .sort() method on the split string. The first point to keep in mind in this approach is that we need to sort the output in descending order so it will return the longest word first. We do this by having the function parameter within the .sort() method the length of the second parameter provided to the function parameter minus the first parameter (i.e. b.length - a.length).

Finally, we return the longest word.

The output for:

findLongestWordOne('Howdy, Winnie Pooh! That is a beautiful honey pot.')

Will look like this:

Conclusion

Finding the longest word in a string is an interesting challenge which can be solved with several approaches and has the benefit of walking you through a series of methods to solve it. In my final solution I provided an additional gimmick on top of the traditional approach which returns a neatly sorted array of results.

Consider that another popular approach is to simply return the .length property of the longest word, i.e. the number of characters of the longest word. How might we achieve this?

Thank you for reading, let me know your thoughts!

[pndcode]

FizzBuzz Function

Introduction

A popular programming challenge for aspiring programmers is to write a so-called ‘FizzBuzz’ program. It typically requires a basic understanding of binding declarations and branching code (i.e. conditional statements ), as well as familiarity with the mathematical concept of remainder.

Basics

Given a numerical input, the program should log a different message for each number depending on whether it’s divisible by either 3 or 5 or both 3 and 5, respectively.

Find the pseudo-code for this operation below:

JavaScript implementation

A simple loop-based JavaScript implementation may look as follows:

Which will produce output resembling this one:

...

2 3 Fizz 4 5 Buzz ... 15 FizzBuzz

...

and so on.

NOTE: The ouput varies for each of the two variants. How does the output differ and why? Hint: consider the initial state of the loop and how it is incremented.

FizzBuzz Function

A more interesting approach is to write a function which takes an input range and provides a ‘FizzBuzz’-feedback for each relevant number:

The Array.from method creates a new, shallow-copied Array-instance from an array-like or iterable object. In this case, we are creating an Array-instance from a constructor Array object.

When the Array constructor receives only one argument, it creates an empty array with the length property provided by the numeric argument.

Hence, the Array.from method is needed to create an array containing the range of numeric values originally specified as the length property through the single argument provided to the Array constructor. Because the Array.from method works with objects with a length property and indexed elements, it takes the element and its index as arguments. Every element at a given index maps to the actual numeric value needed to create the desired content for the newly created Array.

Finally, we increment the index argument by one in the arrow function to include the numeric value intended as the highest value in the range provided as an argument (otherwise it would create an array of numbers up to the numeric input value, without including it).

The remainder of the function body is quite the same as the one suggested for the simple loop-based approach.

Conclusion

FizzBuzz is a simple algorithmic problem to test whether an aspiring programmer has understood some of the basics of a given programming language. In this brief analysis, I have tried to suggest a more interesting approach to this problem by extending its scope to offer the possibility of a custom input range.

The Array.from method is a simple yet powerful tool to convert objects to arrays. Working with an Array constructor object exemplifies an interesting path one may implement to transmute the length property into numeric values.

Overall, challenges such as FizzBuzz always offer an interesting opportunity to train your computational thinking skills and devise novel solutions once you have mastered the simple approach.

Let me know your thoughts on this and follow me for more content!