DEV Community: ainaperez

What is Prototype and how it works in constructor functions?

ainaperez — Mon, 07 Feb 2022 09:53:12 +0000

hey there 👋, I'm Aina a web development student on my way to become a full-time developer.

In this article I'm offering an explanation of Object.prototype and why it is important when working with constructor functions.

Enjoy!

Context

In the beginning of my studies with Javascript, I was completing an exercise from my professors where I had to build a constructor function with certain properties and create two objects from that constructor function. This exercise was part of a bigger project where we had to create a Formula 1 viewer that displayed the results of races in a table format (you can find the project here).

In that exercice there were some build tests that we had to pass in order to complete the project.

My first version of the constructor function was this:

function DriverFn(givenName, familyName, dateOfBirth) {
       this.name = String(givenName + ' ' + familyName);
       this.dateOfBirth = new Date (dateOfBirth);
       this.getYearOfBirth = function(){
         return Number(this.dateOfBirth.getFullYear());
       }
}

And then I created two objects using that function.

var x = new DriverFn('Lewis', 'Hamilton', '1985-01-07');
var y = new DriverFn('Michael', 'Schumacher', '1969-01-03');

When console logging the data, for example with x.getYearOfBirth, I was getting everything correctly, but surprisingly the tests weren’t passing.

When checking the reason, I saw that the tests were built to expect the use of prototype.

And at that moment I wondered why would I use prototype if it works perfectly with only this?🤔

The use of Constructor functions and how they look when using this

The purpose of using constructor functions is to be able to make many different objects from one function. Sometimes it can be only 10 objects but surely on many occasions there will be many more, perhaps hundreds or thousands. This creates a lot of code and memory usage, so another goal we need to achieve with constructor functions is to minimize code duplication.

Having said that, first I'll show you a picture of how the objects look when we use this. I am going to use the live tool from Python Tutor to show you the data structure:

With the keyword this, what we do is bind the properties directly into the object itself. That means that everytime we create an instance from DriverFn, we will get an object with its own name, its own date of Birth and its own method getYearOfBirth with the code of the function.

In our case, it's fine that each object has its associated name and date of birth, as they are different in every driver. But, we really don't need to have the function that allows us to know the year of birth duplicated in each driver, as it is the same code for all.

Now is when Prototype is useful to us.🤫

Using prototype in constructor functions

By itself, all objects have an associated protoype. If you went to the console with the previous code, and created an object, you would see the object with all the properties and then a "proto" property, which in the case of the Driver object is empty.

In order to include properties in the protoype (proto), we use the syntax:

Function.prototype.property = value;

So our function will look like this:

function DriverFn(givenName, familyName, dateOfBirth) {
    this.name = String(givenName + " " + familyName);
    this.dateOfBirth = new Date (dateOfBirth);
    DriverFn.prototype.getYearOfBirth = function(){
          return Number(this.dateOfBirth.getFullYear());
        }
}

As you can see, we changed this in the method getYearOfBirth for DriverFn.prototype.

From now on getYearOfBirth won’t be stored in the object directly but in its prototype.

As seen here, a constructor function has been created, with a prototype pointing to the getYearOfBirth function.

When creating new instances of the object, they will have their own properties of name and dateOfBirth, but then the method will be connected, inside proto, directly with the first getYearOfBirth that we have added to the constructor function, without the need to copy all the code of the function again.

This saves us a lot of memory space and load time, especially if we have thousands of objects with much more elaborate methods or properties.

What we have achieved here is based on the basic function of prototypes, which is to allow some objects to access the properties of others without having to define those properties every time we create an object.

That’s what we call Prototype Inheritance.

An introduction to prototype inheritance

As we said, prototype inheritance in Javascript is the ability of objects to access properties of other objects.

A simple example to explain this prototype inheritance is with Arrays:

When we create an array, we know that we can access many methods to manipulate it. Some of these methods can be: .length(), .indexof(), .reverse() etc.

Actually, we have never defined these methods in our code so how can we possibly access them? This is thanks to protoypes.
When we create a new object, array, function etc in Javascript, Javascript automatically creates, without our knowledge, a base object with all these methods that we can't see. In the case of arrays, the object created by Javascript is arr.proto (This is the first step in the chain, although we can go further until we reach the root of the root, which will not have any properties).

Therefore, every time we create an array, we can automatically access these methods without having to create all the code with all the methods in our array. This array, with all its ancestors, forms what is called a “chain of prototypes”.

In the case of our DriverFn object, which is a function, all the objects we create will inherit (that is, we will be able to access), the method and properties of the DriverFn constructor function, but also of the function.proto prototype object, which has its own properties and own methods, without the need to duplicate all the code over and over again.

Summary

Prototype is the Javascript method that allows objects to access properties of other objects.
Protoype is also very useful to reduce code volume and decrease loading times.
From a child element we can access properties stored in their parent's proto. Not only their direct parent, but also the grandparent and so on until we reach the end of the prototype chain, that will have a prototype of null.

Here ends my explanation of Prototype in constructor functions. A bit longer than what I intended initially but I hope it will be of use to whoever needs it!

At the beginning I didn’t understand Prototype as well and had to do quite a bit of research to get the good meaning of it, so don’t give up if you are in the same situation!.

As always, let me know in the comments your thought and if you have any further questions :)

Solving the Cash Register challenge in Free Code Camp

ainaperez — Wed, 28 Jul 2021 14:38:08 +0000

Welcome to my first post ever in Dev!

If you are also taking FreeCodeCamp's Javascript Algorithms and Data Structures certification, this post may be of interest to you.

I am going to go through the thought process behind my solution for the last challenge of the certification, the Cash Register. I found it quite complex and took around 3 days to complete.

The goal of this guide is to meet other developers and share the best approaches to this challenge as I am sure I can greatly improve the code. So be sure to leave a comment and connect!

So first, the problem

The challenge gives you a function CheckCashResgister with three parameters: price (prices of the purchase), cash(payment received for the purchase), and cid(cash-in-drawer available at the moment).

function checkCashRegister(price, cash, cid) {

}

checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]);

The last parameter, cid consists of a 2D array with the number of different coins and notes in the drawer.

The main goal of the function is to return an object with two properties: status and change. These properties’ values will change depending on the cid available and the change we need to give back. There can be three cases:

Our cash-in-drawer is less than the change, meaning we don’t have enough money to return the change, OR we cannot return the exact change. This means if we need to return $0.5 but only have a $1 note, we won’t return the change.
In that case the values to return will be: {status: "INSUFFICIENT_FUNDS", change: []}
Our cash-in-drawer and change are equal. In that case, our cid will be the value for the key change: {status: "CLOSED", change: [cid]}.
The cash-in-drawer is higher than the change. In that case, the value of change will be an array containing the different notes and coins to return sorted from highest to lowest.

Breaking up the solution

The first step is to define what we will need to give back, creating the variable difference to calculate de margin between the cash given and the price to pay.

function checkCashRegister(price, cash, cid) {
  var difference = cash - price;
  const originalDiff = difference;
  var objectReturn = {
    status: '',
    change: []
  }

let arrCurrency = [
    ["ONE HUNDRED", 100], 
    ["TWENTY", 20], 
    ["TEN", 10], 
    ["FIVE", 5], 
    ["ONE", 1], 
    ["QUARTER", 0.25],
    ["DIME", 0.1],
    ["NICKEL", 0.05],
    ["PENNY", 0.01]
    ]

This variable will change further in the code. That’s why we create a Const orginalDiff to store the original difference. We will need this variable further in the code to define the three possible outcomes.

We also create the object to return called objectReturn with the two properties. For now, the status will be set to an empty string, and the change will be set to an empty array.

We will also create the variable arrCurrency copying the different currency values from the statement in an array. We are going to use this array later to calculate the availability of each currency.

After that, our first action is to reverse the original cid array. The cid is given in ascendent order but we reverse it to be able to compare each sub-array with the correspondent one in the arrCurrency array.

Then, we create a variable cidSum and use a for loop to sum all the money in our drawer. Comparing the cidSum to originalDiff, we will be able to create the three possible returns.

cid.reverse();

  var cidSum = 0;
  for(let i = 0; i<cid.length; i++){
    cidSum += cid[i][1];
  }

Now it gets to the complicated part. We need to find a way to return the change with the appropriate currency.
To do that we will use a for loop that will iterate through the different currencies of our array arrCurrency.
To begin with, we create a new array with the name result where we copy all the exact values of arrCurrency with the spread operator. In each iteration, we will change the value of each currency in the result array to the number needed for the change.

var result = [...arrCurrency];

  for(let i = 0; i<arrCurrency.length; i++){
    let returnMoney = 0; 
    let bill = cid[i][1]/arrCurrency[i][1]
      bill.toFixed(2);
      while(difference.toFixed(2)>=arrCurrency[i][1] && bill>=1){
        difference -= arrCurrency[i][1];
        returnMoney += arrCurrency[i][1];
        bill--;

      }
        if(returnMoney>0){
          if(returnMoney - Math.floor(returnMoney) !== 0){result[i][1]= returnMoney.toFixed(2)
          result[i][1] = parseFloat(result[i][1])}else{
            result[i][1]= returnMoney;
          }

        }else{
          result[i][1]= returnMoney;
        }
  }

Inside the for loop:

We create a variable returnMoney where we will store the value of each coin calculated for the change.
We will also need to know if we have money available from each currency. For that, we create a variable bill and divide each currency of our cash-in-drawer for its counterpart in the arrCurrency, and we round the number to two decimals. If bill is greater or equal than 1, it will mean we will have currency available.
We create a while loop. As long as the difference is greater than the currency we are iterating at at the moment, and bill is greater or equal than 1, the loop will keep subtracting the currency value to our difference and adding that same currency to our variable returnMoney.
Once the difference goes under the currency value or we run out of money, we go on to the if statement. If the returnMoney is greater than 0, meaning we will return change in that note or coin, we will have to evaluate if the number needs rounding or not.

One of the problems I encountered was JavaScript’s floating point number precision. The second if statement looks if a number is decimal or not by substracting its largest integer with the Math.floor method. (Ex = 5.05 – Math.floor(5.05) = 0.05). If the result is greater than 0 it will round the number to two decimals. As the method toFixed returns a string, we will need to convert it to a number again to pass the tests.

In all cases, we will end up changing the original value of the currency in our result array with that of returnMoney.

Before going to the last part of the challenge, we will need to calculate if we will be able to return the exact change.
For that, we create another for loop that will sum all the values stored in our array result to the variable sumResult. As we have calculated in the previous for loop, our change to give back according to the currencies available will mean that if the sum of all these values is less than our original difference, we won’t be able to give back the exact change.

let sumResult = 0;

  for(let i = 0; i<cid.length; i++){
    sumResult += result[i][1];
  }
  sumResult = sumResult.toFixed(2);

Our last if statement defines the three outcomes possible:

if(cidSum < originalDiff || sumResult < originalDiff){
    objectReturn.status = 'INSUFFICIENT_FUNDS';
    }else if(cidSum == originalDiff){
      objectReturn.status = 'CLOSED';
      objectReturn.change = cid
    }else{
      let resultFiltered =[];
      for(let a = 0; a<result.length; a++){
        if(result[a][1]!==0){
          resultFiltered.push(result[a]);  
        } 
        }
     objectReturn.status = 'OPEN';
     objectReturn.change = resultFiltered;
    }
     return objectReturn;
}

If the sum of our cash-in drawer, or the sum of the currency available, is less than the difference to give back it will change the property status of our object to ‘INSUFFICIENT_FUNDS’.
If the sum of our cash-in drawer is the same as our difference it will change both properties of the object.
Finally, if the sum of our cash-in drawer is greater than the difference, it will create a filtered array of our result array, without all the coins with a value of 0, and change the properties to their correspondent values.

In the end, we will return the object.

I am sure you are happy-crying now as you realize this long-ass article has finally come to an end. Hopefully, you will have been able to understand it, as concision and storytelling have never been my strongest skills.

Either way, let me know in the comments what do you think about the code and please do give suggestions for improvements, they will be greatly appreciated!

You can also check out the full solution in my Github