Basic JS: RC Lesson

JavaScript
1

Hello,

I’m going through Basic JavaScript I got to the lesson above. It is here ( https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/record-collection).

I have absolutely no idea on how to proceed. I looked at the hints and the results and they make no sense to me. Please help.

2

Welcome, davrias.

What specifically is confusing you?

You need to change the function to fulfill the bullet points listed in the instructions.

1 Like
3

Hello. Thank you for your quick response. Please forgive me if my response is hard to understand, I am still not entirely familiar with the proper terminology.

I suppose I’m trying to figure out what we’re trying to accomplish. Based on the updateRecords function already present, I guess we are trying to write code which will change the records above the “// Only change code below this line” line.

If I am correct, we have to call or summon the code above that line and change it. But change it to what?

I’m not very good at this; I’ve had a hard time getting through the JavaScript lessons, but this is like hitting a brick wall. Thank you for any help you can offer.

1 Like
4

Hey buddy. This particular lesson was an absolute brick wall for me too and it took me aaaaaaaages and lots of trial and error to get through it. I think it’s a real difficulty spike compared the the previous lessons.

What helped me was to really break it down into tiny bits. So, for example, the first rule is:

If prop isn't tracks and value isn't an empty string, update or set that album's prop to value.

which written as a conditional statement would look like:

if(prop !== 'tracks' && value !== '') {
  object[id][prop] = value;
}

Does that help at all?

1 Like
5

The requirements for the challenge can be difficult to understand. I agree with @gordon_woodbine that you should break it down and try not to get overwhelmed by all the requirements.

Side note: I believe the challenge was updated at some point and it’s better than it used to be, but I personally think there might simply be too many requirements for one challenge. Which can make it less of a learning experience and end up just having people copy-pasting the solution code.

1 Like
6

Hello,

Yes, this does get me started. Thank you very much.

I think part of my problem is the lack of a clear output. In the HTML and CSS lessons, there was a separate screen showing what the code was doing, and it updated as you did things. In JS there isn’t, so I’m having a more difficult time.

Thanks again.

7

Hello,

Thank you. The reason I came here to ask is that, even after looking at the solution, I had no real idea of what was going on. A lot of the previous JS lessons have been difficult, but after looking at the hints, solutions, or videos (if available) I was able to at least understand what was going on, even if it was hard. Thanks again.

8

Putting the function call inside a log might help. Then you can switch the arguments out to match the different requirements from the tests.

console.log(updateRecords(collection, 5439, 'artist', 'ABBA'))

1 Like
9

Another thing I like to do when I’m stuck is copy all the code into codepen or playcode, and play around with it, throw in a load of console.log() statements, that way I can see what it’s doing in real time.

1 Like
10

Again, I agree with @gordon_woodbine Especially if you have learned how to use the debugger it can be super helpful to step through the code. I would in fact suggest that this task is just about complex enough to were using a debugger instead of just logging out values is (almost) needed, or at least might be a better approach to take.

Yes, that’s what I’m afraid of. I actually think you might understand more than you believe (presumptuous I know), it’s just the sum-total of all the requirements becomes too much and you lose sight. I’m sure each of the requirements when broken down into isolation is not as hard to understand as it might seem.

Learning object access and manipulation is a vital skill in JS. I don’t really have a good solution though so saying this without giving one is not very constructive (and this isn’t meant as a dig on fCC, just an observation).

1 Like
11

This is a very good idea. I am going to do this. Thank you.

12

Hey Davrias,

Yeah, I got totally Stuck on this one too…

1 Like
13

I was another new user asking very similar questions about this challenge yesterday. This challenge is far more difficult than anything that we have done in the curriculum previously but I don’t think that is the issue here necessarily. Here’s what I think the issue is:

  • The hints aren’t as useful as they could be. In my case, I forgot that .hasOwnProperty existed.
  • The solution given is more complicated than what a normal new user would come up with.
  • Most of the previous challenges has a “Help” video that you can watch if you are stuck, this challenge (the hardest so far) has no video inexplicably.

That being said, I think this was a really good challenge but it could be supported better.

1 Like
14

Hello,

Thanks everyone for your help. After slowly going through every single line in the challenge and explanation, I think I understand it partially. I still have two questions about the solution, listed here:

function updateRecords(object, id, prop, value) {
  if (value === '') delete object[id][prop];
  else if (prop === 'tracks') {
    object[id][prop] = object[id][prop] || [];
    object[id][prop].push(value);
  } else {
    object[id][prop] = value;
  }

  return object;
}

My questions are:

  1. How does || create a new array? I thought it was logical or, and could only returned true or false.

  2. How does else { object[id][prop] = value; } add a new prop ? Shouldn’t it be included on the right hand side of the equal sign in some way?

Thanks again for all your help and for any help you can offer on this.

15

That’s how it is in Java and C# yes, but In JS and other loosely-typed languages such as perl and php, the || operator returns the first item if it’s “truthy”, otherwise the second item. So in this case, it’s setting object[id][prop] to either itself if it’s truthy or a new array if not.

Nope, foo[bar] = someval will create a new prop on foo, named by the value of bar. So if bar = "xyzzy", then foo[bar] = "yay"; is the same as foo.xyzzy = "yay"; If you’re not clear on how that works, check the previous assignments that cover bracket vs dot syntax .

<rant>The issue I have with this challenge is that in real life, I would never let a function like this pass code review. Not just your solution, anyone’s: the challenge is asking everyone to write what is objectively bad code. A function is supposed to do one obvious thing, and I’m counting three behaviors here. Then again, it does reflect what a lot of real world code looks like, but I still think the challenge is overall a disservice to teaching good programming patterns.

1 Like
16