ES6 section feedback and bug reports

ES6 section feedback and bug reports
0.0 0

#1

As I’ve been going through the new FCC curriculum, all of the challenges have made total sense and have been relatively easy. However, once I got to the ES6 section, that changed completely. I struggled to get a lot of the solutions, and it felt to me like new concepts were introduced without being explained. Also, a lot of the content is identical to content on the JavaScript MDN.

Some examples:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/write-higher-order-arrow-functions/

  • This lesson states that arrow functions work well with higher order functions. Up until this point in the curriculum, higher order functions are never mentioned a single time. The lesson doesn’t explain what they are, how they’re used, or why they’re important so you have to do a lot of googling yourself and they’re not exactly intuitive.

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects/

  • This was the start of a series of confusing lessons to me. The lesson is about assigning variables from objects, but then the code that we’re supposed to write is not dealing with an object at all. Just a single variable. Yes, it makes you work to apply a concept to an unrelated problem, but it’s so unstructured that it takes a lot of thinking and googling to even figure out what you’re supposed to be doing.

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects/

  • This is minor, but really hard to catch as a beginner, but simple things like asking for the max of forecast.tomorrow, rather than LOCAL_FORECAST. The example in the lesson uses the same name for the object and assignment, then the actual code you’re supposed to write passes in a separate parameter that’s named differently from the object.

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals/

  • For this lesson, the example code is broken - showing items in italics rather than the ${} formatting that it’s meant to show. This makes it extremely hard to figure out what you’re supposed to do. The solution also requires you to loop through the array, even though you can type out all of the string and get the same output (see Create Strings using Template Literals). The solution listed in the thread by zdflower also introduces new syntax that we’ve never seen before up to this point. I still don’t understand why Saymon’s original solution doesn’t work. I have no idea how I could find this information on my own. This lesson was by far the hardest and made the least sense to me.

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object/

  • For this lesson, the main thing I had to figure out is that there are apparently certain keywords that are already defined. I had tried to use “temperature” in my getters/setters, but this word is apparently meaningful already, so I had to switch it to temp or something else for my code to be accepted.

Overall, it just seemed like there were a lot of concepts you were expected to know in this section with no previous introduction, the lessons themselves often weren’t helpful, and the examples were too limited. In the earlier JavaScript lessons I could always go to the MDN to see other examples of how a particular function is used, but since most of the content for this section is identical to the MDN, there was no additional help to be found there.

This section also didn’t do a great job convincing me that these new paradigms are useful. I could achieve a lot of the same outcomes with slightly wordier but much easier to read code. I’m not sure that reducing lines and compacting code is always better - it would at least be helpful to know which paradigms are becoming the norm, which are really useful, and which is just new stuff that might or might not be good.

After this section, it goes back to really easy content with Regular Expressions. It all just seems out of place and not as well thought through as other parts of the curriculum.


#2

Yep, the ES6 section must be reviewed for quality.

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-export-to-reuse-a-code-block

This page has a variable named boo in the code, but the test checks whether bar has been exported. At first I thought I was being tricked so I changed the name of boo to bar to match what the test was checking for…but no, it’s actually checking for boo.

Also, I attempted to use a separate line, export { foo, boo }; but this was rejected. I could be wrong, but I thought this was a valid answer.


#3

You’re not the only one who faces this. A lot of people faced this problem as well.

ES6 lessons must be revamped and updated, I mean seriously? class-related ones were the biggest problem for me, they didn’t explain .get() or .set() well and they didn’t even say a very important information about how classes are not normal objects so you can’t just edit them by normal means. This basically has changed everything for me, we are really lucky that there are a community to help us with this, otherwise I would give up on learning the moment I start ES6 section.

And I don’t mean to insult FCC with this, in my opinion FCC is one of the greatest web development-learning websites, basically everything is well-organised and very easy to understand, for me I found little to no problem when learning from it except ES6 section of course, so I hope that the creators look at this problem, respectfully.

Again, thanks for this great website!


#4

@Sora, re: Creating strings using template literals:

You’re right, the example code renders incorrectly and that makes it difficult to figure out what the syntax should be. But regarding the solution, I ended up using something similar to

arr.map((i) => `<li class="text-warning">${i}</li>`);

to pass the test. Hopefully this is helpful. =)


#5

@Sora , would you consider changing the title to “ES6 section feedback and bug reports”? It may help the topic pop when people are browsing.


#6

Good idea - I’ve updated the title. Thanks for your responses above as well! I’m glad I’m not the only one running into these problems.


#7

This is a known bug and has already been reported. See https://github.com/freeCodeCamp/freeCodeCamp/issues/17641

Can you give an example of the code you tried using temperature? It is not a keyword in JavaScript.

FYI - Free Code Camp content is created by volunteers. Anyone can contribute to making the new curriculum better. It would be great when you see a problem, to checkout the Free Code Camp repository on github and look through the Issues section where you will probably find someone has already reported about challenge bugs or wording suggestions. If not, then you have the power to report a new issue by clicking the New Issue button on the github site.


#8

I can try again later. I can’t remember the exact code, but I remember that as soon as I changed temperature to temp my code worked.

I understand that this is created by volunteers. My main gripe with this section is not with bugs (though obviously those aren’t great), it’s with the content. Its hard for me to help out with that since I struggled with this section already so I don’t know enough to provide better resources or explain the topics that I thought were poorly explained.

Overall, I just think someone needs to review this section in its entirety and make sure it’s consistent with the rest of FCC, which an issue report is probably not helpful in that case. If there’s something else I can be doing to raise awareness and get someone to take a look, let me know. I think this is going to be a pain point for a lot of people going forward, and they’re not going to understand the concepts as well as they should.


#9

The getters and setters thing is a little baffling: I don’t understand why it’s in the ES6 section. Firstly, getters/setters are not an ES6 feature, they’ve been in the language since 2009. Secondly, there is an actual full object-oriented section in the curriculum where what is discussed in the challenge might actually make sense. If you were looking for a good first specific issue to raise, that would be it, as it should simply involve moving the block of JSON config for that challenge from the ES6 config to the OO JavaScript config.


#10

Hi, i believe i found a bug too, in this lesson, I completed the challenge with this regex :

/[a-z]/ig

Now, i think that is not correct, what i am missing?

Edit; i just noticed that this is for another section.


#11

Man, if I had a buck for every time I saw this sort of thread pop up in the forum again :stuck_out_tongue_closed_eyes:

You’re not the only one who feels this way. I created a thread about this a few weeks back, commented on another this morning, and now this one has popped up as well.

My personal suggestion would be to have the ES6 module at the end (so it can be accessed in bulk for those who want to learn or brush up on their ES6 knowledge specifically), but also have the individual exercises from ES6 added into the normal sections so they can be taught with more context (for instance including arrow functions within the functional programming section). Of course, in these instances where there is an ES6 exercise included in this way, it would need to be made clear that it is ES6 specific.

Perhaps include some top level ES6 info in the basic JavaScript section? (An introduction to ES6 so there would be no need to panic when seeing an ES6 specific exercise within any of the normal modules)


#12

I totally agree that having this either at the end, or baked in with the relevant sections would make way more sense. Instead of “here’s some new ES6 features that may or may not be useful,” it could be more like “here’s how you declare a function. But you can also do it this way using arrows. Here are a few situations where each way would be useful.”

That’s the main context that I think is lacking - should you always use these new features? Only sometimes? Which are becoming common practice? What situations are best suited to each new feature? How do they relate to the stuff we previously learned?


#13

I got confused with this one too, however, i have just noticed the default sample code which you have to amend has a small bug:

"use strict";
const foo = "bar";
const bar= "foo";

Notice the const bar= "foo"; line, there is a space missing where they declare the variable.

So, through correctly adding in the space, the below code passed the tests for me!:

"use strict";
export const foo = "bar";
export const bar = "foo";

#14

I agree with you, it was slightly confusing to a newbie, fortunately, when I got to this part, I have already done a little C# coding, using classes and objects etc, therefore I knew before hand what a getter and a setter was, so it kind of made sense in what they are trying to teach us… but agree with most others on here re comments around the ES6 section as I found most of it confusing and hard to follow too, yet the tutorials leading up to this were great!