DEV Community: JEFFREY M JAMES

A shallow plunge into DeepEquals

JEFFREY M JAMES — Mon, 18 May 2020 06:56:16 +0000

With nights taken up learning and writing React, Angular JS, and Backbone, my morning toy problems have been a welcome distraction this past week. And from once, not so long ago, being fearful of recursion - I've gotten to really enjoy these challenges. Here's the most interesting recursion toy problem I was presented with this week - Deep Equality.

Here are the rules:

---Write a function deepEquals that takes in two objects and returns whether
---or not the two are deeply equivalent. This means the structure of the two
---objects is the same, and so is the structure of each of their corresponding
---descendants.

Easy enough right? Let's get some IOCE out there to help us out:

Input: two objects
Output: boolean
Constraints: there's a test that says not to use JSON.stringify
Edge Cases:

What to do now? We are going to have to go into an object and check for equality - then we're going to have to go into any nested objects and check for equality, and if that object has another nested object... and so on. Smells like our old friend recursion. So let's get this set up:

The boolean is going to be returned as true unless we have any reason to change it to false. We've also got the bones of our recursion and the call to it on line 12. Now it's time to build out our recursion. The first thing we should check is to see if the first layer of the objects have the same number of keys. If the second object had more keys than the first, it could trigger a false positive (and there is definitely a test for that!). Change the boolean to false if they aren't the same length.

So now that we know the lengths are the same, let's compare actual key/value pairs. We can run a forEach loop on one of our objects. If that key does not exist in the other object or the value is not the same, we need to change the boolean to false.

Else - if we've made it this far... let's check the typeof on the value of the key to see if we're still dealing with an object. If we are, we need to keep going... let's call the recursion on this object.

So once our recursion is finished, our boolean is either changed to false or it has not been - let's return the boolean to complete this exercise.

What a difference a few weeks makes. Recursion has gone from being my sworn enemy to an arrow in my JavaScript quiver. If you're not there already, with a little patience and diligent work you soon can be.

Rock, Paper, Scissors: A Recursive Jaunt

JEFFREY M JAMES — Mon, 11 May 2020 04:21:41 +0000

Since being introduced to recursion, I've wanted to dig deeper into the subject and see the process more visually. Maybe if I can visualize it, it will come more naturally? So enough of kicking that can down the road... let's take the time to look at this recursion problem called Rock, Paper, Scissors!

With this Toy Problem, we are are given an input of n - which represents the number of rounds a single player will play paper, rock, scissors. We are asked to return every different possibility one person could throw as an array - and all of those arrays will be within one larger return array.

If we knew n, we could potentially skirt the rules and use nested loops, but alas... sounds like our old friends recursion. Put simply, recursion is when a function calls itself until it doesn't anymore...

Here, we're going to create an array and use a recursive function to build up that array until we return it at the end - let's get set up.

Boom. There's an array and there's a return statement for the array at the end, after we build it. What else would help? Well, let's throw an array out there that has all the possible throws - rock, paper, and scissors. Also, we know a recursive function is coming, so let's get that staged.

The other new things you might notice here are the actual function call on line 51 and the function parameters on line 46. Each result array that we are going to add to 'differentThrowCombos' to return will be built up from the empty array on line 51 by being inserted for the parameter of the recursive function. The roundsToGo is going to count down the rounds until it is decremented to zero, by which time it will be an array of 3 items and get pushed into the differentThrowCombos array.

So now let's see the magic! ...after we look at one more pic to see the recursive case. The loop will come to a close when 3 items have been concatenated into an array - we'll know this because the rounds have been decremented to 0. Let's push it to a results array! I feel someone will be upset if I don't utter "base case"...so there it is.

So, let's take a look at the recursion and then we can break it down a little further:

*For much of the following explanation, we will assume an 'n' of three - there are 3 rounds.

Let's talk briefly about what's going on here and then I'll share some diagrammed pics that may help you think about how the recursion is happening. There are 3 choices in the 'choicesOfThrow' array. We are using a forEach loop to cycle through those choices. 'thro' here is either going to be 'rock', 'paper', or 'scissors.

So, for whichever one of those we are currently looping on, we are going to recursively call the function for that value concatenated with the current array - which on the first level is just an array literal - so we are calling the function recursively with ['rock'] and the decremented roundsToGo of 2 -getCombos(['rock'], 2). This will go through the function again until it is sent back to function again as getCombos(['rock', 'rock'], 1).

While the paper and scissors portions are still waiting to go through the earlier forEach loops, the most recent loops keep executing. The rounds will go to zero for our first array of ['rock','rock','rock'] and it will reach the base case where it is pushed into the 'differentThrowCombos' array first. And now we can go back to the loop that has stalled at [rock, rock] and finish the forEach there - ['rock','rock','paper'] and ['rock','rock','scissors'] will be the next to be added to the 'differentThrowCombos' array. Then back to finish the the previous loop and so on.

Here is rock paper scissors in tree structure. Spend a few minutes looking at how we get the results in order from left to right. I feel like visualizing recursion has helped me tremendously and may help you too.

Javascript Instantiation

JEFFREY M JAMES — Sun, 03 May 2020 20:34:11 +0000

An instantiation pattern is a process of creating a class of objects. There are 5 different instantiation patterns in modern Javascript. If we were creating the pieces for a game of chess, the top class could conceivably be "GamePieces" which all contain a series of similar properties like color and position. It would also make sense if each piece contained a function to move it to a different place on the board - maybe a moveTo function which updates its location.

We could create each game piece individually, but rewriting the functionality for each piece will take a lot of time and make it harder to revise the code. So, we are going to create a "factory" to create new instances of GamePieces - such as pawn1W and queenB which will all share some common traits and methods.

1) Functional - with the functional instantiation pattern, we will use a class production function (GamePieces) to create a new instance (pawn1W) of a piece for the board. The functional style will put a copy of each of the included methods (moveTo) onto each GamePieces instance.

2) Functional Shared - this instantiation pattern is just like functional, but with one large bonus. With this instantiation pattern, we don't have to give all of the methods to each instance we create. Instead, we use _.extend to give each instance a reference to where the method can be found.

3) Prototypal - instead of using _.extend to copy over a reference to each method, this instantiation pattern uses Object.create() to create an object which will point at another object in cases where the instance itself does not contain that method/value. Take a look at this and let's meet below the graphic to discuss...

...so, when .moveTo is called for pawn1W, the compiler will not find that method on pawn1W, but because of Object.create(pieceFuncs), it will know to go to the pieceFuncs object to look for .moveTo.

4) Pseudoclassical - this instantiation class's name is a nod to the author's fascination with late 70s yacht rock. Other names considered, such as "The Loggins" style, were decidedly too edgey for a young programming language attempting to be taken seriously. This style adds a couple of interesting things. First, every function in javascript is an object - and that object comes with an empty object already attached to it named 'prototype'. This prototype object on the constructor function is where we are going to store all methods that we want to share with the instance. Check out the following code, and let's meet below to discuss...

As you can see by the comment lines above, there is another feature that we need to consider with this style. It uses the 'new' keyword. The 'new' keyword is used when creating the object and it basically works to replace the Object.create() and return lines of code seen in the prototypal style.

5) ES6 - ES6 introduces classes as a new instantiation pattern. Syntactically, class is not a function or an object - it is something new to ES6. Look through the following code, and let's take a moment to reflect...

While the syntax is new, this constructor function handles creation of objects about the same as the pseudoclassical style. Notice also the syntax to include methods on this class. Although it may not be intuitive, the new Class construct is going to save that method to the prototype object of the constructor.

While you can use any of these instantiation styles, the latter styles require less copying of methods which becomes important as systems scale. So, learn the ES6 and use it to impress potential employers.

Special thanks to the youtube channel "hola〈code/〉" for helping me to understand these concepts. Here are helpful links for followup research:

https://www.youtube.com/watch?v=zd2STahSBaA&t=314s
https://www.youtube.com/watch?v=T-HGdc8L-7w&t=258s
https://www.youtube.com/watch?v=FrSW-dSJTyg