Javascript is hard and at the same time it is fun. It shares a lot of qualities with Ruby in coding such as class and instance methods in Ruby and Javascript’s version of class and instances and the static method. Today I had my Javascript assessment in this course and did some live coding, and while the live coding was very intuitive as well as gave me a better understanding of Javascript. It allowed me the chance to write this blog post that I put off before and after some writer’s block. Live coding is helpful because it helps flesh out what you are talking about in code. It is one of the trickiest things on the spot, and it’s a hard mountain to climb over but when you do you feel great.
In my Javascript assessment, my live coding was based on rendering out my all food objects in my catalog without having to send another get fetch request to my api since in my code, I would send both a post fetch request and a get fetch request to render all foods which was slowing down the asynchronous process. During this live coding I had to think about the class and instance simarilities between Ruby and Javascript as well as use a new keyword: static. The static keyword defines a static method of a class, in the case of my catalog for food I had to make a static variable called allFoods and assign it an empty array that was going to hold the food object static allFoods = []. There is a problem, I have an empty array with nothing in it, so I need to put something in it. A constructor is the Ruby equivalent of instantiating objects. In Ruby we would use def initialize ... end to instantiate an object. In JS, we use constructors to initialize objects of the class we are in this case the Food class class Food { constructor( some arguements) { more code } }. Now knowing that I need to essentially push or shovel objects into my array. I had to write Food.allFoods.push(this) in my constructor which in turn creates Food objects. Now you might be wondering how this is working, well I am going to explain that. My class of Food now has an empty array that is now being fed or push some information which is “this”, and the this keyword refers to object in this process just like something in Ruby which is the self keyword which also refers to the current object. Well now I have an empty array with an empty object so its time to give the object some information for itself and finish the project.
In other another area of my project, I had to replace the function that was sending another get request with the static method I had just created which will allow to render all foods in my catalog without having to send another get fetch request. I had to put this code in the section where I making a post request rather than the area where I am making the other request since when a new food is entered into the catalog it will be pushed into its respective category, and as well as pushed into the section where all the foods are shown. This means that I have to iterate all the foods into the foodCard when are passed through the section of all Foods and for that I need to use the forEach method with the Food object. First I have to make sure that my food object is getting all the attributes it needs new Food(food.attributes.name, food.attributes.cost, food.attributes.description, food.attributes.image_url, food.id, food.attributes.catalog.id, food.attributes.catalog.name) - Name, Cost, Description, Image, after that I now need to iterate it using forEach: Food.allFoods.forEach(food => food.createFoodCard()). This piece of code takes the allFoods static method we created and iterates over the Food object in the Food Class with the createFoodCard function thereby creating Food Cards for the all Foods section of the foods data. Since all that code is put in and it works, the project is now finished.
After doing the live coding here are some of the takeaways: constructor and initialize instantiate objects in there respective languages. The ‘Static’ keyword is used on the class itself and not instances of the class. Live coding is a useful tool, but at the same time it can be hard.
in this picture: both programs are essentially doing the same thing to show the similarities between Ruby and Javascript.