자바스크립트에서 추상화

 

추상화는 공통적으로 가지고있어야 하는 속성과 메서드를 뽑아내는 작업을 추상화라고 한다.

 

예를들어 아코디언 메뉴를 추상화 해보자

+-------------------------+
|        Accordion        |
|-------------------------|
| - sections: array       |
| + addSection(title): void|
| + removeSection(index): void|
| + expandSection(index): void|
| + collapseSection(index): void|
+-------------------------+

 

위의 uml을 가지고 자바스크립트로 구현한다면

// Accordion 클래스 정의
class Accordion {
  constructor() {
    this.sections = [];
  }

  addSection(title) {
    const section = { title, expanded: false };
    this.sections.push(section);
  }

  removeSection(index) {
    if (index >= 0 && index < this.sections.length) {
      this.sections.splice(index, 1);
    }
  }

  expandSection(index) {
    if (index >= 0 && index < this.sections.length) {
      this.sections[index].expanded = true;
    }
  }

  collapseSection(index) {
    if (index >= 0 && index < this.sections.length) {
      this.sections[index].expanded = false;
    }
  }
}

// 예시 객체 생성
const accordionMenu = new Accordion();

// 섹션 추가
accordionMenu.addSection("Section 1");
accordionMenu.addSection("Section 2");
accordionMenu.addSection("Section 3");

// 섹션 확장 및 출력
accordionMenu.expandSection(0);
console.log(accordionMenu.sections); // [{ title: 'Section 1', expanded: true }, { title: 'Section 2', expanded: false }, { title: 'Section 3', expanded: false }]

// 섹션 축소 및 출력
accordionMenu.collapseSection(0);
console.log(accordionMenu.sections); // [{ title: 'Section 1', expanded: false }, { title: 'Section 2', expanded: false }, { title: 'Section 3', expanded: false }]

// 섹션 제거 및 출력
accordionMenu.removeSection(1);
console.log(accordionMenu.sections); // [{ title: 'Section 1', expanded: false }, { title: 'Section 3', expanded: false }]

 

다른 예시 Shape 클래스 만들기

+------------------+
|      Shape       |
|------------------|
| - width: number  |
| - height: number |
| + calculateArea(): number |
+------------------+

 

// Shape 클래스 정의
class Shape {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  calculateArea() {
    return this.width * this.height;
  }
}

// 예시 객체 생성
const rectangle = new Shape(5, 10);

// 도형의 속성 출력
console.log(`Width: ${rectangle.width}`);
console.log(`Height: ${rectangle.height}`);

// 넓이 계산 및 출력
const area = rectangle.calculateArea();
console.log(`Area: ${area}`);