-
-
Notifications
You must be signed in to change notification settings - Fork 90
ITP Jan 25 | Katarzyna Kazimierczuk | Data Flows | Sprint 1 #211
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -30,4 +30,18 @@ console.log(`Batman is ${firstName}, ${lastName}`); | |
# Exercise | ||
|
||
- What is the syntax to destructure the object `personOne` in exercise.js? | ||
const personOne = { | ||
name: "Popeye", | ||
age: 34, | ||
favouriteFood: "Spinach", | ||
}; | ||
|
||
let personOne { name, age, favouriteFood } = personOne | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Close, but this doesn't need the initial There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It absolutely does not! It's now corrected. |
||
|
||
- Update the parameter of the function `introduceYourself` to use destructuring on the object that gets passed in. | ||
unction introduceYourself(name, age, favouriteFood) { | ||
console.log( | ||
`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.` | ||
); | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -70,3 +70,44 @@ let hogwarts = [ | |
occupation: "Teacher", | ||
}, | ||
]; | ||
|
||
|
||
//1 | ||
// const newItem = oldItem.filter(({ propWeWant }) => propWeWant === 'propValue') | ||
|
||
const sortingHat = (hogwarts) => { | ||
// filter gryffindor | ||
const filtered = hogwarts.filter(({ house }) => house === "Gryffindor"); | ||
|
||
// return names | ||
let gryffindor = []; | ||
filtered.forEach(({ firstName, lastName }) => { | ||
gryffindor.push(`${firstName} ${lastName}`); | ||
}) | ||
|
||
return gryffindor; | ||
} | ||
|
||
//2 | ||
// const newItem = oldItem.filter(({ propWeWant1, propWeWant2 }) => propWeWant 1 === 'propValue' && propWeWant2 === 'propValue2') | ||
// or if checking if prop exists | ||
// const newItem = oldItem.filter(({ propWeWant1, propWeWant2 }) => propWeWant 1 === 'propValue' && propWeWant2) | ||
const findTeachersWithPets = (hogwarts) => { | ||
let teachersWithPets = []; | ||
|
||
// filter teachers | ||
// const filtered = hogwarts.filter(({ occupation, pet }) => occupation === 'Teacher'); | ||
|
||
// check for pets | ||
// const withPets = filtered.filter(({ pet }) => pet)); | ||
|
||
//filter for teachers with pets | ||
const filtered = hogwarts.filter(({ occupation, pet }) => occupation === 'Teacher' && pet); | ||
|
||
|
||
filtered.forEach(({ firstName, lastName }) => { | ||
teachersWithPets.push(`${firstName} ${lastName}`); | ||
}) | ||
|
||
return teachersWithPets; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. When I add the lines: console.log(sortingHat(hogwarts));
console.log(findTeachersWithPets(hogwarts)); I do get the expected output when running the file. You've used destructuring effectively here to pick out from objects only the specific fields that you need. Good stuff! |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,3 +6,57 @@ let order = [ | |
{ itemName: "Hot Coffee", quantity: 2, unitPricePence: 100 }, | ||
{ itemName: "Hash Brown", quantity: 4, unitPricePence: 40 }, | ||
]; | ||
|
||
// const newItem = oldItem.filter(({ propWeWant1, propWeWant2 }) => propWeWant 1 === 'propValue' && propWeWant2 === 'propValue2') | ||
|
||
|
||
|
||
// - In `exercise.js`, you have been provided with a takeout order. Write a program | ||
// that will print out the receipt for this order. | ||
|
||
//helpers | ||
//cost of item in order | ||
const calculateCostPerItemimPounds = ({ quantity, unitPricePence }) => { | ||
let costPerItem = (quantity * unitPricePence) | ||
|
||
//in pounds | ||
costPerItem = costPerItem / 100; | ||
return costPerItem | ||
} | ||
|
||
//add cost of item to the order | ||
const addTotalProp = (order) => { | ||
order.forEach(item => { | ||
const costPerOrder = calculateCostPerItemimPounds(item) | ||
//add total cost | ||
item.costPerOrder = costPerOrder; | ||
}) | ||
} | ||
|
||
//calculate total of order | ||
const calculateOrderTotal = (order) => { | ||
let totalCost = 0; | ||
|
||
order.forEach(item => { | ||
//add total cost | ||
totalCost += item.costPerOrder; | ||
}) | ||
return totalCost; | ||
} | ||
|
||
const createReceipt = (order) => { | ||
addTotalProp(order); | ||
// / - Log each individual item to the console. | ||
order.forEach(({ itemName, quantity, costPerOrder }) => { | ||
console.table([{ itemName, quantity, costPerOrder }]); | ||
}); | ||
|
||
// - Log the total cost of the order to the console. | ||
//getting an error when trying console.table | ||
console.log(`Total: £${calculateOrderTotal(order).toFixed(2)}`); | ||
|
||
} | ||
|
||
createReceipt(order); | ||
|
||
//I have the receipt in a table format it is not identical to the one in the example but it is a table format :) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It certainly is a table format :) Usually when we have an expected format we want to follow that format - but you've done the destructuring part here fine and all the numbers are correct, so this is fine :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When this script is now run, what happens?
There are three different parameters defined here in the function - the place where the function is called only passes in one argument, which is the
personOne
object. This contains fields that happen to be calledname
,age
, andfavoriteFood
. Restructuring gives us a way to pass a whole object into a function, but for the function to pick out only the fields it needs, and to access them in a simple way (i.e. asname
andage
etc, rather thanperson.name
andperson.age
which can get needlessly repetitive).I would have a look at this section of the MDN documentation for destructuring in JavaScript, which gives some relevant examples - notice the brace (
{
and}
) characters inside the parentheses in the function definition. This kind of syntax is subtle, and a bit magical, but hopefully at some point it will click for you. It's definitely commonly used in JavaScript and TypeScript these days.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
of course, it should be ({name, age, favouriteFood}), with the current one will get undefined.