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.
  • You can define public and private members
  • Private members, including private static members may only be accessed from within the class.
  • By creating a class instance, public variables may be accessed.
  • The public static member variables will not be invoked on a specific instance; instead, they may be accessed by using the class name directly.

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!”;
}
}

--

--

--

Associate Software Engineer | Software Engineering Undergraduate | Full Stack Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Detecting iPhone or Android User on Your Website (JavaScript)

How to add google font into magento2

Git Commit Hooks, linting and formatting the code with Prettier before committing it to GitHub…

JavaScript : How Can We Use Javascript in Data Science?

React.js vs Vanilla “Plain” JavaScript

A Reference Manual for Automating Accessibility Testing in React/Gatsby(ii)

How to develop responsive UIs with React Native — 1x03

Why or why not choose CSS-in-JS

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
yasith wimukthi

yasith wimukthi

Associate Software Engineer | Software Engineering Undergraduate | Full Stack Developer

More from Medium

JavaScript Strings

This a code snippet that shows how you can check the length of a string in Javascript:

Abstraction in Javascript

JavaScript callback functions

JavaScript Iterations

The end of a toilet paper roll hanging near a toilet with the last paper sheet hanging from the cardboard roll with the words “Don’t Panic!”.