Freecodecamp: Allowing ES6 Classes in Basic Algorithms and ES5 Challenges

[Stateford]

Challenge Name

https://www.freecodecamp.com/challenges/make-a-person

Issue Description

the code provided below should work, but it's failing the checks for a count and an undefined check

Browser Information

• Browser Name, Version: Firefox Dev
• Operating System: Linux Ubuntu / windows 10
• Mobile, Desktop, or Tablet: Desktop

Your Code

"use strict";

class Person {
    constructor(firstAndLast) {
        this.setFullName(firstAndLast);
    }
    setFirstName(first) {
        this.firstName = first;
    }
    setLastName(last) {
        this.lastName = last;
    }
    setFullName(firstAndLast) {
        var arr = firstAndLast.split(' ');
        if(arr.length <= 2) {
            this.firstName = arr[0];
            this.lastName = arr[1];
        } else {
            console.log('That is not a valid name');
        }
    }
    getFirstName() {
        return this.firstName;
    }
    getLastName() {
        return this.lastName;
    }
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}


var bob = new Person("Bob Ross");

Screenshot

[raisedadead]

@idietmoran Thanks for reporting this.

First of all to execute ES2015, You need to add /*jshint esversion:6*/ or // jshint esversion:6 to your code to enable the online linter. Just add this to the top of your code.
Additionally I changed, "use strict"; => "using strict"; in your code above

This removes the linting warnings and errors.

This doesn't let the challenge pass, though. Can you confirm this is a valid solution?

[Stateford]

The following still doesn't pass

Object.keys(bob).length should return 6.
bob.firstName should return undefined.
bob.lastName should return undefined.

I don't know why this solution wouldn't pass

Here is my console output in brackets with the code:

[raisedadead]

@idietmoran I recommend you consult the JavaScript Chat Room about the solution.

Edit : Ignore previous comment.

[QuincyLarson]

@idietmoran is this still an issue?

[Stateford]

@QuincyLarson Yes, it should work. I even tried revising my code to this:

"use strict";

class Person {
    constructor(firstAndLast) {
        //this.setFullName(firstAndLast);
        let arr = firstAndLast.split(' ');
        this.firstName = arr[0];
        this.lastName = arr[1];
    }
    setFirstName(first) {
        this.firstName = first;
    }
    setLastName(last) {
        this.lastName = last;
    }
    setFullName(firstAndLast) {
        let arr = firstAndLast.split(' ');
        if(arr.length <= 2) {
            this.firstName = arr[0];
            this.lastName = arr[1];
        } else {
            console.log('That is not a valid name');
        }
    }
    getFirstName() {
        return this.firstName;
    }
    getLastName() {
        return this.lastName;
    }
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}


var bob = new Person("Bob Ross");

it fails three tests

[augmt]

@idietmoran A class' methods in ES6 are non-enumerable so it's impossible for Object.keys(bob).length to return anything but the number of public data variables (two) with this current syntax.

Also if you'd like to have bob.firstName and bob.lastName to be undefined, then firstName and lastName must somehow be kept private.

[QuincyLarson]

@augmt thanks for digging in and clarifying this.

[systimotic]

What do you all think of requiring the ES5 version for this challenge, and ES6 for this beta challenge?

[systimotic]

/cc @freeCodeCamp/moderators 👆

[erictleung]

@systimotic I'm fine with your suggestion. Sounds reasonable. So should we just add a Note about using ES5 syntax for this challenge then?

[systimotic]

@erictleung Yeah, that sounds like a plan. Do you have any ideas on how to add a note without confusing campers that don't know about ES6 yet?

[augmt]

@systimotic I think the tests for this challenge should be flexible enough to allow both ES5 and ES6 syntaxes to pass.

ES6 class methods are non-enumerable for some reason, and there isn't a simple way to implement private data. But this challenge seems to be more about creating a data structure than enumerable or private properties. Both syntaxes can do that.

[Stateford]

I'm not sure if it helps, but you can use this to test it if you really wanted.

"use strict";

class Person {
    constructor(firstAndLast) {
        //this.setFullName(firstAndLast);
        let arr = firstAndLast.split(' ');
        this.firstName = arr[0];
        this.lastName = arr[1];
    }
    setFirstName(first) {
        this.firstName = first;
    }
    setLastName(last) {
        this.lastName = last;
    }
    setFullName(firstAndLast) {
        let arr = firstAndLast.split(' ');
        if(arr.length <= 2) {
            this.firstName = arr[0];
            this.lastName = arr[1];
        } else {
            console.log('That is not a valid name');
        }
    }
    getFirstName() {
        return this.firstName;
    }
    getLastName() {
        return this.lastName;
    }
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}


var bob = new Person("Bob Ross");

function test(arg) {
    for(let i in arg) {
        console.log(i);
    }
}

test(bob);

that returns this

firstName
lastName
[Finished in 0.989s]

[erictleung]

@systimotic mmm in beta, the "Make a Person" challenge is shown after the ES6 module. So by that time, we could just specify that you shouldn't use ES6 classes for this challenge.

@augmt I don't actually know too much about ES6 syntax yet (been on my list for a while :sweat_smile:) but if we can incorporate both ES5 and ES6 class definitions to work in the tests, then that would be the best.

[systimotic]

@erictleung Oh, nice catch! That does make things easier.

@augmt As campers should already know the ES6 version by the time they reach this challenge, I think it would make sense to teach them the ES5 version here.
They are bound to run into it in the wild somewhere, so I think it's a good idea to teach them about it.
Having to do the same thing in two challenges would be a bit weird.
The ES5 version still can do some things that you can't do with the ES6 version, mainly the ability to extend the prototype of an existing class.

I think adding a note that mentions the camper is required to use the ES5 syntax would be a good idea.

[augmt]

@systimotic Ok, I see your point and agree. :thumbsup:

If campers are required to use ES5 syntax, then how about adding an explicit test?

assert(Person.toString().substr(0, 8) === 'function', 'message: You should use a (object constructor) function to define <code>Person</code>.');

Otherwise we could amend the challenge instructions by adding the word "function" to the first line—

Fill in the object constructor function with the following methods below:

—or inserting a sentence somewhere in the middle about the required syntax usage.

[valonhaliti]

Hello, do you plan to fix it to work with ES6 or nope.

[4mifix]

@erictleung Just a note var will allow the stored value to be changed but let is scoped to the block. Just read that over the weekend quite a difference in ES6. Hopefully this helps.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

A full explanation is at the bottom of the page in the link posted above for all three (var, let and const).

[Stateford]

@4mifix let can be changed, it's just scoped to the block.

[4mifix]

@idietmoran you are absolutely correct, reading a little on it right now.

[Stateford]

this code should pass and won't work:

var Person = function(firstAndLast) {
    // Complete the method below and implement the others similarly



    this.setFullName = function(firstAndLast) {
        let arr = firstAndLast.split(" ");
        this.firstName = arr[0];
        this.lastName = arr[1];
    }

    this.setFullName(firstAndLast);

    this.getFullName = function() {
        return `${this.firstName} ${this.lastName}`;
    }

    this.setFirstName = function(firstName) {
        this.firstName = firstName;
    }

    this.getFirstName = function() {
        return this.firstName;
    }

    this.setLastName = function(lastName) {
        this.lastName = lastName;
    }

    this.getLastName = function() {
        return this.lastName;
    }
};

too many frivolous checks
Object.keys(bob).length should return 6.
bob instanceof Person should return true.
bob.firstName should return undefined.
bob.lastName should return undefined.

[BerkeleyTrue]

I'm of the opinion that we should make campers to use the old school class as @systimotic suggests. There is value in teaching the prototypical class, especially when you consider that the class syntax desugars down to prototypical classes and are also not considered classes in the classical inheritance (OOP) sense (i.e. java classes).

[raisedadead]

Yup, I agree.

Just to clarify that for the scope of this challenge, we should limit the user to learning prototypal inheritance concepts .

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance

Its a critical feature that JavaScript has.

Its imperative that this difference from Classical Inheritance http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm, is made known early on in the ES6 challenges that we are planning to release in the beta.

But, that's a different story.

ES6 adds the syntactical sugar, meaning it just boils down to Prototypal inheritance, is something which I believe most new comers might miss, and hence may face conceptual mis-understanding in the real world.

I am open to thoughts about how to clarify this in a better way though the curriculum.

That, said coming to the scope of the challenge I think its fine to NOT allow ES6 classes here itself. We have the section for that already.

[QuincyLarson]

@raisedadead @BerkeleyTrue OK - it sounds like we just need to update the lesson copy to clarify they should use prototypical inheritance - and not ES6 classes - to solve this. @raisedadead Would you be interested in updating the copy since you've put a lot of thought into the reasoning behind this?

[raisedadead]

Hi @QuincyLarson and everyone involved.

I took some time, to review this challenge and the entire discussion. Since this discussion is quite old, I thought it best to take some time and not deviate without correct assessment and triage.

The summary of the current status:

A. _Reconciliation_ on the OP and the subsequent discussion is about allowing ES6 Classes in the challenge.
B. _Encouragement_ of Prototypal classes over ES6 Classes early on in Basic JS Section.
C. _Conceptual reinforcement_ of the distinction between Prototypal and Classical Paradigms (which is not same as ES6 Classes) early on in the ES6 Section.

The action on this particular issue and its scope:

IMHO,

1. For the reconciliation we should allow ES6 classes in this challenge, because in beta, this challenge comes in advanced algorithms section, which is after the ES6 Section.
2. For the encouragement of prototypal inheritance in javascript, we need a separate challenge if not already in the Basic JS section without discussion on ES6 Classes at all. This so that we do not confuse anyone who is not aware of ES6 yet.
3. However for the conceptual reinforcement we need to add a new challenge just after we introduce the ES6 Classes. Here we can safely assume knowledge of Basic JS.

Technical Implementation:

For point 1., I believe it would need advice from @BerkeleyTrue because this issue would be generic to all the Advanced Algorithm Challenges. Do wehave the built in support already for ES6 on those challenges?

For point 2. and 3., we need help in evaluating and if needed creating fresh challenges or updating existing, to address them.

For that I am tagging as help wanted, for others to pitch in, with this effort.

Happy contributing!

[QuincyLarson]

@raisedadead Note that we're moving the advanced algorithms (including this challenge) out of the main curriculum completely and into the interview prep section.

We would indeed benefit from having two versions of this challenge (maybe with slightly different themes like "make a dog" focused on prototypical inheritance). We should have both of these in the intermediate algorithm challenges section (and not in the advanced algorithms section).

[raisedadead]

Perfect. That sounds like a plan. Thanks for confirming.

[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.