Skip to content

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Sprint-1/destructuring/exercise-1/exercise.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const personOne = {

// Update the parameter to this function to make it work.
// Don't change anything else.
function introduceYourself(___________________________) {
function introduceYourself(name, age, favouriteFood) {
Copy link

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 called name, age, and favoriteFood. 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. as name and age etc, rather than person.name and person.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.

Copy link
Author

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.

console.log(
`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`
);
Expand Down
14 changes: 14 additions & 0 deletions Sprint-1/destructuring/exercise-1/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Close, but this doesn't need the initial personOne. We're using let to declare three variables (name, age, and favouriteFood) which are mapped from the fields with those names when the object personOne on the right hand side of the assignment operator (=) is destructured, i.e. taken apart into its constituent parts.

Copy link
Author

Choose a reason for hiding this comment

The 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}.`
);
}

41 changes: 41 additions & 0 deletions Sprint-1/destructuring/exercise-2/exercise.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Copy link

Choose a reason for hiding this comment

The 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!

54 changes: 54 additions & 0 deletions Sprint-1/destructuring/exercise-3/exercise.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 :)
Copy link

Choose a reason for hiding this comment

The 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 :)