Day #3: Object-Oriented Programming in Javascript (part 1)



Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that #100 Days of Code will receive your email address.

Puppy Nomadic
Puppy Nomadic
I focused today on better understanding object-oriented javascript in order to solve a problem in Precourse 1 of CodeSmith: to create an array as an object in Javascript, and “reverse engineer” the following array methods: push(), pop(), unshift(), shift()
Below you can find my first solution to the problem, as well as the lectures taught by Will Sentance on object-oriented javascript that are helping me to refactor my solution and make it better.

Problem: Create an Array as an Object
CodeSmith’s Precourse-1 Problem:
Under the hood, a JavaScript array is a specific type of object in which values are paired with sequentially numbered keys.
// the “Array” object also contains a number of methods that give arrays their functionality.
// the below function should return an empty object that has the behavior and functionality of an array. this object should have the following methods:
// push(val) adds val to the end
// pop() removes a value from the end and returns it
// unshift(val) adds val to the beginning
// shift() removes a value from the beginning and returns it
The goal of this problem is to reverse engineer what array methods are actually doing and create an object that has those methods
My First Solution:
At first I approached the problem as a normal function, without object-oriented programming:
Though I was able to pass all the tests, my friend Satty said that this solution is wrong, because my array doesn’t hide my array methods, so my array object would look like this:
{ 0: 1, 1: 2, 2: 3, pop: f(), push: f(), shift: f(), unshift: f() }
Satty's Feedback: Learn OOP!
Satty's feedback on Slack to my first solution.
Satty's feedback on Slack to my first solution.
How do I improve my solution?
Satty suggested using “this” keyword and object-oriented programming.
  • I realized I was not familiar enough with OOP in Javascript, since I have not yet completed the CSX section on OOP (link below.)
  • I also realized that there was a Javascript Hard Parts event being taught the next day by Kyle, our lead instructor. (Will’s previous lecture on YouTube for this workshop islinked below.)
  • However, I didn’t feel comfortable going to this lecture, so instead I decided to spend many hours last night reviewing Will’s OOP lectures in Front End Masters (linked below). Many thanks to Andres for sharing this resource with me!
JavaScript The Hard Parts: Object Oriented Programming
Learn the Fundamentals of Object Oriented Programming in JavaScript
Why use OOP for the array problem:
After viewing the first few lectures of Will Sentance’s OOP course, I understood why it is more memory-efficient to rewrite my createArray() function using object-oriented programming.
By hiding the array object class methods of pop(), push(), shift() and unshift() in a prototype object, I would be able to more efficiently create new instances of this array object using the “new” / “this” keywords, without rewriting all these methods in each instance.
A few scribbled notes from Will’s Lecture:
The original class object has property: “prototype,” which is an object of methods accessible to all instances of that object.
The “new” keyword creates an instance that inherits all prototype properties. We refer to it with “this” keyword, and its inherited properties: “__ proto __”
__proto__ is a hidden bond to original class object’s properties
this.__proto__ = classObject.prototype
All class objects in #javascript are just function-object combos under the hood.
All class objects in #javascript are just function-object combos under the hood.
What the "New" keyword does under the hood:
Pro tip from Will for senior dev level tech interviews:
Be able to describe what the “new” keyword does under the hood in Javascript.
Here’s what “new” does automatically in JS:
  1. A new empty object is created.
  2. The new object’s internal ‘Prototype’ property (__proto__) is set the same as the prototype of the constructing function.
  3. The ‘this’ variable is made to point to the newly created object. It binds the property which is declared with ‘this’ keyword to the new object.
  4. A newly created object is returned when the constructor function returns a non-primitive value (custom JavaScript object). If the constructor function returns a primitive value, it will be ignored. At the end of the function, ‘this’ is returned if there is no return statement in the function body.
New Solution using OOP:
After watching these videos and doing more of the exercises on CSX, on Day 4, I’ll put together my improved solution to the Precourse-1 “createArray()” problem, using object-oriented programming.
This will be in Day 4.
Did you enjoy this issue? Yes No
Puppy Nomadic
Puppy Nomadic @puppynomadic

Let's pull each other up by our Bootstrap.js 🪴 👩🏻‍💻 🦮

=== Journey of software craftsmanship ===

{"Formerly": ["nonprofit community organizer", "teacher", "researcher", "government director"],
"Future": ["software engineer", "web3 dev", "developer advocate", "technical program manager"]

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.