Object Oriented Programming

Question 1

Create a Basic JavaScript Object

Think about things people see everyday, like cars, shops, and birds. These are all objects: tangible things people can observe and interact with.

What are some qualities of these objects? A car has wheels. Shops sell items. Birds have wings.

These qualities, or properties, define what makes up an object. Note that similar objects share the same properties, but may have different values for those properties. For example, all cars have wheels, but not all cars have the same number of wheels.

Objects in JavaScript are used to model real-world objects, giving them properties and behavior just like their real-world counterparts. Here’s an example using these concepts to create a duck object:

let duck = {
  name: "Aflac",
  numLegs: 2
};
This duck object has two property/value pairs: a name of "Aflac" and a numLegs of 2.

Create a dog object with name and numLegs properties, and set them to a string and a number, respectively.

Answer 1

let dog = {
name : “Ninho”,
numLegs: 4
};

Question 2

Use Dot Notation to Access the Properties of an Object

Answer 2

let dog = {
  name: "Spot",
  numLegs: 4
};

console. log(dog.name);
console. log(dog.numLegs);

Question 3

Create a Method on an Object

Answer 3

Possible Solution

let dog = {
  name: "Spot",
  numLegs: 4,
  sayLegs: () => { return `This dog has ${dog.numLegs} legs.`; }
};

console.log(dog.sayLegs());

Question 4

Make Code More Reusable with the this Keyword

Access a property of an object with this keyword.

Answer 4

Possible Solution

let dog = {
  name: "Spot",
  numLegs: 4,
  sayLegs: function() { return `This dog has ${this.numLegs} legs.`; }
};

console.log(dog.sayLegs());

Obs.: Arrow function doesn’t work here because this type of function has your own scope. So this keyword invoke to access property numLegs it causes undefined error.

Question 5

How to Creates a constructor function ?

Answer 5

Constructors follow a few conventions:

Constructors are defined with a capitalized name to distinguish them from other functions that are not constructors.
Constructors use the keyword this to set properties of the object they will create. Inside the constructor, this refers to the new object it will create.
Constructors define properties and behaviors instead of returning a value as other functions might.

function Dog(){
  this.name = "Bartô",
  this.color = "Yellow",
  this.numLegs = 4;
}

Question 6

Use a Constructor to Create Objects
Here’s the Bird constructor from the previous challenge:

function Bird() {
  this.name = "Albert";
  this.color = "blue";
  this.numLegs = 2;
  // "this" inside the constructor always refers to the object being created
}

let blueBird = new Bird();
Notice that the new operator is used when calling a constructor. This tells JavaScript to create a new instance of Bird called blueBird. Without the new operator, this inside the constructor would not point to the newly created object, giving unexpected results.

Now blueBird has all the properties defined inside the Bird constructor:

blueBird.name; // => Albert
blueBird.color; // => blue
blueBird.numLegs; // => 2
Just like any other object, its properties can be accessed and modified:

blueBird.name = ‘Elvira’;
blueBird.name; // => Elvira

Use the Dog constructor from the last lesson to create a new instance of Dog, assigning it to a variable hound.

Answer 6

function Dog() {
  this.name = "Rupert";
  this.color = "brown";
  this.numLegs = 4;
}
// Add your code below this line

let hound = new Dog();

console. log(hound.name);
console. log(hound.color);
console. log(hound.numLegs);

Question 7

Extend Constructors to Receive Arguments

Create a constructor which receive arguments. Then set this args to respective properties.

Answer 7

function Dog(name, color) {
  this.name = name;
  this.color = color;
  this.numLegs = 4;
}

let terrier = new Dog(‘Barto’, ‘Brown’);

console. log(terrier.name);
console. log(terrier.color);
console. log(terrier.numLegs);

Question 8

How to verify if an object is instance of a constructor ?

Answer 8

function House(numBedrooms) {
  this.numBedrooms = numBedrooms;
}

// Add your code below this line
let myHouse = new House(1);

myHouse instanceof House // returns true

Obs.: If an object is created without using a constructor, instanceof will verify that it is not an instance of that constructo and then returns false.

Question 9

Check if the property is own property of a constructor object.

Answer 9

Understand Own Properties
In the following example, the Bird constructor defines two properties: name and numLegs:

function Bird(name) {
  this.name = name;
  this.numLegs = 2;
}

let duck = new Bird("Donald");
let canary = new Bird("Tweety");
name and numLegs are called own properties, because they are defined directly on the instance object. That means that duck and canary each has its own separate copy of these properties.

In fact every instance of Bird will have its own copy of these properties.

The following code adds all of the own properties of duck to the array ownProps:

let ownProps = [];

for (let property in duck) {
  if(duck.hasOwnProperty(property)) {
    ownProps.push(property);
  }
}

console.log(ownProps); // prints [ “name”, “numLegs” ]

Question 10

Use Prototype Properties to Reduce Duplicate Code

Creates a object constructor with some properties. Then create a property witch sets value default to all instances of this constructor.

Answer 10

function Dog(name) {
  this.name = name;
  Dog.prototype.numLegs = 2;
}

let beagle = new Dog("Snoopy");
let husky = new Dog("Zeus");

console. log(beagle.name);
console. log(beagle.numLegs);
console. log(husky.name);
console. log(husky.numLegs);

Question 11

Iterate Over All Properties
You have now seen two kinds of properties: own properties and prototype properties. Own properties are defined directly on the object instance itself. And prototype properties are defined on the prototype.

Add all of the own properties of beagle to the array ownProps. Add all of the prototype properties of Dog to the array prototypeProps.

Answer 11

Possible Solution

function Dog(name) {
  this.name = name;
}

Dog.prototype.numLegs = 4;

let beagle = new Dog(“Snoopy”);

let ownProps = [];
let prototypeProps = [];

// Add your code below this line

for(let prop in beagle){
  if(beagle.hasOwnProperty(prop)){
    ownProps.push(prop);
  } else{
    prototypeProps.push(prop);
  }
}

console. log(ownProps);
console. log(prototypeProps);

Question 12

How to access constructor property of a object to check this type ?

Answer 12

Possible Solution

function Dog(name) {
  this.name = name;
}

function joinDogFraternity(candidate) {
  return candidate.constructor === Dog ? true : false;
}

console.log(joinDogFraternity({}));

Note
Since the constructor property can be overwritten (which will be covered in the next two challenges) it’s generally better to use the instanceof method to check the type of an object.

Question 13

Change the Prototype to a New Object
Up until now you have been adding properties to the prototype individually:

Bird.prototype.numLegs = 2;
This becomes tedious after more than a few properties.

Bird.prototype.eat = function() {
console.log(“nom nom nom”);
}

Bird.prototype.describe = function() {
console.log(“My name is “ + this.name);
}

Use object sintax to set all new prototype properties of the constructor.

Answer 13

function Dog(name) {
  this.name = name; 
}

Dog.prototype = {

constructor: Dog, // this is important to avoid undefined constructor of Dog!
numLegs: 2,
eat: () => { console.log(‘nom nom nom’); },
describe: () => { console.log(My name is ${this.name}); }
};

Question 14

Understand Where an Object’s Prototype Comes From
Just like people inherit genes from their parents, an object inherits its prototype directly from the constructor function that created it. For example, here the Bird constructor creates the duck object:

function Bird(name) {
  this.name = name;
}

let duck = new Bird("Donald");
duck inherits its prototype from the Bird constructor function. You can show this relationship with the isPrototypeOf method:

Bird.prototype.isPrototypeOf(duck);
// returns true

Use isPrototypeOf to check the prototype of beagle.

Answer 14

function Dog(name) {
  this.name = name;
}

let beagle = new Dog(“Snoopy”);

console.log(Dog.prototype.isPrototypeOf(beagle));

Question 15

How the Prototype Chain Works ?

Answer 15

Object Oriented Programming: Understand the Prototype Chain
All objects in JavaScript (with a few exceptions) have a prototype. Also, an object’s prototype itself is an object.

function Bird(name) {
  this.name = name;
}

typeof Bird.prototype; // => object
Because a prototype is an object, a prototype can have its own prototype! In this case, the prototype of Bird.prototype is Object.prototype:

Object.prototype.isPrototypeOf(Bird.prototype);
// returns true
How is this useful? You may recall the hasOwnProperty method from a previous challenge:

let duck = new Bird("Donald");
duck.hasOwnProperty("name"); // => true
The hasOwnProperty method is defined in Object.prototype, which can be accessed by Bird.prototype, which can then be accessed by duck. This is an example of the prototype chain.

In this prototype chain, Bird is the supertype for duck, while duck is the subtype. Object is a supertype for both Bird and duck.

Object is a supertype for all objects in JavaScript. Therefore, any object can use the hasOwnProperty method.

Heres an exemple in practice:

function Dog(name) {
  this.name = name;
}

let beagle = new Dog(“Snoopy”);

Dog.prototype.isPrototypeOf(beagle); // => true

console.log(Object.prototype.isPrototypeOf(Dog.prototype)); // => true

Question 16

Show an example of principle DRY(Don’t Repeat Yourself).

Answer 16

There’s a principle in programming called Don’t Repeat Yourself (DRY). The reason repeated code is a problem is because any change requires fixing code in multiple places. This usually means more work for programmers and more room for errors.

Notice in the example below that the describe method is shared by Bird and Dog:

Bird.prototype = {
  constructor: Bird,
  describe: function() {
    console.log("My name is " + this.name);
  }
};

Dog.prototype = {
constructor: Dog,
describe: function() {
console.log(“My name is “ + this.name);
}
};
The describe method is repeated in two places. The code can be edited to follow the DRY principle by creating a supertype (or parent) called Animal:

function Animal() { };

Animal.prototype = {
constructor: Animal,
describe: function() {
console.log(“My name is “ + this.name);
}
};
Since Animal includes the describe method, you can remove it from Bird and Dog:

Bird.prototype = {
constructor: Bird
};

Dog.prototype = {
constructor: Dog
};

Question 17

How to Inherit Behaviors from a Supertype ?

Answer 17

Object.create(obj) creates a new object, and sets obj as the new object’s prototype. Recall that the prototype is like the “recipe” for creating an object. By setting the prototype of animal to be Animal’s prototype, you are effectively giving the animal instance the same “recipe” as any other instance of Animal.

For example:

// Creates a supertype
function Animal() { }

Animal.prototype = {
  constructor: Animal,
  eat: function() {
    console.log("nom nom nom");
  }
};

//Inherits behavior from Animal (supertype)
function Dog() { }

Dog.prototype = Object.create(Animal.prototype);

let beagle = new Dog();
beagle.eat();

Question 18

How to Reset an Inherited Constructor Property ?

Answer 18

function Animal() { }
function Bird() { }
function Dog() { }

//Sets prototype of Animal. This sets constructor of this //objects of Animal

Bird.prototype = Object.create(Animal.prototype);
Dog.prototype = Object.create(Animal.prototype);

//Here resets constructor of objects inherited from //Animal to your own constructor

Bird.prototype.constructor = Bird;
Dog.prototype.constructor = Dog;

let duck = new Bird();
let beagle = new Dog();

Question 19

What is the difference between instantiate objects with operator new and Object.create() method ?

Answer 19

Need answer.

Question 20

Give an example of how to add methods in objects after inherit prototype for another object.

Answer 20

// Creates Object Animal and its your prototype.
function Animal() { }
Animal.prototype.eat = function() { console.log("nom nom nom"); };

//Creates Object
function Dog() { }

//inherits from Dog prototype
Dog.prototype = Object.create(Animal.prototype);

//sets Dog constructor to Dog
Dog.prototype.constructor = Dog;

//sets method bark to the prototype of Dog
Dog.prototype.bark = () => { cDonsole.log('Woof!'); };

let beagle = new Dog();

beagle. eat(); // Should print “nom nom nom”
beagle. bark(); // Should print “Woof!”

Question 21

Give an example of how to override a method inherited from an Object.

Answer 21

// Creates a Bird Object
function Bird() { }

//Sets prototype Bird a function fly
Bird.prototype.fly = function() { return "I am flying!"; };

//Creates a Penguin Object with prototype of Bird. Then //sets its constructor to Penguin

function Penguin() { }
Penguin.prototype = Object.create(Bird.prototype);
Penguin.prototype.constructor = Penguin;

//Override Bird method in Penguin Object
Penguin.prototype.fly = () => { return "Alas, this is a flightless bird."; };

let penguin = new Penguin();
console.log(penguin.fly());

Question 22

Use a Mixin to Add Common Behavior Between Unrelated Objects

Inheritance is a powerful way to get behavior from Objects. However, in some cases, isn’t best solution. Show an exemple to add common behavior between unrelated objects.

Answer 22

let bird = {
  name: "Donald",
  numLegs: 2
};

let boat = {
  name: "Warrior",
  type: "race-boat"
};

let glideMixin = (obj) => {
  obj.glide = () => { 
    console.log("Glyding, Whoo Hoo!");
  }
};

glideMixin(bird);
glideMixin(boat);

bird. glide();
boat. glide();

Question 23

Use Closure to Protect Properties Within an Object from Being Modified Externally

Give an example in we can externally acesses property value from an Object without externally changes the value from that property.

Answer 23

function Bird() {
// acessed only in Bird scope
  let weight = 15;

// acessed externally
  this.getWeight = () => { return weight; };
}

let eagle = new Bird();
console.log(eagle.getWeight());

Question 24

how does the IIFE standard work and what is its importance and common usage in Javascript? Show an example.

Answer 24

An immediately invoked function expression (IIFE) is often used to group related functionality into a single object or module. For example, an earlier challenge defined two mixins:

let funModule = (function (){
  return {
    singMixin: function (obj) {
      obj.sing = function() {
        console.log("Singing to an awesome tune");
      }
    },
    isCuteMixin: function(obj) {
      obj.isCute = function() {
        return true;
      };
    }
  }
})();
This wrap both functions using isCuteMixin and singMixin so that we can access it from funModule:

console. log(funModule.isCuteMixin(//pass an object));
console. log(funModule.singMixin(//pass an object))