I ran through the course yesterday and today, and this was one of my least favorite of the assignments because the requirements are a little unclear, and the function you are being asked to write does too many things that should be separated out into smaller pieces.
Here’s what I ended up with, and the main reason I have this code is that I failed tests initially and I wanted to debug it, so I put it into a standalone html file I could edit in atom + liveserver and debug in chrome easily. As someone who already knows javascript fairly well, it was one of only a few lessons where I wrote code that didn’t pass on the first attempt.
In particular, here is where there is some possible confusion to the way the requirements are described:
If prop is "tracks" but the album doesn’t have a "tracks" property, create an empty array before adding the new value to the album’s corresponding property.
Then …
If value is empty ( "" ), delete the given prop property from the album.
In the first case you have a requirement that is also telling you how to do something, which is unusual. There is no reason that I should have to create an empty array prior to adding an array property, so long as it’s clear that the requirement is that tracks is an array of strings, with the titles of the tracks – should it exist.
In the case where value is empty, how do you interpret the “tracks” instruction that precedes it? Typically ordering of requirements is important. Things fell into place for me once, I concluded that the first decision point, is whether or not the value param is empty.
Case #1: (value param is empty)
-- Remove the prop if it exists.
Case #2: (value param is not empty)
-- Update the object property
2a. (prop is "tracks"):
2ai. ("tracks" prop doesn't exist?):
-- create it as empty array
-- push value onto "tracks" array.
2b. (prop is not tracks):
-- update property
The most important decision I had to make was how to prioritize and order the decisions.
The 2nd decision was deciding whether or not the prop was “tracks”.
Once it was clear that these decisions matched the requirement, writing the code had a clear and simple structure with an if - else.
There are some things about javascript that make working with javascript objects, such that they are, very easy. For example, unlike most languages, you can just add a property to a javascript object anytime you want using either the dot or array notation. If the property existed, it updates it, and if it did not, it adds it as a property.
The other thing I think this lesson is trying to test you on, is your understanding of when you can call a built in class function like array.push(). If you try and call that code on a property that is not an array, you are going to get a runtime error, so this lesson is emphasizing that point, and trying to make sure you think that through and make sure that you have an array to work with prior to trying to call its push function.
One way to get better at programming is to read other people’s code, break it down and be sure you understand how it works.
Now by no means do I think what I ended up with is great code, but it is a solution that passes the tests, and follows the outline above. I didn’t write down that outline, before I wrote the code, but in terms of writing some pseudocode, it would have allowed me to write the code I eventually came up with.
If you want to see the code I ended with, here it is:
function updateRecords(id, prop, value) {
if (value != "") {
if (prop == "tracks") {
if (!collection[id].hasOwnProperty(prop)) {
collection[id][prop] = [];
}
collection[id][prop].push(value);
} else {
collection[id][prop] = value;
}
} else if (value == "" && collection[id].hasOwnProperty(prop)) {
delete collection[id][prop];
}
return collection;
}
Personally, what I try to do is short circuit functions whenever possible. What I mean by that is that if you have a condition where the requirement allows you to decide a function result, you should move that to the top of the function, rather than have an if-then construct. For example, in this exercise, once I concluded that there was a branch on value being empty, I could have written this code:
if (value == "") {
if (collection[id].hasOwnProperty(prop)) {
delete collection[id][prop];
}
return collection;
}
// execution only continues if there is a value
This is best practice, and would have been better than what I wrote, and if it was important enough to review it, I would probably have seen that and gone back and refactored it.
Learning to code is a journey that never ends. You will get better at it the more you practice, the more you read other code, and the more you work on projects with other people, many who will be better coders than you are.
Try to remind yourself that like most things, you will get better at it if you are persistent. I think that a lot of people think that you “learn how to program” in a particular language, and after that you write perfect code and if you aren’t/don’t then you’re never going to be able to program, when that just isn’t reality.
Secondly, javascript is a strange language with some unusual features that can be very confusing. It’s also been evolving rapidly the last few years. On top of that, the reason people are often learning or using javascript is because they are writing clientside UI code for browsers, which introduces a whole slew of complicated technologies. Try not to let it overwhelm you.
Last but not least, this course is less a course on javascript than it is a quick (albeit complete) survey of the language basics. There are books and courses that take a lot more time illustrating and going into examples. The important syntax you want to get out of this course most of which were borrowed from the c language:
-variable types and assignments
-operators including postfix (++,–) and shortcuts
-the ternary operator
-what is a string and what built in properties are useful with strings
-what is an array and what are some common array functions
-global vs local scope
-types of loops (for, while)
-if then else and switch
-functions, parameters and return values
-javascript object syntax (and json)
This is just off the top of my head, but once you have a good idea about how these work in javascript, you will find the concepts not to mention the syntax is nearly the same in many other languages including c, c++, php, objective c and c# to name just a few.
this is one of the best things ever. Not only did I learned that I should use paper and take it slow and allot of other tips and tricks but, that I was not the only one that was having this problem and was strugeling so much onto it. Thank you and everyone for the great advice <3