Javascript classes?

Question

Javascript classes are not in anyway described in the tutorial, and doesn't actually even work in the code playground. Anyone knows why that may be?

I made an example, showing that the method used in the tutorials to create an object works, but class itself is not identified.
https://code.sololearn.com/WMF36Kb9mMao/?ref=app

Answer 1

you may ask to sololearn to add this in course of the community in the beta. there is a lot of lessons created by people like you

Answer 2

The code playground is not fully compatible with all versions of JS's nuances, but the code below does work:

function helloWorld(){
this.defaultSent = "Hello world!";

this.changeSentence = function(newSent){
this.defaultSent = newSent;
};

this.alertSent = function(){
alert(this.defaultSent);
};
}

var hello = new helloWorld();
hello.alertSent();

class helloWorldClass {
constructor() {
this.defaultSent = "Hello world!";
}

changeSentence(newSent) {
this.defaultSent = newSent;
}

alertSent(){
alert(this.defaultSent);
}
}

var hello1 = new helloWorldClass();
hello1.alertSent();

Answer 3

Yes, I did. If you copy the complete code from my previous post and paste it into the JS tab (remove or comment out the non-code paragraph at the top) and click run you'll get 2 alerts one after the other, both stating "Hello world!".

Answer 4

You have several issues with your code in the playground.
line 15
helloWorld.alertSent();
needs to be:
hello.alertSent();

Then on line 17
class helloWorldClass(){
You need to remove the parentheses (you're not inheriting)
class helloWorldClass {

line 18
this.defaultSent = "Hello world!";
isn't valid because you can only have methods as properties

line 20
changeSentence(String newSent){
You can't specify the parameter type (at least not like this)

Once these changes are made the code will run. Your defaultSent property however, isn't set. You can set it by either using your changeSentence() method or by adding a constructor and initializing it there.

constructor() {
this.defaultSent = "Hello world!";
}

Also, you should add the semi-colons to close off your inner functions on lines 6 and 10.

Answer 5

Have you tried closing out of the code playground or the app/site etc and then try it again? If it still persists what exactly is the error you're receiving?

Answer 6

Ok, so it may be a browser compatibility issue. The keyword class is es5 and later I think, and the reserved word constructor is es6 i think. Maybe check on caniuse.com. So this may be your issue. You may need to try it with a newer browser, or code in in an earlier fashion.

Answer 7

@ChaoticDawg In the code I posted, which you tested, I included two examples, one that works and one thay doesn't. When I run the code, it states that it couldn't identify the "class" in the program.
It states "unexpected reserved word at line 17", indicating that it doesn't recognise class declarements to begin with.

Answer 8

@ChaoticDawg Did you test the code, because the error is still the same after basically copying your code. I'm sorry, I was pretty sloppy when making that example, was on the bus going to work.

EDIT: Although the code I originally posted, does work on my browser.

Answer 9

@ChaoticDawg But it doesn't, the same error persists. I live in Finland, so we might be connecting to different servers when executing the code.

Answer 10

Yeah, I have done everything you have stated above.
It returns me this error message:
" Uncaught SyntaxError: Unexpected reserved word
Line 17 "

Answer 11

Try this and see if it works:

var helloWorldClass = function() {
this.defaultSent = "Hello world!";
};

helloWorldClass.prototype.changeSentence = function(newSent) {
this.defaultSent = newSent;
};

helloWorldClass.prototype.alertSent = function() {
alert(this.defaultSent);
};

helloWorldClass.prototype;

var hello1 = new helloWorldClass();
hello1.alertSent();

This is the old way of building classes via a prototype.