Tag Archives: aha moment

Exercises before Udacity’s Arcade Game Project

My goal for this week is to tackle down Udacity’s Arcade Game Project. I’ve been reading a lot of chapters and watching a lot of videos regards to Object Oriented Programming, JavaScript. However, these are way too passive. Before I get into LocalStorage etc. advanced concepts, I need to finish several mini-projects which are mainly focusing on applying OOP.

For now, my Dynamic Quiz is functional as expected. However, it is not included much OOP. The missing features of my Dynamic Quiz is localStorage and layout. So, I am gonna take a break from there at this moment. Because I feel that I lack in OOP skill.

When I opened Arcade Game original files from Udacity, I really have no idea where to start or how to read these files. I read it carefully one time. Then, I began to know what are the functions doing there. However, I still have no idea what I should create. Fortunately, I found a series of tutorials from Youtube that was related to this project. Even I finished reading the videos, I am still stuck to start.

I remember that there is a similar project from Eloquent JavaScript, so I decided to do EJ’s exercises before I start Udacity’s Arcade Game.

Here is what I’ve learned from EJ’s exercises.

Chapter 5 Higher-Order Function.

Array.prototype.reduce()

Example: Sum up all values within an array

var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6

Example: Flatten an array of arrays

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

Array.prototype.concat()

var alpha = ['a', 'b', 'c'],
    numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric);

console.log(alphaNumeric); // Result: ['a', 'b', 'c', 1, 2, 3]
Advertisements

Constructors as Functions

Reading Professional JavaScript for Web Developers, in Chapter 6, the author was talking about the downside of Constructors is that methods are created once for each instance. So, person1 and person2 have a method called sayName(), but those methods are not the same instance of Function. So every time a function is defined, it’s actually an object being instantiated. Logically, the constructor actually looks like this:

function Personc(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = new Function(“alert(this.name)”);
}

The mechanics of creating a new instance of Function remain the same. Thus,

alert(person1.sayName == person2.sayName); //false   (p.183)

It’s possible to work around this limitation by moving the function definition outside of the constructor,

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}

function sayName() {
alert(this.name);
}

**** Inside the constructor, the sayName property is set equal to the global sayName() function, since the sayName property now contains just a pointer to a function, both person1 and person2 end up sharing the sayName() function that is defined in the global scope. This solves the problem of having duplicate functions that do the same thing but also creates some clutter in the global scope by introducing a function that can realistically be used only in relation to an object. (p.184)

Reflection

Imagine that you are creating thousands of instances of Person, it saves you thousands of “instances” in your program.

The Prototype Pattern actually wipe out the downside of the Constructor Pattern.

For example,

function Person() {

}
Person.prototype.name = name;
Person.prototype.age = age;
Person.prototype.job = job;
Person.prototype.sayName = function() {
alert(this.name);
};

person1 and person2 are both accessing the same set of properties and the sameName () function.