안녕하세요, 코드의 세계를 탐험하는 주니어 개발자 여러분! 🚀
여러분은 JavaScript로 코딩을 하다가 이런 의문이 든 적이 없나요?
"왜 어떤 함수는 new 키워드와 함께 사용되는 걸까?"
"객체를 만들 때 왜 때로는 간단한 객체 리터럴을 쓰고, 때로는 복잡해 보이는 생성자 함수를 쓰는 걸까?"
이런 질문들에 대한 답을 찾아 헤매는 동안, JavaScript의 객체 지향 프로그래밍(OOP)이라는 미지의 영역에 발을 들이셨을 겁니다. 오늘은 이 신비로운 세계의 두 주요 개념인 '생성자(Constructor)'와 '인스턴스(Instance)'에 대해 탐구해보려고 합니다.
자, 이제 JavaScript의 객체 지향 마법의 세계로 떠나볼까요? 🧙♂️✨
생성자는 새로운 객체를 만들기 위한 특별한 함수입니다. 이를 객체의 '청사진' 또는 '템플릿'이라고 생각하면 이해하기 쉽습니다.
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`안녕하세요, 제 이름은 ${this.name}이고 ${this.age}살입니다.`);
};
}
이 Person 생성자 함수는 이름과 나이를 가진 사람 객체를 만들기 위한 템플릿입니다. this키워드는 생성될 객체를 가리킵니다.
인스턴스는 생성자를 통해 만들어진 실제 객체입니다. new 키워드를 사용하여 생성자로부터 인스턴스를 만들 수 있습니다.
const person1 = new Person('김코딩', 25);
const person2 = new Person('박해커', 30);
person1.sayHello(); // 출력: 안녕하세요, 제 이름은 김코딩이고 25살입니다.
person2.sayHello(); // 출력: 안녕하세요, 제 이름은 박해커이고 30살입니다.
person1과 person2는 Person 생성자의 인스턴스입니다. 각각 고유한 name과 age 속성을 가지고 있습니다.
생성자와 인스턴스의 관계를 이해하는 것은 매우 중요합니다.
prototype 객체를 상속받습니다.Person.prototype.getAge = function() {
return this.age;
};
console.log(person1.getAge()); // 출력: 25
console.log(person1 instanceof Person); // 출력: true
생성자와 인스턴스는 코드의 재사용성과 구조화에 매우 유용합니다.
const users = [
new Person('김철수', 20),
new Person('이영희', 22),
new Person('박민수', 25)
];
Person.prototype.introduce = function() {
console.log(`${this.name}입니다. 잘 부탁드려요!`);
};
users.forEach(user => user.introduce());
new 키워드 잊지 않기: 생성자 함수를 new 없이 호출하면 의도치 않은 결과가 발생할 수 있습니다.
this 바인딩 주의: 콜백 함수 등에서 this가 예상과 다르게 바인딩될 수 있으니 주의가 필요합니다.
생성자와 인스턴스는 JavaScript에서 객체 지향 프로그래밍을 구현하는 핵심 개념입니다. 이들을 잘 이해하고 활용하면, 더 체계적이고 유지보수가 쉬운 코드를 작성할 수 있습니다.
앞으로 코딩을 하실 때, 객체를 만들어야 할 상황이 오면 이렇게 생각해보세요:
"이 객체의 청사진(생성자)을 만들어 재사용할 수 있을까? 아니면 단순한 객체 리터럴로 충분할까?"
이런 고민을 통해 여러분의 코드는 점점 더 '객체 지향적'으로 발전해 나갈 것입니다.
JavaScript의 생성자와 인스턴스, 정말 마법 같지 않나요? 여러분도 이제 이 마법을 부릴 준비가 되셨습니다! 🎩✨
행운을 빕니다, 그리고 즐거운 코딩 되세요! 💻🚀