Freecodecamp: ES5 & ES6 not consistent [beta]

[ncaron]

Challenge Name

Multiple challenges
Example: https://beta.freecodecamp.org/en/challenges/basic-algorithm-scripting/convert-celsius-to-fahrenheit

Issue Description

After the ES6 challenges, a lot of future challenges seem to use ES6 but there's still quite a few not using it and it's not consistent.

Screenshot

[no-stack-dub-sack]

@ncaron I agree in some cases, but in this case, I don't think usage of var should be viewed as incorrect or "not ES6." While both let and const are available to us in ES6, I don't think they should be outright replacements for var. While they _can_ be used interchangeably in many cases, both have specific use-cases, and IMHO, should be used for those use-cases (especially in an education setting, since I don't always follow this in practice). But my point is, there's nothing wrong with using var in ES6 code - use const when you have a true constant that you never want to reassign, let for block scoped variables, and var everywhere else.

That said, I do think we can make an effort to homogenize the use of these and other ES6 features after the ES6 section, wherever appropriate, as it is a bit inconsistent now. However, I would also consider this low priority given the many other high priority issues that beta needs to see resolved leading up to or post a successful initial release.

As this is not a true bug, this might be a discussion better suited to the forum.

cc / @freeCodeCamp/moderators, any input?

[ncaron]

@no-stack-dub-sack
But my point is, there's nothing wrong with using var in ES6 code - use const when you have a true constant that you never want to reassign, let for block scoped variables, and var everywhere else.

I completely agree with that. That particular example I gave was just one of many. I know var was acceptable there but some similar code in other challenges use let and I just thought it was not be consistent and possibly confusing for new programmers.

[QuincyLarson]

@ncaron Thanks for submitting this issue. To add to @no-stack-dub-sack's reasoning on this - which I agree with - it's also possible that some campers will skip over the ES6 section.

I think it's good for us to stick with ES5 in the other challenges, and campers can opt to use ES6 for the projects and algorithm challenges if they want.

[ncaron]

@QuincyLarson The issue only occurs after the ES6 section. If students don't skip the ES6 section they might only think that it's not consistent with what they have been taught but it's also not a big deal so for that reason I would agree that it should stay the same.

However, most of the challenges after the ES6 section have ES6 syntax. For example all of the challenges in Regular Expressions, Debugging, Basic Data Structures and others use let and const and that might be confusing for the students that did skip the ES6 section. It seems like all new challenges in the beta use ES6 syntax while the old ones remained the same.

Thank you for taking a look into this. I agree that there's more important issues right now, I'll get to work! :smiley:
If in the future this issue is opened again, I would be more than happy to work on it.

[QuincyLarson]

@ncaron Thanks for pointing this out. I'd forgotten that so many of our new challenges used ES6 syntax.

On further reflection, it's clear to me that we should indeed gradually convert all JavaScript challenges after the ES6 section to use ES6 syntax.

@ncaron Would you be interested in leading this process? As @no-stack-dub-sack said, we have a few higher-priority issues at the moment, but you could open a series of pull requests updating the syntax over the next month or two.

[ncaron]

@QuincyLarson I'd be happy to! As you mentioned, some campers might skip the ES6 section. Should a little note be added to the introduction pages to mention the following challenges use ES6 syntax? For example, at the bottom of this page: https://beta.freecodecamp.org/en/challenges/basic-data-structures/introduction-to-arrays

[QuincyLarson]

@ncaron Awesome! That would be amazing!

And yes, I think you could add a note that "most freeCodeCamp coding challenges will use newer ES6 features and syntax, and it is important to learn it." or something along those lines.

I think the most logical way to proceed would be for you to work section-by-section and open a pull request against each section individually. Then we can QA and merge it.

The JavaScript Algorithms and Data Structures block of challenges is a natural place to start:

My thinking is that when updating tests, we should still accept the old ES5 approaches - but we should subtly nudge campers toward using the newest JavaScript features. And ES6-based solutions should definitely run and pass tests as well.

What do you think of this approach?

[ncaron]

@QuincyLarson Where do you think would be the best place for that note?

I don't think I'll have to update the tests very much or at all because they already mark both ES5 & ES6 as correct. I've been using ES6 on production site for quite while with no issues other than warnings but so far those warnings are not showing up on beta. It's still something I'll watch out for before submitting a PR.

I'm also not sure how to nudge campers towards using the newest JavaScript features other than using it in the code provided in the challenges.

Take this one as an example: https://beta.freecodecamp.org/en/challenges/basic-algorithm-scripting/finders-keepers

The solution I have for this challenge passes the tests no matter which of the following styles are used.

// Original
function findElement(arr, func) {
  var num = 0;
  return num;
}

findElement([1, 2, 3, 4], function(num){ return num % 2 === 0; });

```js
// Proposed Style 1 (use let but not arrow functions)
function findElement(arr, func) {
let num = 0;
return num;
}

findElement([1, 2, 3, 4], function(num){ return num % 2 === 0; });

```js
// Proposed Style 2 (use arrow functions with optional parentheses around 1 parameter)
function findElement(arr, func) {
  let num = 0;
  return num;
}

findElement([1, 2, 3, 4], (num) => { return num % 2 === 0; });

```js
// Proposed Style 3 (use arrow functions without optional parentheses around 1 parameter)
function findElement(arr, func) {
let num = 0;
return num;
}

findElement([1, 2, 3, 4], num => { return num % 2 === 0; });

```js
// Proposed Style 4 (short arrow function with implicit return)
function findElement(arr, func) {
  let num = 0;
  return num;
}

findElement([1, 2, 3, 4], num => num % 2 === 0);

[raisedadead]

Re-opened to track progress.

[profoundhub]

How about changing the functions to arrow functions too?

const findElement = (arr, func) => {
  let num = 0;
  return num;
}

findElement([1, 2, 3, 4], num => num % 2 === 0);

[ncaron]

@profoundhub Thanks, totally forgot about that one! I can confirm that it passes the tests as well.

[QuincyLarson]

@ncaron

Where do you think would be the best place for that note?

We should put it in the introduction to the ES6 challenges: https://beta.freecodecamp.org/en/challenges/es6/introduction-to-the-es6-challenges

I'm also not sure how to nudge campers towards using the newest JavaScript features other than using it in the code provided in the challenges.

That's what I was thinking. This is a subtle way of steering them toward using these features as well, without overtly pestering them to start using ES6.

[no-stack-dub-sack]

@QuincyLarson @ncaron Perhaps the note should go in the first section after the ES6 section (or in both places), as the concern is, what if campers skip the ES6 section? We want to let them know at that point, that challenges from here on out will use ES6 syntax.

Maybe something like:

__In ES6 Intro:__

These challenges will introduce you to modern ES6 syntax and features, most of our challenges from here on out will rely heavily on these, so be sure to familiarize yourself with them!

__First intro after ES6 section:__

Just in case you skipped the ES6 section, you should be aware that most of our challenges from here on out will rely heavily on modern ES6 syntax and features. If you are unfamiliar with ES6, heading back to that section to familiarize yourself might be a good idea, but is by no means a strict requirement.

[QuincyLarson]

@no-stack-dub-sack Agreed! It's best to have notes both places, and I love your suggested copy here.

[iliasTsiortas]

Is someone working on this issue?Because i would like to give it a try.I can also try to make a message telling students about the use of ES6 as @no-stack-dub-sack suggested.

[QuincyLarson]

@iliasTsiortas To my knowledge no one is actively working on this. Yes - go ahead and tell your students, and if you feel up for it, we would welcome your help with updating these lessons accordingly :)

[iliasTsiortas]

Actually i didnt make my self clear sorry for that.i am a student in this
class and chose your project to contribute.I saw that you merged someone's
contibution regarding the transition fron es5 to es6 i will look if
something is missing.For the notification for the students who skipped the
es6 lesson i have 2 questions.Do you want them to be popups or in the
page?also will i have to put them in every javascript challenge after that
section?because i can and will if you agree.thank you!

On Thu, May 10, 2018, 9:52 PM Quincy Larson [e-mail]
wrote:

@iliasTsiortas https://github.com/iliasTsiortas To my knowledge no one
is actively working on this. Yes - go ahead and tell your students, and if
you feel up for it, we would welcome your help with updating these lessons
accordingly :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/16325#issuecomment-388148623,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AY123llwbu2pWm9BSJGHGH28CT2m69OXks5txIxRgaJpZM4RMZHz
.

[QuincyLarson]

@iliasTsiortas These would be in the lesson text. And you would probably just need to mention this once for each section of challenges that are affected.

[QuincyLarson]

I'm closing this issue as stale since it hasn't been active lately. If you think this is still relevant to the newly updated platform, please explain why, then reopen it.