fix(guide): restructure curriculum guide articles (#36501)
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
This commit is contained in:
@@ -1,36 +1,40 @@
|
||||
---
|
||||
title: Add Methods After Inheritance
|
||||
---
|
||||
## Add Methods After Inheritance
|
||||
# Add Methods After Inheritance
|
||||
|
||||
### Method
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
Just like the following example, a new instance of an object - `Dog` - must be created and the `prototype` must be set.
|
||||
|
||||
```javascript
|
||||
|
||||
function Bird() { }
|
||||
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
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
function Animal() {}
|
||||
Animal.prototype.eat = function() {
|
||||
console.log("nom nom nom");
|
||||
};
|
||||
|
||||
function Animal() { }
|
||||
Animal.prototype.eat = function() { console.log("nom nom nom"); };
|
||||
|
||||
function Dog() { }
|
||||
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!");
|
||||
console.log("Woof woof!");
|
||||
};
|
||||
// Add your code above this line
|
||||
|
||||
@@ -38,5 +42,5 @@ let beagle = new Dog();
|
||||
|
||||
beagle.eat(); // Should print "nom nom nom"
|
||||
beagle.bark(); // Should print "Woof!"
|
||||
|
||||
```
|
||||
</details>
|
||||
|
@@ -1,80 +1,79 @@
|
||||
---
|
||||
title: Change the Prototype to a New Object
|
||||
---
|
||||
## Change the Prototype to a New Object
|
||||
# Change the Prototype to a New Object
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
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:
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
```javascript
|
||||
|
||||
Dog.prototype = {
|
||||
property: value,
|
||||
functionName: function(){
|
||||
|
||||
},
|
||||
}
|
||||
functionName: function() {}
|
||||
};
|
||||
```
|
||||
|
||||
Now try to solve the challenge!
|
||||
|
||||
<br/>
|
||||
|
||||
## Spoiler-Alert Solution Ahead!
|
||||
---
|
||||
## Solutions
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
## Solution 1:
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
function Dog(name) {
|
||||
this.name = name;
|
||||
this.name = name;
|
||||
}
|
||||
Dog.prototype = {
|
||||
// Add your code below this line
|
||||
numLegs: 2,
|
||||
eat: function(){
|
||||
console.log('nom nom nom');
|
||||
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(){
|
||||
describe: function() {
|
||||
console.log("My name is " + this.name);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Code Explanation:
|
||||
#### 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.
|
||||
</details>
|
||||
|
||||
<details><summary>Solution 2 (Click to Show/Hide)</summary>
|
||||
|
||||
|
||||
```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".
|
||||
@@ -82,5 +81,6 @@ 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)
|
||||
</details>
|
||||
|
||||
|
||||
|
@@ -1,20 +1,25 @@
|
||||
---
|
||||
title: Create a Basic JavaScript Object
|
||||
---
|
||||
## Create a Basic JavaScript Object
|
||||
# Create a Basic JavaScript Object
|
||||
|
||||
|
||||
### Method:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
let dog = {
|
||||
name: "George",
|
||||
numLegs: 4
|
||||
};
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,27 +1,30 @@
|
||||
---
|
||||
title: Create a Method on an Object
|
||||
---
|
||||
## Create a Method on an Object
|
||||
# Create a Method on an Object
|
||||
|
||||
### Method:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
An objects function must be initialised within the object itself. This is demonstrated in the following code.
|
||||
|
||||
```javascript
|
||||
|
||||
let obj = {
|
||||
property1 = 1,
|
||||
|
||||
property1: 1,
|
||||
|
||||
function1: function() {
|
||||
//Code to be exectued
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
### Solution:
|
||||
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
let dog = {
|
||||
name: "Spot",
|
||||
numLegs: 4,
|
||||
@@ -31,5 +34,6 @@ let dog = {
|
||||
};
|
||||
|
||||
dog.sayLegs();
|
||||
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,20 +1,22 @@
|
||||
---
|
||||
title: Define a Constructor Function
|
||||
---
|
||||
## Define a Constructor Function
|
||||
# Define a Constructor Function
|
||||
|
||||
### Method:
|
||||
## MProblem Explanation
|
||||
|
||||
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:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
function Dog() {
|
||||
this.name = "Geogre",
|
||||
this.color = "White",
|
||||
this.numLegs = 4;
|
||||
(this.name = "Geogre"), (this.color = "White"), (this.numLegs = 4);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,21 +1,26 @@
|
||||
---
|
||||
title: Extend Constructors to Receive Arguments
|
||||
---
|
||||
## Extend Constructors to Receive Arguments
|
||||
# Extend Constructors to Receive Arguments
|
||||
|
||||
### Method:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
function Dog(name, color) {
|
||||
this.name = name;
|
||||
this.color = color;
|
||||
this.numLegs = 4;
|
||||
}
|
||||
let terrier = new Dog("George","White");
|
||||
|
||||
let terrier = new Dog("George", "White");
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,13 +1,11 @@
|
||||
---
|
||||
title: Object Oriented Programming
|
||||
---
|
||||
## 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 -->
|
||||
|
@@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Inherit Behaviors from a Supertype
|
||||
---
|
||||
## Inherit Behaviors from a Supertype
|
||||
# Inherit Behaviors from a Supertype
|
||||
|
||||
### Method
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
To pass this challenge simply create the new `duck` and `beagle` objects using the `Object.create()` method seen in the following example.
|
||||
|
||||
@@ -13,14 +14,17 @@ let animal = Object.create(Animal.prototype);
|
||||
|
||||
```
|
||||
|
||||
### Solution
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
function Animal() { }
|
||||
function Animal() {}
|
||||
|
||||
Animal.prototype = {
|
||||
constructor: Animal,
|
||||
constructor: Animal,
|
||||
eat: function() {
|
||||
console.log("nom nom nom");
|
||||
}
|
||||
@@ -29,9 +33,10 @@ Animal.prototype = {
|
||||
// Add your code below this line
|
||||
|
||||
let duck = Object.create(Animal.prototype); // Change this line
|
||||
let beagle = 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"
|
||||
|
||||
beagle.eat(); // Should print "nom nom nom"
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,16 +1,20 @@
|
||||
---
|
||||
title: Iterate Over All Properties
|
||||
---
|
||||
## Iterate Over All Properties
|
||||
# Iterate Over All Properties
|
||||
|
||||
### Method
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
function Dog(name) {
|
||||
this.name = name;
|
||||
}
|
||||
@@ -22,15 +26,15 @@ let beagle = new Dog("Snoopy");
|
||||
let ownProps = [];
|
||||
let prototypeProps = [];
|
||||
|
||||
// Add your code below this line
|
||||
// Add your code below this line
|
||||
for (let property in beagle) {
|
||||
if(Dog.hasOwnProperty(property)) {
|
||||
ownProps.push(property)
|
||||
}
|
||||
else {
|
||||
prototypeProps.push(property)
|
||||
if (Dog.hasOwnProperty(property)) {
|
||||
ownProps.push(property);
|
||||
} else {
|
||||
prototypeProps.push(property);
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
</details>
|
@@ -1,23 +1,30 @@
|
||||
---
|
||||
title: Make Code More Reusable with the this Keyword
|
||||
---
|
||||
## Make Code More Reusable with the this Keyword
|
||||
# Make Code More Reusable with the this Keyword
|
||||
|
||||
### Method:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
let dog = {
|
||||
name: "Spot",
|
||||
numLegs: 4,
|
||||
sayLegs: function() {return "This dog has " + this.numLegs + " legs.";}
|
||||
sayLegs: function() {
|
||||
return "This dog has " + this.numLegs + " legs.";
|
||||
}
|
||||
};
|
||||
|
||||
dog.sayLegs();
|
||||
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,11 +1,18 @@
|
||||
---
|
||||
title: Override Inherited Methods
|
||||
---
|
||||
## Override Inherited Methods
|
||||
# Override Inherited Methods
|
||||
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
# Solution
|
||||
```javascript
|
||||
Penguin.prototype.fly = function() {
|
||||
return "Alas, this is a flightless bird.";
|
||||
return "Alas, this is a flightless bird.";
|
||||
};
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,22 +1,33 @@
|
||||
---
|
||||
title: Remember to Set the Constructor Property when Changing the Prototype
|
||||
---
|
||||
## 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
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
Remember to define the constructor property when you set a prototype to a new object.
|
||||
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
Dog.prototype = {
|
||||
|
||||
constructor: Dog, // Solution
|
||||
|
||||
numLegs: 2,
|
||||
numLegs: 2,
|
||||
eat: function() {
|
||||
console.log("nom nom nom");
|
||||
},
|
||||
console.log("nom nom nom");
|
||||
},
|
||||
describe: function() {
|
||||
console.log("My name is " + this.name);
|
||||
console.log("My name is " + this.name);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,26 +1,27 @@
|
||||
---
|
||||
title: Reset an Inherited Constructor Property
|
||||
---
|
||||
## Reset an Inherited Constructor Property
|
||||
# Reset an Inherited Constructor Property
|
||||
|
||||
### Method
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
function Animal() { }
|
||||
function Bird() { }
|
||||
function Dog() { }
|
||||
function Animal() {}
|
||||
function Bird() {}
|
||||
function Dog() {}
|
||||
|
||||
Bird.prototype = Object.create(Animal.prototype);
|
||||
Dog.prototype = Object.create(Animal.prototype);
|
||||
@@ -31,5 +32,6 @@ Dog.prototype.constructor = Dog;
|
||||
|
||||
let duck = new Bird();
|
||||
let beagle = new Dog();
|
||||
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,24 +1,26 @@
|
||||
---
|
||||
title: Set the Child's Prototype to an Instance of the Parent
|
||||
---
|
||||
## Set the Child's Prototype to an Instance of the Parent
|
||||
# Set the Child's Prototype to an Instance of the Parent
|
||||
|
||||
### Method
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
function Animal() { }
|
||||
function Animal() {}
|
||||
|
||||
Animal.prototype = {
|
||||
constructor: Animal,
|
||||
@@ -27,12 +29,12 @@ Animal.prototype = {
|
||||
}
|
||||
};
|
||||
|
||||
function Dog() { }
|
||||
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"
|
||||
|
||||
beagle.eat(); // Should print "nom nom nom"
|
||||
```
|
||||
</details>
|
||||
|
@@ -1,25 +1,30 @@
|
||||
---
|
||||
title: Understand Own Properties
|
||||
---
|
||||
## Understand Own Properties
|
||||
# Understand Own Properties
|
||||
|
||||
### Method:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
let canary = new Bird("Tweety");
|
||||
let ownProps = [];
|
||||
// Add your code below this line
|
||||
for(let property in canary) {
|
||||
if(canary.hasOwnProperty(property)) {
|
||||
for (let property in canary) {
|
||||
if (canary.hasOwnProperty(property)) {
|
||||
ownProps.push(property);
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,29 +1,32 @@
|
||||
---
|
||||
title: Understand the Constructor Property
|
||||
---
|
||||
## Understand the Constructor Property
|
||||
# Understand the Constructor Property
|
||||
|
||||
### Method
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
function Dog(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
// Add your code below this line
|
||||
function joinDogFraternity(candidate) {
|
||||
if(candidate.constructor === Dog) {
|
||||
if (candidate.constructor === Dog) {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
</details>
|
||||
|
||||
|
@@ -1,18 +1,23 @@
|
||||
---
|
||||
title: Understand the Immediately Invoked Function Expression (IIFE)
|
||||
---
|
||||
## Understand the Immediately Invoked Function Expression (IIFE)
|
||||
# Understand the Immediately Invoked Function Expression (IIFE)
|
||||
|
||||
### Method
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
(function() {
|
||||
console.log("A cozy nest is ready");
|
||||
})();
|
||||
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,20 +1,29 @@
|
||||
---
|
||||
title: Understand the Prototype Chain
|
||||
---
|
||||
## Understand the Prototype Chain
|
||||
# Understand the Prototype Chain
|
||||
|
||||
### Solution
|
||||
---
|
||||
## Problem Explanation
|
||||
Your code should show that Object.prototype is the prototype of Dog.prototype
|
||||
|
||||
``` javascript
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
function Dog(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
let beagle = new Dog("Snoopy");
|
||||
|
||||
Dog.prototype.isPrototypeOf(beagle); // => true
|
||||
Dog.prototype.isPrototypeOf(beagle); // => true
|
||||
|
||||
// Fix the code below so that it evaluates to true
|
||||
Object.prototype.isPrototypeOf(Dog.prototype);
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,15 +1,23 @@
|
||||
---
|
||||
title: Understand Where an Object’s Prototype Comes From
|
||||
---
|
||||
## Understand Where an Object’s Prototype Comes From
|
||||
# Understand Where an Object’s Prototype Comes From
|
||||
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
* You should use isPrototypeOf() to complete this challenge.
|
||||
|
||||
### Solution
|
||||
|
||||
``` javascript
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
function Dog(name) {
|
||||
this.name = name;
|
||||
}
|
||||
@@ -20,3 +28,4 @@ let beagle = new Dog("Snoopy");
|
||||
Dog.prototype.isPrototypeOf(beagle);
|
||||
|
||||
```
|
||||
</details>
|
||||
|
@@ -1,16 +1,20 @@
|
||||
---
|
||||
title: Use a Constructor to Create Objects
|
||||
---
|
||||
## Use a Constructor to Create Objects
|
||||
# Use a Constructor to Create Objects
|
||||
|
||||
### Method:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
function Dog() {
|
||||
this.name = "Rupert";
|
||||
this.color = "brown";
|
||||
@@ -18,5 +22,6 @@ function Dog() {
|
||||
}
|
||||
// Add your code below this line
|
||||
let hound = new Dog();
|
||||
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,16 +1,20 @@
|
||||
---
|
||||
title: Use a Mixin to Add Common Behavior Between Unrelated Objects
|
||||
---
|
||||
## Use a Mixin to Add Common Behavior Between Unrelated Objects
|
||||
# Use a Mixin to Add Common Behavior Between Unrelated Objects
|
||||
|
||||
### Method
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
let bird = {
|
||||
name: "Donald",
|
||||
numLegs: 2
|
||||
@@ -23,12 +27,11 @@ let boat = {
|
||||
|
||||
// Add your code below this line
|
||||
let glideMixin = function(obj) {
|
||||
obj.glide = function() {
|
||||
console.log("Gliding!");
|
||||
}
|
||||
obj.glide = function() {
|
||||
console.log("Gliding!");
|
||||
};
|
||||
};
|
||||
glideMixin(bird);
|
||||
glideMixin(boat);
|
||||
|
||||
|
||||
```
|
||||
</details>
|
||||
|
@@ -1,14 +1,17 @@
|
||||
---
|
||||
title: Use an IIFE to Create a Module
|
||||
---
|
||||
## Use an IIFE to Create a Module
|
||||
# Use an IIFE to Create a Module
|
||||
|
||||
### Method
|
||||
|
||||
---
|
||||
## Hints
|
||||
|
||||
### Hint 1
|
||||
|
||||
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;
|
||||
@@ -20,15 +23,17 @@ let singMixin = function(obj) {
|
||||
};
|
||||
};
|
||||
*/
|
||||
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
let funModule = (function() {
|
||||
return {
|
||||
isCuteMixin: function(obj) {
|
||||
@@ -38,15 +43,16 @@ let funModule = (function() {
|
||||
},
|
||||
singMixin: function(obj) {
|
||||
obj.sing = function() {
|
||||
console.log("Singing to an awesome tune");
|
||||
console.log("Singing to an awesome tune");
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
```
|
||||
|
||||
### Solution 2
|
||||
</details>
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
If using ES6, the same can be rewritten as:
|
||||
|
||||
@@ -63,3 +69,5 @@ let funModule = ( () => {
|
||||
}
|
||||
})();
|
||||
```
|
||||
|
||||
</details>
|
||||
|
@@ -1,28 +1,32 @@
|
||||
---
|
||||
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
|
||||
# Use Closure to Protect Properties Within an Object from Being Modified Externally
|
||||
|
||||
### Method
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
## Solutions
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
function Bird() {
|
||||
let weight = 15;
|
||||
|
||||
|
||||
this.getWeight = function() {
|
||||
return weight;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### Solution 2
|
||||
</details>
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
In ES6 syntax we can make the function a bit less verbose:
|
||||
|
||||
@@ -32,3 +36,5 @@ function Bird() {
|
||||
this.getWeight = () => weight;
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
@@ -1,29 +1,31 @@
|
||||
---
|
||||
title: Use Dot Notation to Access the Properties of an Object
|
||||
---
|
||||
## Use Dot Notation to Access the Properties of an Object
|
||||
# Use Dot Notation to Access the Properties of an Object
|
||||
|
||||
### Method:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
The following code will simply print `property1` from the `obj` object.
|
||||
The following code will simply print `1` from the `obj` object.
|
||||
|
||||
```javascript
|
||||
|
||||
let obj = {
|
||||
property1 = 1,
|
||||
property2 = 2
|
||||
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:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
let dog = {
|
||||
name: "Spot",
|
||||
numLegs: 4
|
||||
@@ -31,6 +33,6 @@ let dog = {
|
||||
// Add your code below this line
|
||||
console.log(dog.name);
|
||||
console.log(dog.numLegs);
|
||||
|
||||
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,29 +1,32 @@
|
||||
---
|
||||
title: Use Inheritance So You Don't Repeat Yourself
|
||||
---
|
||||
## 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.
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
function Cat(name) {
|
||||
this.name = name;
|
||||
};
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
Cat.prototype = {
|
||||
constructor: Cat
|
||||
};
|
||||
|
||||
function Bear(name) {
|
||||
this.name = name;
|
||||
};
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
Bear.prototype = {
|
||||
constructor: Bear
|
||||
};
|
||||
|
||||
function Animal() { };
|
||||
function Animal() {}
|
||||
|
||||
Animal.prototype = {
|
||||
constructor: Animal,
|
||||
@@ -32,3 +35,7 @@ Animal.prototype = {
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Code Explanation
|
||||
* Remove the "eat" method from Cat.prototype and Bear.prototype and add it to the Animal.prototype.
|
||||
</details>
|
@@ -1,26 +1,28 @@
|
||||
---
|
||||
title: Use Prototype Properties to Reduce Duplicate Code
|
||||
---
|
||||
## Use Prototype Properties to Reduce Duplicate Code
|
||||
# Use Prototype Properties to Reduce Duplicate Code
|
||||
|
||||
### Method:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
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:
|
||||
**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:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
function Dog(name) {
|
||||
this.name = name;
|
||||
}
|
||||
@@ -29,5 +31,6 @@ Dog.prototype.numLegs = 4;
|
||||
|
||||
// Add your code above this line
|
||||
let beagle = new Dog("Snoopy");
|
||||
|
||||
```
|
||||
|
||||
</details>
|
@@ -1,26 +1,28 @@
|
||||
---
|
||||
title: Verify an Object's Constructor with instanceof
|
||||
---
|
||||
## Verify an Object's Constructor with instanceof
|
||||
# Verify an Object's Constructor with instanceof
|
||||
|
||||
### Method:
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
Just like in the last challenge, create a new object - `myHouse` - using the constructor given.
|
||||
|
||||
#### Example:
|
||||
**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:
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
|
||||
/* jshint expr: true */
|
||||
|
||||
function House(numBedrooms) {
|
||||
@@ -30,5 +32,6 @@ function House(numBedrooms) {
|
||||
// Add your code below this line
|
||||
let myHouse = new House(5);
|
||||
myHouse instanceof House;
|
||||
|
||||
```
|
||||
|
||||
</details>
|
Reference in New Issue
Block a user