Object Oriented JavaScript

Class

class User {
constructor( firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
updateName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}

Constructor

class User {
constructor(firstName, lastName, email = “test@test.com”) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;;
}
updateName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
user = new User("Brendan", "Eich");
console.log( user.getFullName());

Static Members

class User {
static userCount = 0;
constructor(firstName, lastName, email = “test@test.com”) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;;
}
updateName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
static createUser(firstName, lastName, email = “test@test.com”) {
return new User(firstName, lastName, email);
}
}
user = new User("Brendan", "Eich");
console.log( user.getFullName());
newUser = User.createUser("Bjarne", "Stroustrup");
console.log( newUser.getFullName());
newUser = new User("Brendan", "Eich","test@test.com");
<!DOCTYPE html>
<html>
<body>
<h2>User Details</h2>
<p id=”name”></p>
<script>
class User {
constructor(firstName, lastName, email = “test@test.com”) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;;
}
updateName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
user = new User("Brendan", "Eich");
document.getElementById(“name”).innerHTML = user.getFullName();
</script>
</body>
</html>

Class Expression

<script>
let User = class {
constructor(firstName, lastName, email = “test@test.com”) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;;
}
updateName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}user = new User("Brendan", "Eich");console.log( user.whoAmI() );</script>

Encapsulation

class User {
static userCount = 0;
static #passwordLevel = 1;
#email = “test@test.com”;
constructor(firstName, lastName, email) {
this.firstName = firstName;
this.lastName = lastName;
this.#email = email;
User.userCount++;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
updateName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
static createUser(firstName, lastName, email = “test@test.com”) {
return new User(firstName, lastName, email);
}
getUserDetails() {
return `Hello. I'm ${firstName.} My email ID is${this.#email} and my Password Level ${User.#passwordLevel}`; }
}
user = new User("Brendan", "Eich");
console.log( user.getUserName());
console.log( User.#passwordLevel); // ← This will throw an error because we are trying to access private static variable.

Inheritance

class User {
constructor( firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
updateName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
class Student extends User {
constructor( firstName, lastName, studentId ) {
super(firstName, lastName);
this.studentId = studentId;
}
get studentId() {
return this.studentId;
}
set studentId( studentId ) {
this.studentId = studentId;
}
}
student = new Student("Brendan", "Eich","SID22236");
document.getElementById(“name”).innerHTML = student.getFullName();
document.getElementById("studentID").innerHTML = student.studentId;

Method Override

class User {
constructor( firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
updateName(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getDescription() {
return “I am a User!”;
}
}
class Student extends User {
constructor( firstName, lastName, studentId ) {
super(firstName, lastName);
this.studentId = studentId;
}
get studentId() {
return this.studentId;
}
set studentId( studentId ) {
this.studentId = studentId;
}
getDescription() {
return “I am a Student!”;
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store