alowefulltime · amberlowe1001 · Dec 20, 2019
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,28 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBarBadge.background": "#AB47BC",
+        "list.activeSelectionForeground": "#AB47BC",
+        "list.inactiveSelectionForeground": "#AB47BC",
+        "list.highlightForeground": "#AB47BC",
+        "scrollbarSlider.activeBackground": "#AB47BC50",
+        "editorSuggestWidget.highlightForeground": "#AB47BC",
+        "textLink.foreground": "#AB47BC",
+        "progressBar.background": "#AB47BC",
+        "pickerGroup.foreground": "#AB47BC",
+        "tab.activeBorder": "#AB47BC",
+        "notificationLink.foreground": "#AB47BC",
+        "editorWidget.resizeBorder": "#AB47BC",
+        "editorWidget.border": "#AB47BC",
+        "settings.modifiedItemIndicator": "#AB47BC",
+        "settings.headerForeground": "#AB47BC",
+        "panelTitle.activeBorder": "#AB47BC",
+        "breadcrumb.activeSelectionForeground": "#AB47BC",
+        "menu.selectionForeground": "#AB47BC",
+        "menubar.selectionForeground": "#AB47BC",
+        "editor.findMatchBorder": "#AB47BC",
+        "selection.background": "#AB47BC40",
+        "activityBar.background": "#5B0F21",
+        "titleBar.activeBackground": "#80152E",
+        "titleBar.activeForeground": "#FEFBFC"
+    }
+}
diff --git a/README.md b/README.md
@@ -28,16 +28,57 @@ Demonstrate your understanding of this week's concepts by answering the followin

 Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your team lead

-1. Describe the biggest difference between `.forEach` & `.map`.
+1.forEach loops through every element in an array. It is best used to invoke functions on every element (or console.log all elements for debugging purposes).
+
+It does not automatically create a new array. However, it is possible to manipulate .forEach to act as map by creating a new array before using .forEach and using .push within the .forEach:
+
+    let arr = ['amber', 'lowe'];
+
+
+    let newForEachArr = [];
+     arr.forEach(el => newForEachArr.push(`${el}@gamil.com`));
+
+     console.log(newForEachArr);   //  [ 'amber@gamil.com', 'lowe@gamil.com' ]
+
+    .map always creates a new array. Using .map to achieve the same result as above is much simpler.
+
+    let newMapArr = arr.map(el => `${el}@gamil.com`);
+
+    console.log(newMapArr);       //  [ 'amber@gamil.com', 'lowe@gamil.com' ]

 2. What is the difference between a function and a method?

+        A method is a function. But not every function is a method.
+
+         A method is a function that is inside an object.
+
 3. What is closure?

+         Closure is a way to capture information to be used later outside of its scope.
+
 4. Describe the four rules of the 'this' keyword.

+        4 ways to determine what 'this' is pointing to (aka What is the calling object?) in order of precedence:
+
+        1)  new binding: when new is used with prototypes a new object instance is created. 'this' within the newly created instance will provide its own properties (instead siblings, parents, etc.)
+
+         2)        .call(), .apply(), .bind() explicitly bind this to the first parameter within the ().
+
+        .call(objToBind, paramOneOfObjToBind, paramTwoOfObjToBind, etc.)
+         .apply(objToBind, [arrayOfAllTheParamsForObjToBind])
+         .bind(objToBind)        => This does not invoke the method. It must be later executed.
+
+         3)  implicit binding: is when a method is called. Here the object is to the left of the method. Example: obj.myFunkyFunc();
+
+         4) global / window binding. When this has not been bound by the 3 other ways above, it is bound to the global or window binding (which generally should be avoided.)
+
+
 5. Why do we need super() in an extended class?

+         When creating prototypes using classes, super() acts as the .call including this when creating prototypes without using classes. In other words, super binds child to parent so child has access to the parent's properties (but not vice versa).
+
+
+
 ## Project Set up

 Follow these steps to set up and work on your project:
@@ -65,11 +106,11 @@ Your finished project must include all of the following requirements:
 **Pro tip for this challenge: If something seems like it isn't working locally, copy and paste your code up to codepen and take another look at the console.**

 ## Task 1: Objects and Arrays
-Test your knowledge of objects and arrays. 
+Test your knowledge of objects and arrays.
 * [ ] Use the [objects-arrays.js](challenges/objects-arrays.js) link to get started.  Read the instructions carefully!

 ## Task 2: Functions
-This challenge takes a look at callbacks and closures as well as scope. 
+This challenge takes a look at callbacks and closures as well as scope.
 * [ ] Use the [functions.js](challenges/functions.js) link to get started. Read the instructions carefully!

 ## Task 3: Prototypes

diff --git a/challenges/classes.js b/challenges/classes.js
@@ -1,7 +1,53 @@
 // 1. Copy and paste your prototype in here and refactor into class syntax.
+class CuboidMaker {
+    constructor(properties) {
+        this.length = properties.length;
+        this.width = properties.width;
+        this.height = properties.height;
+    }
+
+    volume() {
+        return this.length * this.width * this.height;;
+    }
+
+    surfaceArea() {
+        return 2 * (this.length * this.width + this.length * this.height + this.width * this.height);
+    }
+}
+
+const cuboid = new CuboidMaker({
+    length: 4,
+    width: 5,
+    height: 5,
+});
+
+// Test your volume and surfaceArea methods by uncommenting the logs below:
+console.log(cuboid.volume()); // 100
+console.log(cuboid.surfaceArea()); // 130
+
+// Stretch Task: Extend the base class CuboidMaker with a sub class called CubeMaker.  Find out the formulas for volume and surface area for cubes and create those methods using the dimension properties from CuboidMaker.  Test your work by logging out your volume and surface area.
+
+class CubeMaker extends CuboidMaker {
+    constructor(cubeProperties) {
+        super(cubeProperties);
+        this.edge = cubeProperties.edge;
+    }
+    volume() {
+        return this.edge ** 3;
+    }
+
+    surfaceArea() {
+        return 6 * this.edge ** 2;
+    }
+}
+
+const cube = new CubeMaker({
+    edge: 7,
+});
+

 // Test your volume and surfaceArea methods by uncommenting the logs below:
-// console.log(cuboid.volume()); // 100
-// console.log(cuboid.surfaceArea()); // 130
+ console.log(cuboid.volume()); // 100
+ console.log(cuboid.surfaceArea()); // 130

-// Stretch Task: Extend the base class CuboidMaker with a sub class called CubeMaker.  Find out the formulas for volume and surface area for cubes and create those methods using the dimension properties from CuboidMaker.  Test your work by logging out your volume and surface area.
+// Stretch Task: Extend the base class CuboidMaker with a sub class called CubeMaker.  Find out the formulas for volume and surface area for cubes and create those methods using the dimension properties from CuboidMaker.  Test your work by logging out your volume and surface area.
diff --git a/challenges/functions.js b/challenges/functions.js
@@ -1,32 +1,52 @@
-// ==== Callbacks ====  
+// ==== Callbacks ====

 /* Step 1: Create a higher-order function
  * Create a higher-order function named consume with 3 parameters: a, b and cb
  * The first two parameters can take any argument (we can pass any value as argument)
  * The last parameter accepts a callback
  * The consume function should return the invocation of cb, passing a and b into cb as arguments
 */
-
+function consume (first, second, callback) {
+  return callback(first, second);
+}
+const step1 = consume('Amber', 'Lowe', function (first, last) {
+  return `${first} ${last}`;
+})
+console.log(step1);

 /* Step 2: Create several functions to callback with consume();
  * Create a function named add that returns the sum of two numbers
-  * Create a function named multiply that returns the product of two numbers 
+  * Create a function named multiply that returns the product of two numbers
  * Create a function named greeting that accepts a first and last name and returns "Hello first-name last-name, nice to meet you!"
 */
+function add (num1, num2) {
+  return num1 + num2;
+}

+function multiply (num1, num2) {
+  return num1 * num2;
+}
+
+function greeting (first, last) {
+  return `Hello ${first} ${last}, nice to meet you!`;
+}

 /* Step 3: Check your work by un-commenting the following calls to consume(): */
-// console.log(consume(2, 2, add)); // 4
-// console.log(consume(10, 16, multiply)); // 160
-// console.log(consume("Mary", "Poppins", greeting)); // Hello Mary Poppins, nice to meet you!
+ console.log(consume(2, 2, add)); // 4
+ console.log(consume(10, 16, multiply)); // 160
+ console.log(consume("Mary", "Poppins", greeting)); // Hello Mary Poppins, nice to meet you!


-// ==== Closures ==== 
+// ==== Closures ====

 // Explain in your own words why nestedfunction can access the variable internal.

-// Explanation: 
+// Explanation:
+
+// Scope created by functions, if/else statements, things inside curly braces, etc act like a one-way mirror that can see everything that comes before it is called.
+//external is in the global scope. internal is with the local scope created by the myFunction function. nestedFunction has access to both the global scope that comes before it is called and the local scope created by the myFunction function before it is called (which is why nestedFunction can log one, but two gets a ReferenceError that two is not defined.)

+// JS reads/compiles the code twice. Once to gather the names of all the variables and the second time to assign the value to those variables.

 const external = "I'm outside the function";


diff --git a/challenges/objects-arrays.js b/challenges/objects-arrays.js
@@ -1,12 +1,37 @@
 // ==== Objects ====

-/* 
-  Given the following information about dinosaurs, create 3 objects: 
-  Use this pattern to create your objects: 
+/*
+  Given the following information about dinosaurs, create 3 objects:
+  Use this pattern to create your objects:
  object name, diet, weight, length, period
 */

 // tyrannosaurus, carnivorous, 7000kg, 12m, Late Cretaceous
+const tyrannosaurus = {
+  name: 'tyrannosaurus',
+  diet: 'carnivorous',
+  weight: '7000kg',
+  length:'12m',
+  period: 'Late Cretaceious',
+  roar(){
+    return "RAWARRRAR!";
+  }
+}
+const stegosaurus = {
+  name: 'stegosaurus',
+  diet: 'herbivorous',
+  weight: '2000kg',
+  length:'9m',
+  period: 'Late Jurassic'
+
+}
+const velociraptor = {
+  name: 'velociraptor',
+  diet: 'carnivorous',
+  weight: '15kg',
+  length:'1.8m',
+  }
+

 // stegosaurus, herbivorous, 2000kg, 9m, Late Jurassic

@@ -15,20 +40,20 @@
 // Using your dinosaur objects, log answers to these questions:

 // How much did tyrannosaurus weigh?
-console.log();
+console.log(tyrannosaurus.weight);

 // What was the diet of a velociraptor?
-console.log();
+console.log(velociraptor.diet);

 // How long was a stegosaurus?
-console.log();
+console.log(stegosaurus.length);

 // What time period did tyrannosaurus live in?
-console.log();
+console.log(tyrannosaurus.period);


 // Create a new roar method for the tyrannosaurus.  When called, return "RAWERSRARARWERSARARARRRR!" Log the result.
-console.log();
+console.log(tyrannosaurus.roar());


 // ==== Arrays ====
@@ -52,19 +77,30 @@ const graduates = [

 Once you have the new array created, sort the universities alphabetically and log the result. */
 const universities = [];
+for(i=0; i<graduates.length; i++){
+  universities.push(graduates[i].university);
+}
+universities.sort();
 console.log(universities);

 /* Request 2: Create a new array called contactInfo that contains both first name and email of each student. This will be an array of strings.

-The resulting contact information strings should have a space between the first name and the email, like this: 
+The resulting contact information strings should have a space between the first name and the email, like this:
 "Josh josh@example.com"

 Log the result of your new array. */
 const contactInfo = [];
+graduates.forEach(graduate => {
+  contactInfo.push(`${graduate.first_name} ${graduate.email}`)
+});
+
 console.log(contactInfo);

 /* Request 3: Find out how many universities have the string "Uni" included in their name. Create a new array called unisWithUni that contains them all. This will be an array of objects. Log the result. */
 const unisWithUni = [];
+for(i=0; i< universities.length; i++) {
+  if(universities[i].indexOf('unisWithUni')>-1){unisWithUni.push(universites[i])};
+}
 console.log(unisWithUni);


@@ -91,6 +127,8 @@ The zoos want to display both the scientific name and the animal name in front o

 */
 const displayNames = [];
+zooAnimals.forEach(zooAnimals => displayNames.push(`${zooAnimals.scientific_name} ${zooAnimals.animal_name}`));
+
 console.log(displayNames);

 /* Request 2: .map()
@@ -100,23 +138,31 @@ The zoos need a list of all their animal's names (animal_name only) converted to
 */

 const lowCaseAnimalNames = [];
+const lowerCase = zooAnimals.map(animal => animal.animal_name.toLowerCase());
+console.log(lowerCase);
+
 console.log(lowCaseAnimalNames);

-/* Request 3: .filter() 
+/* Request 3: .filter()

 The zoos are concerned about animals with a lower population count. Using filter, create a new array of objects called lowPopulationAnimals which contains only the animals with a population less than 5.

 */
-const lowPopulationAnimals = [];
+const lowPopulationAnimals = zooAnimals.filter(zooAnimal => zooAnimal.population < 5)
 console.log(lowPopulationAnimals);

-/* Request 4: .reduce() 
+/* Request 4: .reduce()

 The zoos need to know their total animal population across the United States. Find the total population from all the zoos using the .reduce() method. Remember the reduce method takes two arguments: a callback (which itself takes two args), and an initial value for the count.

 */
-const populationTotal = 0;
-console.log(populationTotal);
+
+const populationTotal1 = zooAnimals.reduce(function(accumulator , currentValue){
+return accumulator + currentValue.population
+},0)
+console.log(populationTotal1);
+
+


 /*