ES6 formatting, what am i doing wrong?

So i’m tired of debating back and fourth with a person about this issue, in which its just getting nowhere. I want to see who and what idea is truly right as i want to continue learning ES6, but the supposed correct way.

So this is the challenge --> https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions

I saw the challenge and did it in the simplest way possible:

const sum = (...args) => {
return args.length > 0 ? args.reduce((num, i) => num+=i) : 0
// num is accumulator, i is the number.
}

Used the simplest format, ES6, and the rest operator. It gets the job done and its readable.

Now the challenge doesn’t let me pass because its saying i didn’t even use the rest operator, and the explanation i got was saying their is only one way of formatting it:

const sum = (function () {
    const sum = (...args) => {
      return args.length > 0 ? args.reduce((num, i) => num+=i) : 0
     }
  return sum;
})();

Both return the exact same thing --> https://repl.it/@John_Nicole/ES6-10-Use-the-rest-operator

When i see this, i observe it as not simplified, unnecessary, and hard to read. I stand by my code and both answers to the challenges as they are both correct, but don’t stand by my code not passing.

Of course there is maybe a reason why adding the extra unnecessary function helps with some cases, but if you look just at this challenges its simply not needed.

Lets take a look at older challenges:

Trying to teach arrow functions they give you this:

var magic = function() {
  "use strict";
  return new Date();
};

…And ask you to first do arrow code, also to change var to const

Yes the purpose is to teach you arrow code functions, but its a bad example as it can easily be changed to:

var magic = new Date()

The potential answers to this, and other challenges start vary way to much as you get higher up complication wise, as some people just see it as what is the simplest way to accomplish the end result regardless of wanted format, because good code is simple and readable.

I don’t code by one format, i code by whats best. Not all challenges are even the same, so living by the potentially least best way possible is not my path.

Its like using loop(s) to reverse a array, instead of cutting the corner and just using .reverse(). Some people would use the loop as wanted, but some see a different less complicated way that makes sense for this issue.

When you run a function, you see its output, so the simplest way to get their is the correct way. You don’t see what its doing, only the end result.

In context here, its completely unnecessary to have a function over a function for something like this as their is better ways to do it with the same output. It’s trying to teach me the supposed way, but you can get confused and do it the other more logical way since their is nothing preventing you (because of the openness of the challenges).

I was met with:

When the fact that this is student paced, and i’m here because i want to be.

This is new curriculum, and if it isn’t working i’m going to say something about it. I came from ES5 to ES6 for simpler, less complicated code. I don’t see doing everything in a format, rather whats the best way to accomplish the end goal.

No need to code to specification, since their is really is none at this small of a level. Do you think a employer really cares to go back and pay you $40 a hour to edit all of your already simple readable working code just to add unnecessary functions for ‘tradition’? No, because in all reality they really don’t care. They care you get the job done in the simplest way possible, like the output.

If you can read unnecessary complicated code, you can read simple code too.

You can travel down point A & B to get to a place, but you can also go down the hypotenuse. Both are correct, one is shorter.

6+3 = 9
5+4 = 9

There is varying ways to do things, have a open mind with my topic.

What am i missing here?

If i have to deal with functions inside of functions for the sum of a input because its ‘ES6 traditional’ format, then i’m done here.

2 Likes

The wrapper function is for compatibility cross browser as far as I understand. It makes no sense otherwise: it’s deeply confusing. I 100% agree with you on most of this though, the more I look at it, the more I think he ES6 section is fundamentally broken: it’s mystifyingly complex, and imo shouldn’t have shipped in current state.

(To anyone else reading, I don’t mean to denigrate contributor efforts, I know how difficult it is. + I need to work throught ES6 curriculum & see if I can raise specific issues after that, and if there’s something I can contribute to directly rather than bitching)

I wish there was a previous challenge that taught you about the IIFE more in depth so people don’t run into this issue. I am not going to learn the incorrect not-so-simplified way to do things. It’s ES6, we shouldn’t run into this type of thing.

As i said i came to ES6 for simplification, i have no time to waste on this kind of stuff. Should i post this in like another place to request a change to the challenges?

IIFE :

image

I would say, the few ES6 challenges I’ve tried that have had the IIFE have passed when I’ve deleted the IIFE and just wrote the code (although they seem to need to use function myFunction() { rather than const myFunction = () {, which is no biggie).

My main bugbear is that there is that, generally, it’s unlikely that you would write code like that in real life situation. Here it serves no teaching purpose beyond being deeply confusing, and it kinda gives the impression that that’s how ES6 code should be written, which is crazy. The “default parameters” one, in particular, is a fairly mind-bending combination of confusing description and confusing code. Whereas, as you say, you want to use it to simplify your code, and default parameters definitely can do that.

I’m digging around on GitHub but I can’t find relevant issues, I’ll keep digging around

Yes, you can raise an issue on the GitHub repo. If you do, try to make it about a specific challenge if possible, and describe the issues. Check to see if someone else has raised an issue about it first (there are obviously a lot of issues coming in at this point in time, so there’s a good chance that may be the case). It’s a usability issue rather than a bug, so be mindful of that - this is the reason I’d say raise an issue on a specific challenge, as it’s easier to start there and describe the issues in detail.

I have deleted the IIFE and it has passed on previous challenges, but not on this one.

If you find it already a issue then you can skip this part, else ill right the issue up here just encase you find its not a duplicate and i’m not around.

Please spell/ grammar check if you are going to post it.


I have started the new ES6 curriculum of freeCodeCamp in hopes of simplifying my ES5 ways. I have recently come across unnecessary, confusing, unlikely use of the Immediately-invoked function expression that will cause users not to past the test even though their code is correct.

The IIFE first appears in the challenge “Set Default Parameters for Your Functions” with seemingly no explanation, or reasoning on why it is their.

–> https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions/

This will confuse new coders, and i have seen people just copy and paste the working code inside of the IIFE and passing have no idea what it is actually doing. Even if they did, its a very limited and not as widely used technique of formatting that it shouldn’t even be in this challenge.

The twist on this is the fact that the IIFE isn’t even required to pass the challenge

"use strict";
const increment = (number, value = 1) => number+value;
increment(10, 1)

–> https://repl.it/@John_Nicole/ES6-9-Set-Default-Parameters-for-Your-Functions

This proves how confusing and varying the challenge can possibly be, and considering how these challenges are smaller its a not needed.

But wait, theirs more:

If you go to the next challenge “Use the Rest Operator with Function Parameters”, the IIFE appears again.
–> https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-the-rest-operator-with-function-parameters

Only this time, the IIFE is required to pass the test even though its never clearly specified what the IIFE actually is, doing, or even that it is needing.

The passing code for the challenge is:

const sum = (function () {
    const sum = (...args) => {
      return args.length > 0 ? args.reduce((num, i) => num+=i) : 0
     }
  return sum;
})();

You can easily accomplish the same task with:

const sum = (...args) => {
return args.length > 0 ? args.reduce((num, i) => num+=i) : 0
// num is accumulator, i is the number.
}

–> https://repl.it/@John_Nicole/ES6-10-Use-the-rest-operator
(Use ctrl+/ to uncomment and comment).

Yet when i run this code i get that this requirement is not met:

X, The sum function uses the ... spread operator on the args parameter.

When it is clearly used. Even if the IIFE is not at fault for this it still showed be removed. From what i have been told, the IIFE not being present is the clear cause.

You can see how the challenges can vary way too much to the point where getting the same output in a way that meets the requirements can even be marked as wrong.

There is even another example of confusing answers to ES6 challanges

Go back to the challenge “Use Arrow Functions to Write Concise Anonymous Functions”
–> https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions

Trying to teach arrow functions they give you this:

var magic = function() {
“use strict”;
return new Date();
};
…And ask you to first do arrow code, also to change var to const

Yes the purpose is to teach you arrow code functions, but its a bad example as some people could look at the challenge differently

const magic = new Date()

Yes this code doesn’t past the challenge, but it is correct in the sense that they both would do the same thing.

Correct answer (just using a unnecessary function):

const magic = () => new Date()

To recap we have seen:

  1. Unnecessary use of IIFE’s
  2. Challenges not accepting seemingly and logically correct answers
  3. Confusing ways of teaching something seemingly simple.

Update: I posted it