안녕하세요 lika-7입니다
이번시간에는 클래스와 함수의 객체 지향적 사용법에 대해 정리 하겠습니다
글을 쓰는 이유
필자는 절차 지향적 코더에서 객체 지향적 코더로 변화하고 있는 중입니다.
이에 우리의 코딩 엣지를 살려줄만한 몇가지 코딩법을 기술하겠습니다.
1. 클래스와 함수를 객체의 키로 사용하기
✅
객체 지향 프로그래밍(OOP) 구현:
클래스를 객체의 프로퍼티로 사용하면 객체 지향 프로그래밍의 개념을 자연스럽게 표현할 수 있습니다.
이렇게 하면 코드를 더욱 객체 지향적으로 구성할 수 있습니다.
✅
다형성(Polymorphism) 구현:
객체의 키로 클래스를 사용하면 상속과 다형성을 활용하여 다양한 동작을 구현할 수 있습니다.
동일한 메소드 이름을 가진 다른 클래스를 객체로 생성하여 다형성을 실현할 수 있습니다.
✅
익명 함수 및 콜백 함수 관리:
함수를 객체의 프로퍼티로 사용하면 익명 함수나 콜백 함수를 관리하고 전달하기 용이하며, 비동기적인 작업을 처리할 때 특히 유용합니다.
다형성을 활용한 도형 클래스
class Circle {
constructor(radius) {
this.radius = radius;
}
area() {
return Math.PI * this.radius ** 2;
}
}
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
area() {
return this.width * this.height;
}
}
const shapes = {
circle: Circle,
rectangle: Rectangle
};
const myCircle = new shapes.circle(5);
const myRectangle = new shapes.rectangle(3, 4);
console.log(myCircle.area()); // 원의 넓이 계산
console.log(myRectangle.area()); // 직사각형의 넓이 계산
위의 예시에서 객체 shapes의 키로 클래스를 사용하여 다형성을 활용하고 있습니다. 이를 통해 다양한 도형을 나타내는 클래스를 관리하고 생성할 수 있습니다.
이벤트 핸들링:
const eventHandlers = {
onClick: function () {
console.log('버튼이 클릭되었습니다.');
},
onMouseOver: function () {
console.log('마우스가 요소 위로 이동했습니다.');
}
};
const button = document.querySelector('button');
button.addEventListener('click', eventHandlers.onClick);
button.addEventListener('mouseover', eventHandlers.onMouseOver);
이 예시에서는 객체 eventHandlers의 키로 함수를 사용하여 이벤트 핸들러를 관리합니다. 이를 통해 이벤트 리스너를 쉽게 추가하고 제거할 수 있습니다.
JavaScript에서 객체의 키로 클래스와 함수를 사용하는 것은 코드를 더 모듈화하고 유연하게 만들며, 다양한 상황에 적용할 수 있는 강력한 패턴 중 하나입니다.
2. 모듈로 클래스 전달하기
모듈 시스템을 사용하여 클래스나 함수를 다른 파일로 내보내고 가져올 수 있습니다.
이는 코드를 재사용 가능한 모듈로 분리하여 코드 베이스를 더욱 구조화하고 관리하기 쉽게 만듭니다.
다른 파일에서 클래스를 가져와 사용할 때 모듈로 클래스를 전달하는 것이 가능합니다.
ClassModule.js
//ClassModule.js
class MyClass {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, ${this.name}!`);
}
}
export default MyClass;
Main.js
import MyClass from './ClassModule.js';
const myInstance = new MyClass('Alice');
myInstance.sayHello(); // 출력: Hello, Alice!
ClassModule.js코드에서 export default 문을 사용해서 MyClass문을 내보냅니다.
Main.js에서 import 문을 사용해 ClassModule.js에 있는 MyClass를 가져와 이용합니다.
모듈 시스템을 이용해 위와 같이 코드 간에 클래스, 함수를 전달하고 사용할수 있습니다.
모듈 시스템을 이용해 코드를 더 잘 구성하고 모듈 간의 의존성을 관리하는 데 활용하도록 해야 합니다.
