fix(guide): simplify directory structure

This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions

View File

@ -0,0 +1,42 @@
---
title: Add Methods After Inheritance
---
## Add Methods After Inheritance
### Method
Just like the following example, a new instance of an object - `Dog` - must be created and the `prototype` must be set.
```javascript
function Bird() { }
Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Bird;
```
Then a new function - `bark()` - must be added to the Dog prototype.
### Solution
```javascript
function Animal() { }
Animal.prototype.eat = function() { console.log("nom nom nom"); };
function Dog() { }
// Add your code below this line
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log("Woof woof!");
};
// Add your code above this line
let beagle = new Dog();
beagle.eat(); // Should print "nom nom nom"
beagle.bark(); // Should print "Woof!"
```

View File

@ -0,0 +1,86 @@
---
title: Change the Prototype to a New Object
---
## Change the Prototype to a New Object
Instead of adding each prototype property one by one with ```object.prototype.property```. We can do this much easier by setting the prototype to a new object. That way all of the prototype properties are added at once.
<br/>
## Hint:
```javascript
Dog.prototype = {
property: value,
functionName: function(){
},
}
```
Now try to solve the challenge!
<br/>
## Spoiler-Alert Solution Ahead!
<br/>
## Solution 1:
```javascript
function Dog(name) {
this.name = name;
}
Dog.prototype = {
// Add your code below this line
numLegs: 2,
eat: function(){
console.log('nom nom nom');
},
describe: function(){
console.log("My name is " + this.name);
}
}
```
## Code Explanation:
We assign the prototype variable to a new object.
Then we declare the numLegs property and give it a value of 2.
Next we create the two functions "eat" and "describe".
Now remember functions in objects are methods with the same syntax as properties.
You have the name followed by a value. That value is the function and the name is the name of your function.
<br/>
## Solution 2:
```javascript
function Dog(name) {
this.name = name;
}
Dog.prototype = {
// Add your code below this line
numLegs: 2,
eat(){
console.log('nom nom nom');
},
describe(){
console.log("My name is " + this.name);
}
};
```
## Code Explanation:
The only thing different between this solution and the last solution is we shortened the syntax on the functions "eat" and "describe".
We did this by removing the ":" and the word "function".
With ES6 we are allowed to do this.
You can read about it here: [Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions)

View File

@ -0,0 +1,20 @@
---
title: Create a Basic JavaScript Object
---
## Create a Basic JavaScript Object
### Method:
The soultion to this problem is more or less identical to the example given.
Give the `dog` object two new properties - `name` and `numLegs` - and set them to a string and a number, respectively.
### Solution:
```javascript
let dog = {
name: "George",
numLegs: 4
};
```

View File

@ -0,0 +1,35 @@
---
title: Create a Method on an Object
---
## Create a Method on an Object
### Method:
An objects function must be initialised within the object itself. This is demonstrated in the following code.
```javascript
let obj = {
property1 = 1,
function1: function() {
//Code to be exectued
}
};
```
### Solution:
```javascript
let dog = {
name: "Spot",
numLegs: 4,
sayLegs: function() {
return "This dog has " + dog.numLegs + " legs.";
}
};
dog.sayLegs();
```

View File

@ -0,0 +1,20 @@
---
title: Define a Constructor Function
---
## Define a Constructor Function
### Method:
The `Dog()` function should be written in the exact same format as the `Bird()` function given in the example. Simply replace `Bird` with `Dog` to pass all test cases.
### Solution:
```javascript
function Dog() {
this.name = "Geogre",
this.color = "White",
this.numLegs = 4;
}
```

View File

@ -0,0 +1,21 @@
---
title: Extend Constructors to Receive Arguments
---
## Extend Constructors to Receive Arguments
### Method:
Just like in the `Bird()` example, the `Dog()` function must takle two parameters - `name` and `color`. The name and color must then be initialised within the function using the `this` keyword. The final property - `numLegs` is set to 4 as the function doesn't take in a numLegs parameter.
### Solution:
```javascript
function Dog(name, color) {
this.name = name;
this.color = color;
this.numLegs = 4;
}
let terrier = new Dog("George","White");
```

View File

@ -0,0 +1,13 @@
---
title: Object Oriented Programming
---
## Object Oriented Programming
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

View File

@ -0,0 +1,37 @@
---
title: Inherit Behaviors from a Supertype
---
## Inherit Behaviors from a Supertype
### Method
To pass this challenge simply create the new `duck` and `beagle` objects using the `Object.create()` method seen in the following example.
```javascript
let animal = Object.create(Animal.prototype);
```
### Solution
```javascript
function Animal() { }
Animal.prototype = {
constructor: Animal,
eat: function() {
console.log("nom nom nom");
}
};
// Add your code below this line
let duck = Object.create(Animal.prototype); // Change this line
let beagle = Object.create(Animal.prototype);; // Change this line
duck.eat(); // Should print "nom nom nom"
beagle.eat(); // Should print "nom nom nom"
```

View File

@ -0,0 +1,36 @@
---
title: Iterate Over All Properties
---
## Iterate Over All Properties
### Method
The method is to use a `for-in-loop` to iterate through every property in the object. Inside the loop you then check if the property is a `own-property` or a `prototype` and place it in the `ownProps[]` array or the `prototypeProps[]` array. Remember to `push` properties to the `beagle` object and not the `Dog` object to pass all test cases.
### Solution
```javascript
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 property in beagle) {
if(Dog.hasOwnProperty(property)) {
ownProps.push(property)
}
else {
prototypeProps.push(property)
}
}
```

View File

@ -0,0 +1,23 @@
---
title: Make Code More Reusable with the this Keyword
---
## Make Code More Reusable with the this Keyword
### Method:
This challenge is simply demonstrating the power of the `this` keyword. Replacing `dog.numLegs` with `this.numLegs` strengthens our code by directly referencing this object.
[developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) has many examples to determine the effects of the `this` keyword.
### Solution:
```javascript
let dog = {
name: "Spot",
numLegs: 4,
sayLegs: function() {return "This dog has " + this.numLegs + " legs.";}
};
dog.sayLegs();
```

View File

@ -0,0 +1,11 @@
---
title: Override Inherited Methods
---
## Override Inherited Methods
# Solution
```javascript
Penguin.prototype.fly = function() {
return "Alas, this is a flightless bird.";
};
```

View File

@ -0,0 +1,22 @@
---
title: Remember to Set the Constructor Property when Changing the Prototype
---
## Remember to Set the Constructor Property when Changing the Prototype
- Remember to define the constructor property when you set a prototype to a new object.
# Solution
```javascript
Dog.prototype = {
constructor: Dog, // Solution
numLegs: 2,
eat: function() {
console.log("nom nom nom");
},
describe: function() {
console.log("My name is " + this.name);
}
};
```

View File

@ -0,0 +1,35 @@
---
title: Reset an Inherited Constructor Property
---
## Reset an Inherited Constructor Property
### Method
The `duck` and `beagle` objects have been programmed to inherit the `supertypes` constructor properties. To overwrite this two lines of code will have to be written to set the constructors to the desired constructors `Bird` and `Dog`. The following code demonstrates how this can be achieved.
```javascript
Bird.prototype.constructor = Bird;
```
### Solution
```javascript
function Animal() { }
function Bird() { }
function Dog() { }
Bird.prototype = Object.create(Animal.prototype);
Dog.prototype = Object.create(Animal.prototype);
// Add your code below this line
Bird.prototype.constructor = Bird;
Dog.prototype.constructor = Dog;
let duck = new Bird();
let beagle = new Dog();
```

View File

@ -0,0 +1,38 @@
---
title: Set the Child's Prototype to an Instance of the Parent
---
## Set the Child's Prototype to an Instance of the Parent
### Method
This challenge is no different from the last challenge, in the fact that you must create an object which inherits from the `supertype`. Only this time the subtype `Dog` will inherit the `Animal` supertype.
Simply create a new instance of `Dog.prototype` like the following example.
```javascript
Bird.prototype = Object.create(Animal.prototype);
```
### Solution
```javascript
function Animal() { }
Animal.prototype = {
constructor: Animal,
eat: function() {
console.log("nom nom nom");
}
};
function Dog() { }
// Add your code below this line
Dog.prototype = Object.create(Animal.prototype);
let beagle = new Dog();
beagle.eat(); // Should print "nom nom nom"
```

View File

@ -0,0 +1,25 @@
---
title: Understand Own Properties
---
## Understand Own Properties
### Method:
In the example code given you will see a new array `ownProps[]` intialised followed by a `for...in` statement to loop through the properties of `duck` and then use a `push()` statement to fill in the new array. The same method must be followed for the `canary` object.
Simply replace the `duck` object in the 'for...in' statement with the `canary`object to pass all test cases.
### Solution:
```javascript
let canary = new Bird("Tweety");
let ownProps = [];
// Add your code below this line
for(let property in canary) {
if(canary.hasOwnProperty(property)) {
ownProps.push(property);
}
}
```

View File

@ -0,0 +1,29 @@
---
title: Understand the Constructor Property
---
## Understand the Constructor Property
### Method
Simply finish the function like that of the example given. Use an `if-statement` to test whether or not the `candidate` is a `Dog`.
### Solution
```javascript
function Dog(name) {
this.name = name;
}
// Add your code below this line
function joinDogFraternity(candidate) {
if(candidate.constructor === Dog) {
return true;
}
else {
return false;
}
}
```

View File

@ -0,0 +1,18 @@
---
title: Understand the Immediately Invoked Function Expression (IIFE)
---
## Understand the Immediately Invoked Function Expression (IIFE)
### Method
The first test case asks you to make the function anonymous. To do this simply remove the name of the function as seen in the example. The function must then be wrapped in curly brackets with another set of curly brackets at the end to immediatly call the function.
### Solution
```javascript
(function() {
console.log("A cozy nest is ready");
})();
```

View File

@ -0,0 +1,20 @@
---
title: Understand the Prototype Chain
---
## Understand the Prototype Chain
### Solution
Your code should show that Object.prototype is the prototype of Dog.prototype
``` javascript
function Dog(name) {
this.name = name;
}
let beagle = new Dog("Snoopy");
Dog.prototype.isPrototypeOf(beagle); // => true
// Fix the code below so that it evaluates to true
Object.prototype.isPrototypeOf(Dog.prototype);
```

View File

@ -0,0 +1,10 @@
---
title: Understand Where an Objects Prototype Comes From
---
## Understand Where an Objects Prototype Comes From
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->

View File

@ -0,0 +1,22 @@
---
title: Use a Constructor to Create Objects
---
## Use a Constructor to Create Objects
### Method:
We saw in the last challenge how to create a constructor function. Now we can simply call this function to create a new object with the properties already defined in the constructor. Simply initialise a new variable `hound` calling the `Dog()` constructor.
### Solution:
```javascript
function Dog() {
this.name = "Rupert";
this.color = "brown";
this.numLegs = 4;
}
// Add your code below this line
let hound = new Dog();
```

View File

@ -0,0 +1,34 @@
---
title: Use a Mixin to Add Common Behavior Between Unrelated Objects
---
## Use a Mixin to Add Common Behavior Between Unrelated Objects
### Method
Just like the `flyMixin` function, a new `glideMixin` function must be made to accept both `bird` and `boat` objects as a parameter. Create this new function using the same syntax as the `flyMixin` function and then call the function on both objects.
### Solution
```javascript
let bird = {
name: "Donald",
numLegs: 2
};
let boat = {
name: "Warrior",
type: "race-boat"
};
// Add your code below this line
let glideMixin = function(obj) {
obj.glide = function() {
console.log("Gliding!");
}
};
glideMixin(bird);
glideMixin(boat);
```

View File

@ -0,0 +1,47 @@
---
title: Use an IIFE to Create a Module
---
## Use an IIFE to Create a Module
### Method
Both `Mixin`'s must be wrapped in a new `funModule` so an esay starting point is to comment out all the code so far.
```javascript
/*let isCuteMixin = function(obj) {
obj.isCute = function() {
return true;
};
};
let singMixin = function(obj) {
obj.sing = function() {
console.log("Singing to an awesome tune");
};
};
*/
```
Then below start writing your new `funModule` code. Inside the new module, you need to write a return statement to return both `Mixin` code blocks. Simply copy both original `Mixin` code blocks into your new module code, but remember to seperate both mixins with a `,`
### Solution
```javascript
let funModule = (function() {
return {
isCuteMixin: function(obj) {
obj.isCute = function() {
return true;
};
},
singMixin: function(obj) {
obj.sing = function() {
console.log("Singing to an awesome tune");
};
}
}
})();
```

View File

@ -0,0 +1,23 @@
---
title: Use Closure to Protect Properties Within an Object from Being Modified Externally
---
## Use Closure to Protect Properties Within an Object from Being Modified Externally
### Method
Just like in the example given, rather than declaring the `weight` variable with the `this` keyword, the `let` keyword must be used to declare it as a private variable. This way it can only be accessed inside the `Bird` function. The `getWeight` method must then be added inside the `Bird` function to access the `weight` variable.
### Solution
```javascript
function Bird() {
let weight = 15;
this.getWeight = function() {
return weight;
};
}
```

View File

@ -0,0 +1,36 @@
---
title: Use Dot Notation to Access the Properties of an Object
---
## Use Dot Notation to Access the Properties of an Object
### Method:
The following code will simply print `property1` from the `obj` object.
```javascript
let obj = {
property1 = 1,
property2 = 2
};
console.log(obj.property1);
```
Following this logic, use the `console.log` operation to print both `property1`and `property2`to the screen.
### Solution:
```javascript
let dog = {
name: "Spot",
numLegs: 4
};
// Add your code below this line
console.log(dog.name);
console.log(dog.numLegs);
```

View File

@ -0,0 +1,34 @@
---
title: Use Inheritance So You Don't Repeat Yourself
---
## Use Inheritance So You Don't Repeat Yourself
### Solution
Remove the "eat" method from Cat.prototype and Bear.prototype and add it to the Animal.prototype.
```javascript
function Cat(name) {
this.name = name;
};
Cat.prototype = {
constructor: Cat
};
function Bear(name) {
this.name = name;
};
Bear.prototype = {
constructor: Bear
};
function Animal() { };
Animal.prototype = {
constructor: Animal,
eat: function() {
console.log("nom nom nom");
}
};
```

View File

@ -0,0 +1,33 @@
---
title: Use Prototype Properties to Reduce Duplicate Code
---
## Use Prototype Properties to Reduce Duplicate Code
### Method:
The `prototype` property allows us you to add new properties to an object constructor from outside the original code block. The prototype property also allows you to add new functions to the objects constructor. The following code demonstrates how to use `.prototype` on an object to create a new property in the constructor.
#### Example:
```javascript
Obj.prototype.newProperty = "New Property!";
```
Using this logic, simply create a new `prototype` property for `numLegs`. The test cases can be passed by replacing the `Bird` object with the `Dog` object in the example given - `Bird.prototype.numLegs = 2;`
### Solution:
```javascript
function Dog(name) {
this.name = name;
}
Dog.prototype.numLegs = 4;
// Add your code above this line
let beagle = new Dog("Snoopy");
```

View File

@ -0,0 +1,34 @@
---
title: Verify an Object's Constructor with instanceof
---
## Verify an Object's Constructor with instanceof
### Method:
Just like in the last challenge, create a new object - `myHouse` - using the constructor given.
#### Example:
```javascript
let hound = new Dog();
```
Remember to give the `House` function a parameter to initialise the number of rooms. Then simply call the `instanceof` operator to return true on your new House.
### Solution:
```javascript
/* jshint expr: true */
function House(numBedrooms) {
this.numBedrooms = numBedrooms;
}
// Add your code below this line
let myHouse = new House(5);
myHouse instanceof House;
```