※ 해당 내용은 FrontEnd Category에 한정할 수 없습니다. 편의상 FrontEnd Category에 작성합니다.
JavaScript는 프로토타입 기반 언어입니다. 모든 객체는 프로토타입 객체를 가지며, 이를 통해 속성과 메서드를 상속받습니다.
function Animal(name) {
this.name = name;
}
Animal.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
const cat = new Animal('KJ');
cat.sayHello(); // 출력: Hello, I'm KJ
ES6 클래스 문법
ES6부터 도입된 class 키워드를 사용하면 더 직관적으로 객체 지향 프로그래밍을 할 수 있습니다.
class Animal {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, I'm ${this.name}`);
}
}
const dog = new Animal('SJ');
dog.sayHello(); // 출력: Hello, I'm SJ
객체 생성 패턴
다양한 객체 생성 패턴을 사용하여 효율적으로 객체를 만들 수 있습니다.
팩토리 패턴
function createAnimal(name, species) {
return {
name,
species,
sayHello() {
console.log(`Hello, I'm ${this.name}, a ${this.species}`);
}
};
}
const fish = createAnimal('KJ', 'SJ');
fish.sayHello(); // 출력: Hello, I'm KJ, a SJ
상속과 다형성
JavaScript에서는 프로토타입 체인을 통해 상속을 구현합니다. ES6 클래스를 사용하면 더 쉽게 상속을 구현할 수 있습니다.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const animal = new Animal('Generic Animal');
animal.speak(); // 출력: Generic Animal makes a sound.
const dog = new Dog('Buddy');
dog.speak(); // 출력: Buddy barks.
캡슐화와 정보 은닉
JavaScript에서 완벽한 private 속성을 구현하는 것은 어렵지만, 컨벤션이나 클로저를 사용하여 유사하게 구현할 수 있습니다.
// 은행 계좌 생성 함수
function createBankAccount(initialBalance) {
// 비공개 변수
let balance = initialBalance;
// 공개 인터페이스를 반환
return {
deposit: function(amount) {
if (amount > 0) {
balance += amount;
console.log(`${amount}원이 입금되었습니다. 현재 잔액: ${balance}원`);
} else {
console.log('유효한 금액을 입력하세요.');
}
},
withdraw: function(amount) {
if (amount > 0 && amount <= balance) {
balance -= amount;
console.log(`${amount}원이 출금되었습니다. 현재 잔액: ${balance}원`);
} else {
console.log('유효하지 않은 금액이거나 잔액이 부족합니다.');
}
},
getBalance: function() {
return balance;
}
};
}
// 사용 예시
const myAccount = createBankAccount(1000);
console.log('초기 잔액:', myAccount.getBalance()); // 1000
myAccount.deposit(500); // 500원이 입금되었습니다. 현재 잔액: 1500원
myAccount.withdraw(200); // 200원이 출금되었습니다. 현재 잔액: 1300원
console.log('최종 잔액:', myAccount.getBalance()); // 1300
// 직접 잔액 조작 시도 (불가능)
myAccount.balance = 1000000; // 아무 효과 없음
console.log('조작 시도 후 잔액:', myAccount.getBalance()); // 여전히 1300