ES6 - too much of a learning curve?

Hi,

I’ve been working through FCC in order, and so, after finishing Basic JavaScript, I have moved onto ES6. I’m finding the jump to be very big, with lots of things mentioned briefly that haven’t yet been introduced, such as functions like map(), filter(), and reduce(). I am usually a fan of completing the curriculum in order, but I’m finding myself very stuck here. Is there a reason why ES6 has been placed so early on in the JavaScript curriculum? Is there another recommended order to follow to be more prepared for ES6?

5 Likes

It is indeed a bit of a jump from the Basic JavaScript section to ES6, partly because of the syntax and partly because all of a sudden everything seems to require a callback function (such as the functions you mentioned, and a lot more).

If you are not comfortable with most of ES6, I personally think that it’s okay to skip most of the section now and come back to it once you get to around the Functional Programming, Intermediate JavaScript section. Having said that, and before you move on, I think it would be a really good idea to spend a couple of hours to:

  • Learn the difference between var, let and const well before moving on
  • Get familiar with the concept of callback functions—you will only see more of it and the earlier you have a good understanding of it the better

Once you are happy with callbacks then the methods you mention will all be very easy to work with!

Good luck and happy coding!

5 Likes

ES6 is important and shows up more and more. Yes, some of it is a bit odd at first. But really it’s just a bunch of small concepts, most of them just shortcuts. If you have a problem with a specific concept, open a thread and ask - a guarantee that you aren’t the only one. And I’m sure there are some excellent youtube videos on them. Just keep at it - if this were easy it wouldn’t pay well.

1 Like

I’d also add that what’s generally termed “ES6” isn’t really a single monolithic addition to the language. Sure, “ES6” refers to a single version of the spec, but the speed of browser adoption varies for different browsers and different features, and in any case, people often use “ES6” more broadly to mean modern JavaScript (any of the versions released since 2015).

So don’t feel you have to learn it as an inseparable whole. You can start with just arrow functions, or playing around with template literals, or learning the difference between const, let, and var.

Note also that map, filter, and reduce aren’t actually ES6 features at all, but they are incredibly useful array methods to learn. They allow you to write code for arrays that’s much more declarative (explain what you want to happen, not how you want it to happen). Once you get the hang of them, you’ll rarely even need to write for or while loops.

Equally, though, you can learn map and arrow functions independently of each other. They work nicely together, but there’s nothing intrinsically linking them.

I suggest reading You Dont Know JS… I read it while first learning JS on FCC because I was also following P1xt guides, and I will admit, it was paaaiiinful because I didn’t understand most of what I was reading. But, something awesome is when I did come across terms after that, it wasn’t new to me… I was already at least familiar with its existence and that really helped me.

In YDKJS, Kyle goes into differences in ES6 a lot…so much that you cant finish reading the series without stumbling on some grasp of it. Anyway, I never really had any difficulties or struggles understanding the concepts of ES6. Maybe because all of it was new to me at the time ES6 or not… So it wasnt like I had a ton of experience with something I was already used to and now had to learn a whole new thing…all of it was a whole new thing.

Like I said,reading the books was painful. I fell asleep every single time I sat down to read it. Every. Single. Time. :joy: but I finished and I really, genuinely think that its the reason I havnt had any problems with ES6.

Its free to read on Github here: You Dont Know JavaScript

2 Likes

Thank you all - very helpful responses. I’ve done the first few lessons including the differences between var, let, and const, so I’m going to leave it out for now until I’m done with the Functional Programming. Will take a look at the other resources mentioned too.

Yes, it’s also hard but try to search what you don’t understand and complete these challenges or skip it but it is always better to search more about something instead of letting it go.

Yes, FCC is not meant to be comprehensive. Don’t hesitate to seek out other sources if something isn’t clear to you - it’s expected.

Indeed. I watched laracasts videos about es6 before i got a grasp of what’s es6. What source I can recommend you to take to fully understand es6 is:

Feel free to find other resources to learn about it, Happy Coding!!

2 Likes

In my opinion, become a pro in map(), filter() and reduce() and you’ll save yourself a lot of work.

const numbers = [1, 2, 3];

// before:
function doubleNumbers1(numbers) {
  let doubledNumbers = [];
  for (let i in numbers) {
    doubledNumbers.push(2 * numbers[i]);
  }
  return doubledNumbers;
}

// after: option 1
function doubleNumbers2(numbers) {
  return numbers.map((num) => 2 * num);
}

// after: option 2
const doubleNumbers3 = (numbers) => numbers.map((num) => 2 * num);

console.log(doubleNumbers1(numbers)); // [ 2, 4, 6 ]
console.log(doubleNumbers2(numbers)); // [ 2, 4, 6 ]
console.log(doubleNumbers3(numbers)); // [ 2, 4, 6 ]
2 Likes

In my opinion. ES6 lessons are the only ones that are bad, respectfully.

I don’t have a problem with the most of the new lessons except ES6 ones, they really need a revamp as they feel like they’re undeveloped and most of stuffs are unexplained well.

And I’m not the only one who found a problem with this, everytime I basically I find something unexplained well, I find an-ask-for-help thread for it in this forums unlike the other basic lessons.

For now, I completed it but I have to say that I didn’t complete it from freecodecamp, I completed it from a lot of researching here and there taking MDN, W3Schools and stuff like that as resources, I won’t say that I’m good with ES6 yet but I will say that I’m at least familiar with it.

So my advice is that for freecodecamp’s ES6 lessons, you better not take them too seriously and just take them as a practice because believe me, I doubt they will be any good for you especially with this kind of quality so you have to research a lot in other websites, more than usual, take MDN as a main resource and if you don’t understand anything then ask them in stackoverflow or search about the answers yourself.

8 Likes

i think it’s hard to appreciate ES6 features until you get really comfortable with javascript and start writing functions and algortithms. Then you’ll say, “I really wish I had a better way to do this common thing”. and many of those exist in ES6

I think ES6 itself is not a problem. I think FCC ES6 lessons are the problem. I did Basic JavaScript without any external resource because the lessons are well explained and comprehensive. But ES6 lessons throw on you a lot of concepts without explain them. They explain the ES6 part, but you need to use map(), reduce(), filter() and other stuff that were never explained in any lesson of Basic JavaScript and that are not explained in the ES6 lessons. So how are we supposed to solve the challenge without any explanation of the concepts? There are a lot of people having trouble with these lessons, but in the forum, the only answer you get is to go to an external resource or things like “FCC is not meant to be comprehensive”. Really? If FCC is no meant to be comprehensive, why are the previous lessons, not only JavaScript lessons, but HTML and CSS lessons, comprehensive? All we need is that someone explain us the concepts needed to solve the challenges. Only that.

8 Likes

I havn’t read all of the replies, but I think it’s 100% fine and recommended (by me) to take a break from the ES6 part of the curriculum and do lots of algorithm challengs and some front end projects. ES6 times make coding easier, but they require a meta recognition of what you’re trying to accomplish. Until you can think through the solutions yourself for things like adding up all the elements of an array, using reduce will just be a mystery because at least for me, the syntax is not obvious. Same with arrow functions and spread operators.

They are great, but until you’ve written 100 or more function () { some code, manipulate arrays and return xxx}, things like the fat arrow, spreads and map, filter, reduce are just magical code.

I have to agree with the sentiments of most here that ES6 is both a huge jump in difficulty relative to the previous part of the curriculum AND not all that important to have to know to begin with. (I actually made a very similar post to this a few weeks back).

For sure there are certain parts of ES6 it is good to know straight off the bat (difference between var, let and const being the main one). Having now worked through up to the end of the “Functional Programming” section I can identify certain aspects of ES6 which I had no idea about to being with but now seem second nature (higher order functions for example). But this only came about through the tens of exercises I’ve done up to this point and constantly referencing other online resources and this forum throughout the process. After using certain techniques multiple times through understanding their context rather than their meaning, the meaning eventually becomes clear. (Think of this like using a word you don’t actually know the definition of, but that you know makes sense to use within the overall context of the sentence. After you use it within context a few times you start to naturally understand what the words definition must be)

I think in an ideal world the individual parts of ES6 could be included in their more relevant ‘parent’ sections (e.g. higher order functions in functional programming) for those who are starting out learning JavaScript, and then a specific ES6 section for those who perhaps were confident with ES5 JavaScript and just want to checked out the new features introduced.

I’ll be honest, having gotten through the Basic JavaScript section without much hassle, the ES6 part really did give my confidence a big kick in the nuts.

Stick with it, or move on and come back later. Even with the rest of the exercises you will be expected to know/understand other methods that have not been introduced to you as yet. The forum is great though, so come back here for help if you cant find an explanation of something elsewhere that doesn’t resonate with you as much as the FCC explanations provided.

3 Likes

I agree 100%. I felt that the first section did a great job of introducing new concepts, explaining them and then incorporating them in challenges. the ES6 section seems to drop new terminology, methods, etc without any explanation and expect you to understand how they’re used in the challenges. It’s not that the learning curve is too high, it’s just that there is no explanation. Is anyone able to update section with adequate reference within the lessons?

Conquering these three and regular expressions are my top goals before the end of 2018! I may not make it but I know it’ll speed up my workflow exponentially!

1 Like

I sure have the same dilemma right now. Currently scratching my head after stumbling on ES6 lessons not elaborating what filter() map() and reduce() are for. Of course Google can help, but it’s just a little too advanced to be understood by someone who just finished the basics of HTML and CSS and JavaScript to tackle, so I guess I’m going to skip this one since everybody is recommending it. Thanks for pointing that out for everybody so nobody feels alone in the struggle.

ES6 is a rather simple thing to learn once you learn the language at an intermediate or upper-basic level. You may be confusing ES6 with ES7+ and some features of ES5.

ES6 at a superficial level has:

  • Template literals like ${this}
  • Classes (which aren’t really classes but that knowledge is kind of intermediate/advanced)
  • Arrow functions (using them is easy, learning how it changes the context of this takes time)
  • Import/Export module declarations.
  • Generators function*(){} and Iterators which are mostly used by library creators and polyfills.
  • Destructuring (array and object)
  • Spread operator (arrays, for objects that’s still a stage-something proposal that needs a babel plugin to work)
  • Promises (which were already emulated by libraries such as jquery and bluebird or PromiseJS so they kinda just made them native).
  • Sets and Maps
  • Let and Const (block scoping, value mutability vs reference mutability and loop-closure may be a pain in the ass to fully comprehend but at the most basic level you can start using them with no real problem).
  • Binary and Octal representations. (like 0b01011)

Ask yourself which of these features might benefit you while you go through the curriculum and which ones can be saved for later, learn them individually somewhere else and practise by mixing them together in some throwaway project on Codepen or JsBin.

Async/Await is probably the most prominent feature of ES7 but I don’t think FCC teaches it. The map,reduce,filter methods are ES5 actually, and absolutely necessary in modern JS code so I suggest you learn them here: https://hackernoon.com/map-filter-reduce-ebbed4be4201

ES6 is the feature of JavaScript. Less code and easy for reading.