[JavaScript] 클래스와 객체 생성

안녕하세요.

자바스크립트는 객체 지향 언어로, 다양한 방법으로 객체를 생성할 수 있습니다.

이번 글에서는 ES6 클래스, 객체 리터럴, 생성자 함수를 사용하여 객체를 생성하는 방법을 알아보겠습니다.

 

1. ES6 클래스(Class)

ES6에서 도입된 클래스는 객체 지향 프로그래밍을 보다 직관적으로 사용할 수 있게 해주는 문법입니다. 클래스는 생성자 함수와 프로토타입을 기반으로 동작하지만, 더 깔끔하고 명확한 문법을 제공합니다.

// 클래스 정의
class Car {
  constructor(brand, model) {
    this.brand = brand; // 브랜드 속성 초기화
    this.model = model; // 모델 속성 초기화
  }

  // 메서드 정의
  drive() {
    console.log(`Driving a ${this.brand} ${this.model}`);
  }
}

// 객체 생성
const myCar = new Car('Toyota', 'Corolla');

// 속성 접근
console.log(myCar.brand); // 'Toyota'

// 메서드 호출
myCar.drive(); // 'Driving a Toyota Corolla'

 

2. 객체 리터럴

객체 리터럴은 가장 간단하고 직관적인 객체 생성 방법입니다. 중괄호 {}를 사용하여 객체를 정의하고, 키-값 쌍을 추가합니다.

// 객체 리터럴을 사용한 객체 생성
const person = {
  name: 'Alice',
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

// 속성 접근
console.log(person.name); // 'Alice'

// 메서드 호출
person.greet(); // 'Hello, my name is Alice'

 

3. 생성자 함수

생성자 함수는 여러 객체를 생성할 때 유용합니다. new 키워드를 사용하여 객체를 생성하며, 생성자 함수 내의 this는 새로 생성된 객체를 가리킵니다.

// 생성자 함수를 사용한 객체 생성
function Person(name, age) {
  this.name = name; // 이름 속성 초기화
  this.age = age;   // 나이 속성 초기화
  this.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
}

// 객체 생성
const bob = new Person('Bob', 25);

// 속성 접근
console.log(bob.name); // 'Bob'

// 메서드 호출
bob.greet(); // 'Hello, my name is Bob'

 

비교

특징	클래스(Class)	객체 리터럴(Object Literal)	생성자 함수(Constructor Function)
문법의 직관성	직관적이며 가독성이 좋음	간단하고 빠르게 객체 생성 가능	문법이 덜 직관적일 수 있음
상속의 용이성	extends 키워드를 사용하여 쉽게 상속 가능	상속 구조 구현이 복잡함	프로토타입을 통해 상속 구현 가능
메모리 효율성	프로토타입 기반으로 메서드 공유	메모리 사용이 비효율적일 수 있음	프로토타입 메서드 공유로 효율적
유연성	구조가 고정적일 수 있음	속성과 메서드를 쉽게 추가/제거 가능	다양한 객체 생성에 유연하게 사용 가능

 

참고 자료
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Classes - JavaScript | MDN

https://javascript.info/constructor-new

Constructor, operator "new"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

Object initializer - JavaScript | MDN