From fcbcdbfe458e5d696833ce8d568763d3ebadbb4e Mon Sep 17 00:00:00 2001 From: Amber Lowe <52145666+amberlowe1001@users.noreply.github.com> Date: Fri, 20 Dec 2019 13:04:38 -0800 Subject: [PATCH] mvp reached one strech goal reached --- .vscode/settings.json | 28 ++++++++++++++ README.md | 47 +++++++++++++++++++++-- challenges/classes.js | 52 +++++++++++++++++++++++-- challenges/functions.js | 36 ++++++++++++++---- challenges/objects-arrays.js | 74 +++++++++++++++++++++++++++++------- challenges/prototypes.js | 30 ++++++++++----- 6 files changed, 230 insertions(+), 37 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..9e1737e796 --- /dev/null +++ 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" + } +} \ No newline at end of file diff --git a/README.md b/README.md index 408612117c..ff06163803 100644 --- 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 index 992e39dc0b..f5ea702779 100644 --- 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. \ No newline at end of file +// 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 index 6e3688bfcc..3907baba2b 100644 --- a/challenges/functions.js +++ b/challenges/functions.js @@ -1,4 +1,4 @@ -// ==== Callbacks ==== +// ==== Callbacks ==== /* Step 1: Create a higher-order function * Create a higher-order function named consume with 3 parameters: a, b and cb @@ -6,27 +6,47 @@ * 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 index 659e3e149c..3aac4f23ce 100644 --- 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 { + 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); + + /* diff --git a/challenges/prototypes.js b/challenges/prototypes.js index 4cafc33e95..7fb9f22722 100644 --- a/challenges/prototypes.js +++ b/challenges/prototypes.js @@ -5,29 +5,41 @@ /* == Step 1: Base Constructor == Create a constructor function named CuboidMaker that accepts properties for length, width, and height */ - +function CuboidMaker (properties) { + this.length = properties.length; + this.width = properties.width; + this.height = properties.height; +} /* == Step 2: Volume Method == Create a method using CuboidMaker's prototype that returns the volume of a given cuboid's length, width, and height - + Formula for cuboid volume: length * width * height */ - +CuboidMaker.prototype.volume = function () { + return this.length * this.width * this.height;; +} /* == Step 3: Surface Area Method == - Create another method using CuboidMaker's prototype that returns the surface area of a given cuboid's length, width, and height. + Create another method using CuboidMaker's prototype that returns the surface area of a given cuboid's length, width, and height. Formula for cuboid surface area of a cube: 2 * (length * width + length * height + width * height) */ - +CuboidMaker.prototype.surfaceArea = function () { + return 2 * (this.length * this.width + this.length * this.height + this.width * this.height); +} /* == Step 4: Create a new object that uses CuboidMaker == Create a cuboid object that uses the new keyword to use our CuboidMaker constructor - Add properties and values of length: 4, width: 5, and height: 5 to cuboid. + Add properties and values of length: 4, width: 5, and height: 5 to cuboid. */ - +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 + console.log(cuboid.volume()); // 100 + console.log(cuboid.surfaceArea()); // 130