Leveraging Object-Oriented Programming Principles for Code Refactoring in JavaScript

Hello once again! Today's lesson is centered around leveraging the principles of Object-Oriented Programming (OOP) — Encapsulation, Abstraction, Polymorphism, and Composition — to enhance code readability and structure. Buckle up for an exciting journey ahead!

OOP principles act as a scaffold for building readable, maintainable, and flexible code — these are the characteristics we seek while refactoring. By creating logical groupings of properties and behaviors in classes, we foster a codebase that's easier to comprehend and modify. Let's put this into perspective as we progress.

Encapsulation involves bundling related properties and methods within a class, thereby creating an organization that mirrors the real world.

Suppose we possess scattered student information within our program:

var student_name = "Alice";
var student_age = 20;
var student_grade = 3.9;

function displayStudentInfo() {
  console.log("Student Name: " + student_name);
  console.log("Student Age: " + student_age);
  console.log("Student Grade: " + student_grade);
}

function updateStudentGrade(new_grade) {
  student_grade = new_grade;
}

Although functional, the code could cause potential confusion as the related attributes and behaviors aren't logically grouped. Let's encapsulate!

class Student {
  constructor(name, age, grade) {
    this.name = name;
    this.age = age;
    this.grade = grade;
  }

  displayStudentInfo() {
    console.log("Student Name: " + this.name);
    console.log("Student Age: " + this.age);
    console.log("Student Grade: " + this.grade);
  }

  updateStudentGrade(newGrade) {
    this.grade = newGrade;
  }
}

After refactoring, all student-related properties and methods are contained within the Student class, thereby enhancing readability and maintainability.

Next up is Abstraction. It is about exposing the relevant features and concealing the complexities.

Consider a code snippet calculating a student's grade point average (GPA) through complex operations:

function calculateGpa(grades) {
  var totalPoints = 0;
  var gradePoints = {'A': 4, 'B': 3, 'C': 2, 'D': 1, 'F': 0};
  grades.forEach(function(grade) {
    totalPoints += gradePoints[grade];
  });
  var gpa = totalPoints / grades.length;
  return gpa;
}

We can encapsulate this within the calculateGpa() method of our Student class, thereby simplifying the interaction.

class Student {
  constructor(name, grades) {
    this.name = name;
    this.grades = grades;
    this.gpa = this.calculateGpa();
  }

  calculateGpa() {
    var totalPoints = 0;
    var gradePoints = {'A': 4, 'B': 3, 'C': 2, 'D': 1, 'F': 0};
    this.grades.forEach((grade) => {
      totalPoints += gradePoints[grade];
    });
    return totalPoints / this.grades.length;
  }
}

We can now access the gpa as an attribute of the student object, which is calculated behind the scenes.