JavaScript에서 객체를 생성하는 방식은 여러 가지가 있습니다.
이 중에서 가장 많이 사용되는 두 가지 방법은
객체 리터럴(const newObj = {})과 생성자 함수(const new Something())를 이용하는 것입니다.
이번 포스팅에서는 이 두 가지 방식의 차이점을 자세히 살펴보고, 각 방식의 특징과 장단점을 정리해 보겠습니다.
예제 코드도 함께 소개해 드리니, 각각의 특징을 좀 더 쉽게 이해할 수 있을 거예요.
객체 리터럴 (const newObj = {})
객체 리터럴은 JavaScript에서 객체를 만드는 가장 간단한 방법입니다.
다음은 객체 리터럴 방식의 특징과 예제 코드입니다.
1. 기본 사용 예시
객체 리터럴을 이용해 사람 정보를 저장하는 간단한 객체를 만들어 보겠습니다.
const person = {
name: '홍길동', // 이름 속성
age: 30, // 나이 속성
greet: function() {
console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`);
}
};
// 객체 사용 예시
person.greet(); // 출력: 안녕하세요, 제 이름은 홍길동이고, 나이는 30살입니다.위 코드에서는 {}를 이용해 객체 person을 만들고, 속성 name, age와 메소드 greet를 추가했습니다.
객체 리터럴은 이렇게 빠르고 간단한 객체 구조를 정의할 때 매우 유용합니다.
2. 동적 속성 추가
객체 리터럴 방식은 필요에 따라 새로운 속성을 쉽게 추가할 수 있습니다.
person.job = '소프트웨어 개발자'; // 새로운 속성 추가
console.log(person.job); // 출력: 소프트웨어 개발자위와 같이 객체에 속성을 동적으로 추가하는 것도 가능합니다.
이 방식은 단순히 몇 가지 속성만을 가지는 객체를 만들 때 사용하기 매우 적합합니다.
생성자 함수 (const new Something())
이제 생성자 함수 혹은 클래스를 사용한 객체 생성 방식을 살펴보겠습니다.
이 방식은 객체를 더 유연하게 생성하고 초기화할 때 사용됩니다.
1. 생성자 함수 사용 예시
먼저 생성자 함수를 이용해 여러 개의 Person 객체를 만들 수 있는 방법을 보여드리겠습니다.
function Person(name, age) {
this.name = name; // 생성자 내부에서 이름 초기화
this.age = age; // 생성자 내부에서 나이 초기화
this.greet = function() {
console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`);
};
}
// 새로운 객체 생성
const hong = new Person('홍길동', 30);
const lee = new Person('이순신', 45);
// 객체 사용 예시
hong.greet(); // 출력: 안녕하세요, 제 이름은 홍길동이고, 나이는 30살입니다.
lee.greet(); // 출력: 안녕하세요, 제 이름은 이순신이고, 나이는 45살입니다.위 코드에서는 Person이라는 생성자 함수를 사용해 새로운 객체를 만들었습니다.
new Person()을 호출할 때마다 name과 age 속성을 가진 새로운 객체가 생성됩니다. 이 방식은 여러 개의 유사한 객체를 만들어야 할 때 매우 유용합니다.
2. 프로토타입을 이용한 메소드 정의
생성자 함수에서 메소드를 객체마다 중복해서 정의하는 대신, 프로토타입을 활용하여 메소드를 정의할 수도 있습니다.
Person.prototype.sayJob = function(job) {
console.log(`${this.name}은(는) ${job}으로 일하고 있습니다.`);
};
// 새로운 메소드 사용 예시
hong.sayJob('소프트웨어 개발자'); // 출력: 홍길동은(는) 소프트웨어 개발자로 일하고 있습니다.
lee.sayJob('군인'); // 출력: 이순신은(는) 군인으로 일하고 있습니다.위 예시처럼 Person.prototype에 메소드를 추가하면, 생성된 모든 객체가 해당 메소드를 참조할 수 있습니다.
이 방식은 메모리 사용을 최적화하는 데 유리하며, 생성자 함수 방식의 강력함을 잘 보여줍니다.
클래스 (class 키워드 사용)
ES6 이후 JavaScript에는 클래스 문법이 도입되어 생성자 함수보다 더 직관적인 객체 생성 방식을 제공합니다.
클래스는 생성자 함수와 본질적으로 같은 역할을 하지만, 가독성이 뛰어나고 직관적인 문법을 제공합니다.
class Person {
constructor(name, age) {
this.name = name; // 이름 초기화
this.age = age; // 나이 초기화
}
greet() {
console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`);
}
sayJob(job) {
console.log(`${this.name}은(는) ${job}으로 일하고 있습니다.`);
}
}
// 새로운 객체 생성
const hong = new Person('홍길동', 30);
const lee = new Person('이순신', 45);
// 객체 사용 예시
hong.greet(); // 출력: 안녕하세요, 제 이름은 홍길동이고, 나이는 30살입니다.
lee.sayJob('군인'); // 출력: 이순신은 군인으로 일하고 있습니다.클래스를 사용하면 생성자 함수보다 더 명확하게 객체와 그 초기화 과정을 표현할 수 있습니다.
클래스 내부에는 메소드 정의가 간단하며, 재사용성도 높아 코드가 깔끔해집니다.
결론!
JavaScript에서 객체를 생성하는 방법에는 객체 리터럴, 생성자 함수, 그리고 클래스를 이용하는 방식이 있습니다.
각 방법은 사용 목적과 상황에 따라 장단점이 있습니다.
- 객체 리터럴은 간단하고 빠르게 객체를 생성할 때 유용합니다.
- 생성자 함수는 유사한 객체를 효율적으로 생성할 때 사용됩니다.
- 클래스는 코드 가독성과 직관성을 높여 주기 때문에 더 복잡하고 다양한 초기화 로직이 필요한 경우에 적합합니다.
각 방식의 차이와 사용 예제를 통해 여러분이 필요에 따라 적절한 객체 생성 방식을 선택할 수 있기를 바랍니다.
마치 나만의 작은 공장을 만드는 것처럼, 간단한 구조가 필요할 땐 손쉽게 객체 리터럴을 사용하고,
좀 더 복잡한 로직이나 대량 생산이 필요할 땐 생성자 함수나 클래스를 사용하는 것이 좋습니다.
다양한 객체 생성 방식을 이해하고 활용해 보다 효율적인 코드 작성을 목표로 해 보세요!
