Keywords class, new & this?

[MSPa1nT]

Hej Guys,

I just started the ES6 challange related to class syntax;

freeCodeCamp.org

I’m a bit lost as to what these things are and was wondering whether they have been handled/explained in an earlier challange, as i have no memory of that?

My questions are mainly;

• what is it that differentiates a class from a function ? why and when do we use them?
• why do we use the keyword this, inside the function of the class?
• why is the keyword “new” used in fron of the function when declaring the variable zeus ?

Feels like I’ve missed something quite substantial as all this is not making any sense to me. Apologies before hand should I’ve managed to completely missed something obvious.

EDIT:

So i found a pretty good explanation on w3schools related to classes and if I understood it correctly , then classes is not objects , but rather object templates which is then used together with the keyword “new” when e.g we would like to create and assign an object with arguments (becoming the property values for the object).

How does the keyword “this” work in all this?

[kevinSmith]

what is it that differentiates a class from a function ? why and when do we use them?

A class is a function:

class Hey {};
console.log(typeof Hey);
// function

Classes are part of object oriented programming (OOP). JS is not truly OOP (like Java or C++, etc) but this is where it gets OOP-ish. Think of it like a specialized object that will contain data and methods (functions) to act on those data.

why do we use the keyword this, inside the function of the class?

The keyword this is not specific to classes or ES6. It is a complicated subject and it works differently in JS than it does in other languages, but in the case of a class, it allows you to refer to the class instance itself.

• why is the keyword “new” used in fron of the function when declaring the variable zeus ?

Because you are creating a new instance of that class. It will call the constructor with that string you passed, create a new instance of the class (you can have more than one) and save it into that variable.

Does this make things clearer?

const favoriteFood = 'apples'; // a global variable

class Dog { // define a class
  constructor(favoriteFood) {
    this.favoriteFood = favoriteFood; // assign the class property "favoriteFood" with passed in string
  }
  
  showFavoriteFood1() {
    console.log('favorite food 1', this.favoriteFood); // log out class property
  }
  
  showFavoriteFood2() {
    console.log('favorite food 2', favoriteFood); // log out global variable
  }
};

const myDog = new Dog('steak'); // create new instance of class, pass in favorite food to constructor
const yourDog = new Dog('hot dogs'); // create new instance of class, pass in favorite food to constructor

myDog.showFavoriteFood1();
// steak

myDog.showFavoriteFood2();
// apples

yourDog.showFavoriteFood1();
// hot dogs

yourDog.showFavoriteFood2();
// apples

Yes, this is kind of confusing. I might check out some youtube videos on OOP to get the gist, just keeping in mind that JS isn’t true OOP.

OOP is just one of many programming paradigms. JS “sort of” supports OOP and also “sort of” supports Functional Programming (FP), although I find the FP implementation easier. But you will see classes and such in JS (I see it all the time in old React code) so it is good to be familiar with it. But also don’t get frustrated - it is weird when you’re learning it.