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.
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.
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.
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.
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.
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.
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.
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.
@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
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.
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.
Man, if I had a buck for every time I saw this sort of thread pop up in the forum again
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)
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?
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!
I just wanted to chime is as I just completed the ES6 lessons and I felt so lost. I plan to revisit the lessons at a latter time because I don’t feel like any of it has stuck with me. I constantly found myself looking through the forum to find out how people completed these lessons. Just like the OP, I was finding myself doing well in the Basic JavaScript lessons and was gaining momentum. I would suggest revisiting the placement of the ES6 lessons. It’s quite easy to get discouraged when learning front end web development, and introducing lessons that users would be unprepared for seems like a great way to “thin the herd”. I know that’s not your intention but I wouldn’t be surprised if you see a lot of abandoned users during the ES6 lessons. Not to mention that lesson “Create Strings using Template Literals” has not been fixed.
If you struggled with ES6 it’s totally understandable. I think they put it there so you could create good habits early. I didn’t learn ES6 right away and now I sometimes avoid the newer syntax due to comfort/complacency. Skip ahead to data structures or debugging. Good luck with the Regular Expression section though, because it’s a doozie. Have fun, take breaks.
I have also been struggling with ES6 section. It suddenly talks about applying arrow function to map reduce filter. For a while i felts like i had missed out these somewhere earlier, but that wasn’t the case. After scouring the internet for a few hours and still not able to grasp the concept I am moving on to regular expressions section. Will revisit the ES6 section later.
Also I have a background in assembly programming and C. I am not being able to appreciate what advantage we are having at compiler and execution level by using arrow function?
Given C and Assembly are definitely not OO you might not see what the advantage is immediately, but:
In most OO languages, say Java, C# or C++, classes have an identifier, normally called this or self, which is used in the code for a given class to refer to itself. This is kinda essential; you can’t make blueprints for objects without referring to the object you’re writing a blueprint for.
JavaScript is OO, and even has things called classes that look like they work the same, but they don’t quite work the same way. this has complicated rules that trip people up. One core issue is that it is very easy to create new scopes, and thus lose the value of this you’re trying to keep hold of. Functions do this, and have different rules for how they modify this depending upong how they’re called.
Arrow functions though do not have a this binding, they just use the value of the surrounding environment.
This might seem a bit abstract now, but issues and misunderstandings regarding this are incredibly common for people learning JS. Arrow functions remove a big chunk of those issues.
