Please enable JavaScript.

Coggle requires JavaScript to display documents.

14.1: ES6 Classes - Coggle Diagram

14.1: ES6 Classes

private properties

how to access them?

methods

class User {
...
  fullName = function () {
    return this.#firstName + " " + this.#lastName;
  };
...
console.log(user1.fullName())

getters/setters

class User {
...
  get firstName() {
    return this.#firstName;
  }
}

you should block the setter

class User {
...
  set firstName(name) {
    throw Error("firstName can't be changed");
  }
...
user1.firstName = "NotRenay";
}

outputs

> Uncaught Error: firstName can't be changed

getters/setters #

instead of the fullName function

instead of

use

class User {
...
   get fullName() {
    return `${this.#firstName} ${this.#lastName}`;
  }
}
...
console.log(user1.fullName);

class User {
...
  fullName = function () {
    return this.#firstName + " " + this.#lastName;
  };
}

setters

class User {
...
  set fullName(fullName) {
    let names = fullName.split(" ");
    this.#firstName = names[0];
    this.#lastName = names[1];
  }
}

traditional way

function User(fName, lName) {
  this.firstName = fName;
  this.lastName = lName;
  this.state = 'happy'
}

User.prototype.fullName = function () {
  return this.firstName + " " + this.lastName;
};


let user1 = new User('Renay', 'Earnshaw')
let user2 = new User('Philip', 'Earnshaw')

As of ES6

new class syntax

class User {
  state = "happy";
  firstName;
  lastName;

  constructor(fName, lName) {
    this.firstName = fName;
    this.lastName = lName;
  }
  fullName = function () {
    return this.firstName + " " + this.lastName;
  };
}

let user1 = new User('Renay', 'Earnshaw')
let user2 = new User('Philip', 'Earnshaw')

- - - - class level

solves the problem

:warning: of not using new

const User = function (fName, lName) {
  this.firstName = fName;
  this.lastName = lName;
};

let user1 = User("Renay", "Earnshaw");

> app.js:12 Uncaught TypeError: Class constructor User cannot be invoked without 'new'