Day 17, #100DaysOfCode #Javascript - Task on Manipulating Objects, Arrays, and Boolean Conditions - March 6, 2022

Okay, this is a short but fascinating one (at least for me it was :))

I wrote a Javascript function that updates a record collection based on preset rules.

The rules are on the image below, and they required me to think quite deeply before I could make meaning of it.

When I came across it at first, I read the instruction and then closed the window; I was like, Nah... Not now??.

I rechecked it towards nightfall; it still wasn't falling into place in my head. I couldn't deal. I left it.

The next day was quite hectic for me, so I couldn't get to it. The third day was a Sunday, so I looked it up again, early before Church.

This time, I read the instructions repeatedly, got a pen and paper, like I have learned to do, and the pieces began to fall into shape one after the other, one line of code at a time. ??

Felt like a rush... I scribbled code on paper as it came to my head while parsing through the instructions.

Here's what I wrote out (my handwriting can be horrid when I'm writing out my thoughts, believe me, it's way more pleasing than this when I'm settled and collected ??) if you can't make sense of it, that expected and it's okay.

Now I must say this involved some back and forths. I had to do a Google search at some point to look up something I've learned before(arrays I'm looking at you??), at another time, I was going through my previous posts trying to look up how I did what I did in the post (updating objects using dot notation - linkedin.com/pulse/day-15-100daysofcode-javascript-manipulating-feb-17-ogunniran-, https://lnkd.in/gfpc3hf7 ).

Man, it was interesting as it was exhausting...??... I had a slight headache when I was done(okay, maybe 90% done), and then I left for Church. The code didn't execute successfully, but I had something to troubleshoot. That alone was fulfilling for me ??.

When I returned, I got to it again made some minor adjustments, but it still wasn't executing as intended, and I just got confused as to what could have gone wrong.

I checked through all the conditions I ought to meet; I met them all. I was at a total loss. What could have gone wrong?

I checked through my code for incorrect use of variables, functions, and code syntax; all was intact(I eventually found about two that I corrected later, though).

It still wasn't working until I looked up the hint section of the task, and I noticed a tiny bit that I didn't think could matter. I'll point it out as I explain the solution I arrived at.

First of all, please have a cup of water; you have to stay refreshed. ??

While writing out my thoughts, I reached the following conclusions as requirements for solving the task(in my head)

My Conclusions

1. I'll need a bunch of if/else statements - I tried to avoid using it, but no other option came as clean, and so I stuck with it.
2. I'll need to use Boolean conditions to test the validity of the function arguments based on the requirements given in the task.
3. I'll need to use the "hasOwnProperty()" function to check if a property is present within an object or not.
4. I'll need to update Arrays using one of the array functions I learned earlier - push().
5. I'll need the delete keyword to remove properties from objects.

This came together to produce a cohesive structure for my code in conjunction with the instructions.

// Setup
const recordCollection = {
  2548: {
    albumTitle: 'Slippery When Wet',
    artist: 'Bon Jovi',
    tracks: ['Let It Rock', 'You Give Love a Bad Name']
  },
  2468: {
    albumTitle: '1999',
    artist: 'Prince',
    tracks: ['1999', 'Little Red Corvette']
  },
  1245: {
    artist: 'Robert Palmer',
    tracks: []
  },
  5439: {
    albumTitle: 'ABBA Gold'
  }
};

// Only change code below this line
function updateRecords(records, id, prop, value) {
  if(prop !== "tracks" && value !== ""){
    records[id][prop] = value;
  } else if (prop === "tracks" && records[id].hasOwnProperty("tracks") == false){
    records[id][prop] = [];
    records[id][prop].push(value);
  } else if( prop === "tracks" && value !== ""){
    records[id][prop].push(value);
  } else if( value === "") {
    delete records[id][prop];
  }
  return records;
}

updateRecords(recordCollection, 5439, 'artist', 'ABBA');        

So what prevented me from getting my code executed earlier?

Simple -- my use of the dot and bracket notation.

I just chained the object Properties using the dot notation all through.

I assume this cause caused conflicts, as I also had to use the dot notation in conjunction with functions and Arrays.

I got a fix to change how I accessed my arrays from dot notations into bracket notations.

So that meant; ????

records.id.prop.push(value); //would become

records[id][prop].push(value);        

It was crazy at first as I wondered how that would be an issue since they essentially performed the same function except that bracket notation allowed for strings with spaces while dot notation doesn't.

There are other exceptions such as accessing of properties using variables and dot's notation limitation to accessing only properties starting with alphanumeric characters (plus _ and $)

It didn't make sense until I consulted the two articles below. ????

https://medium.com/dailyjs/dot-notation-vs-bracket-notation-eedea5fa8572

https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781

Based on what I was able to read, the fix I employed is drawn from the Air BnB style guide, and It goes thus ????

Airbnb's style guide.

"Always use Dot. And when you want to access object property with a variable, use Bracket" ??

Conclusion

It made more sense because I accessed the object properties using a function argument, which could also pass as using a variable.

It became clear to me, and I think it's something worth keeping in mind regarding accessing Javascript Objects from now on. It was an exciting learning experience for me, and I hope it's the same for you.

Thanks for reading until this point, and I hope you were able to glean one or two points from what I shared.

If you feel I could do this in a better fashion, please don't hesitate to use the comments; I'd be super glad to read your thoughts on this.

Found this useful? Please leave a reaction.

Thank you and see you when I learn again! ??

David.

#100DaysOfCode

Photo Credit: Photo by Mars on Unsplash Giphy