학습
JavaScript 클래스 및 객체지향 프로그래밍
JavaScript 클래스 및 객체지향 프로그래밍 — 중급
클래스 및 객체지향 프로그래밍
1. 도입 (왜 배워야 하는가)
클래스와 객체지향 프로그래밍은 소프트웨어 개발에서 매우 중요한 개념입니다. 실제로 대규모 애플리케이션을 개발할 때, 코드의 재사용성과 유지보수성을 높이기 위해 객체지향 패러다임을 사용합니다.
객체지향 프로그래밍(OOP)을 이해하지 못하면, 복잡한 시스템을 관리하거나 새로운 기능을 추가하는 데 어려움을 겪을 수 있습니다. 예를 들어, 팀 프로젝트에서 여러 개발자가 동시에 작업할 때, OOP를 활용하면 각자의 코드를 통합하기가 훨씬 쉬워집니다.
2. 핵심 개념 설명
클래스 (Class)
- 클래스는 객체를 생성하기 위한 템플릿입니다. 즉, 객체의 속성과 메서드를 정의합니다.
- 비유하자면, 클래스는 '설계도'와 같습니다. 건물의 설계도 없이 건물을 세울 수 없듯이, 클래스 없이는 객체를 만들 수 없습니다.
- 객체는 클래스의 인스턴스이며, 클래스에서 정의한 속성과 메서드를 가지고 있습니다.
- 실생활에서는 자동차가 객체라고 할 수 있습니다. 자동차라는 클래스의 설계도에 따라 각각의 자동차 객체가 만들어집니다.
객체 (Object)
| 용어 | 설명 |
|---|---|
| 클래스 | 객체를 생성하기 위한 템플릿 |
| 객체 | 클래스의 인스턴스 |
| 메서드 | 객체가 수행할 수 있는 함수 |
| 속성 | 객체가 가지고 있는 데이터 |
3. 기본 코드 예제
class Car {
constructor(brand, model) {
this.brand = brand; // 브랜드 속성
this.model = model; // 모델 속성
}
displayInfo() {
return 차량 브랜드: ${this.brand}, 모델: ${this.model}; // 차량 정보 출력
}
}
const myCar = new Car('현대', '아반떼'); // Car 클래스의 인스턴스 생성
console.log(myCar.displayInfo()); // 차량 브랜드: 현대, 모델: 아반떼class Car { ... }: Car라는 클래스를 정의합니다.constructor(brand, model) { ... }: 생성자로, 객체가 생성될 때 호출되며 브랜드와 모델을 초기화합니다.this.brand = brand;: 클래스 속성 brand에 인자로 받은 brand 값을 할당합니다.displayInfo() { ... }: 차량 정보를 반환하는 메서드입니다.const myCar = new Car('현대', '아반떼');: Car 클래스로부터 myCar 객체를 생성합니다.console.log(myCar.displayInfo());: 메서드를 호출하여 차량 정보를 출력합니다.4. 실전 활용 예제
예제 1: 쇼핑몰 장바구니 구현
쇼핑몰에서 장바구니 기능을 구현할 때 클래스를 사용할 수 있습니다.
class Cart {
constructor() {
this.items = []; // 장바구니 아이템을 저장할 배열
}
addItem(item) {
this.items.push(item); // 아이템 추가
}
displayItems() {
return this.items.join(', '); // 장바구니 아이템 출력
}
}
const myCart = new Cart();
myCart.addItem('사과');
myCart.addItem('바나나');
console.log(myCart.displayItems()); // 사과, 바나나예제 2: 간단한 게임에서 캐릭터 만들기
게임에서 캐릭터를 클래스로 정의할 수 있습니다.
class Character {
constructor(name, health) {
this.name = name; // 캐릭터 이름
this.health = health; // 캐릭터 체력
}
attack() {
console.log(${this.name}가 공격했습니다!); // 공격 메시지
}
}
const hero = new Character('전사', 100);
hero.attack(); // 전사가 공격했습니다!5. 흔한 실수와 주의사항
실수 1: 잘못된 this 바인딩
class Person {
constructor(name) {
this.name = name;
}
greet() {
setTimeout(function() {
console.log(안녕하세요, 저는 ${this.name}입니다.); // undefined
}, 1000);
}
}this가 setTimeout의 콜백 함수에서 제대로 바인딩되지 않아 undefined가 출력됩니다.this 바인딩을 유지합니다.greet() {
setTimeout(() => {
console.log(안녕하세요, 저는 ${this.name}입니다.); // 올바르게 동작
}, 1000);
}실수 2: 메서드 접근 시 괄호를 빼먹음
const person = new Person('홍길동');
person.greet; // 메서드 호출이 아님person.greet(); // 올바른 메서드 호출6. 정리
this 바인딩 문제와 메서드 호출 시 실수를 주의해야 합니다.