bracket notation: why is my brain broken?

I’m afraid these posts are already turning into me just complaining about hard concepts.

And they are sorta… But, if you’re a fellow kvetcher, welcome! You’ll never hear “good vibes only” come out of my mouth. Except just then, to say that I wont say them.

I digress. Learning all day every day is exhausting. It is a privilege. But for me, it’s also utterly draining. I found that my mind appreciates long stretches of time where I either don’t think about anything (i.e. watch British panel shows). Or I only think about the things I want to think about — … say, when we leave the house without our dog (Matilda), does she think we are going to the dog park without her?

I digressed again. Bracket notation! I’m writing this post 4 days before Mod 2’s final assessment . I’m writing it because I suspect the reason I’m having such a difficult time with the more complicated iteration problems is because my grasp of bracket notation is poor. Hopefully I can fix that today.

The Basics

First, let’s talk about what bracket notation isn’t.

It isn’t dot notation.

When do you use dot notation? When you know the exact property you want to access. JavaScript interprets the expression in the exact way you write it and looks for that exact key.

Then when do we use bracket notation?

When we don’t know the property key, or if they key changes (iterators, wink wink). By adding those square brackets, we are forcing JavaScript to do one more step and evaluate everything in between the brackets.

[ evaluationInProcess ]

Js finds the key that matches what your brackets evaluated to, and returns the value.

This is obviously simplified. But the main take away is that bracket notation is your friend when the property that you are looking for is unknown or will change.

For my purposes, I want to go through a few iterator problems and annotate each line explicitly. And I have NO idea who is ever going to read this — maybe a Mod2 Turing student? Maybe my future boss (hey boss, looking good today!).

Here is the data we are playing with. What do you notice?

const orders = [
  {
    type: 'cake',
    name: 'Strawberries & Cream Cake',
    price: 40,
    size: 6,
    customer: 'Olivia',
    specialConsiderations: 'gluten free*pick up on Thursday afternoon*birthday cake'
  },
  {
    type: 'tart',
    name: 'Chocolate Raspberry Tart',
    price: 25,
    size: 8,
    customer: 'Cody',
    specialConsiderations: 'pick up on Friday*no allergies'
  },
  {
    type: 'cake',
    name: 'Chocolate Cake',
    price: 40,
    size: 6,
    customer: 'Ramiro',
    specialConsiderations: 'olive oil allergy*add cream cheese icing*simple decoration'
  },
  {
    type: 'cake',
    name: 'Funfetti Cake',
    price: 0,
    size: 6,
    customer: 'Leta',
    specialConsiderations: 'none'
  }
];

It’s an array (thank goodness)!

Also, omg I have remember to add my own ending brackets and parentheses in Medium’s code block. Yeesh.

Below are the problems, solutions, and the way I went about solving the problem. There are many ways beside my own.

Level One

Write a function that will total up the profit of all orders.

A SOLUTION:
const profit = () => {
  return orders.reduce((acc, order) => {
     acc += order.price
    return acc
  }, 0)
}
THE RETURN:
105
THE BREAKDOWN:
// an arrow function called profit with no parameter
const profit = () => {
// iterating through orders array - with my accumulator and each order
  return orders.reduce((acc, order) => {
// accumulator is adding each order's price to the total each loop
    acc += order.price
// always return your accumulator
    return acc
// my initial value is 0 - adding to this each loop
 }, 0)
}

Level Two

Refactor your function to organize your orders by type (ex: ‘cake’ and ‘tart’) — keeping track of the names and total profit for that type.

A SOLUTION: 
const profit = () => {
  return orders.reduce((acc, order) => {
    if (!acc[order.type]) {
      acc[order.type] = {names: [], totalProfit: 0}
    }
    acc[order.type].names.push(order.name)
    acc[order.type].totalProfit += order.price
  return acc
  }, {})
}

THE RETURN:
{
  cake: {
    names: [ 'Strawberries & Cream Cake', 'Chocolate Cake', 'Funfetti Cake' ],
    totalProfit: 80
  },
  tart: { names: [ 'Chocolate Raspberry Tart' ], totalProfit: 25 }
}

THE BREAKDOWN: 
const separateTypes = () => {
// iterate through orders array
  return orders.reduce((acc, order) => {
// IF the accumulator object doesn't already have "cake" or "tart" as a property...
    if(!acc[order.type]) {
// THEN name the key whatever order.type evaluates to and assign it to an empty object
      acc[order.type] = {}
// THEN assign give that object another property "names" and assign  the value to an empty array
      acc[order.type].names = []
// THEN give that object another property "totalProfit" and assign the value to zero      
      acc[order.type].totalProfit = 0
    }
// Your IF statement is over - NOW, push the name of each order into the names array
    acc[order.type].names.push(order.name)
// And add each oder's price to the total profit   
   acc[order.type].totalProfit += order.price
// You're done baby
  return acc
  }, {})
}

That was an example using just one dataset — I find the brackets get a bit more confusing when you are working with two data sets ands need to start using Object.keys or Object.values.