← 목록

JavaScript에서의 객체 생성과 활용 🖥

작성: 2024년 06월 17일읽기: 약 4분

JavaScript는 웹 개발에서 빼놓을 수 없는 언어입니다. 특히 객체 지향 프로그래밍을 할 때, 객체 생성과 활용은 필수적인 기술입니다. 이번 포스트에서는 JavaScript에서 객체를 어떻게 생성하고 활용할 수 있는지, 그리고 디자인 패턴이 어떻게 도움이 될 수 있는지 알아보겠습니다.

객체 생성하기

JavaScript에서 객체를 생성하는 가장 기본적인 방법은 리터럴 표기법을 사용하는 것입니다.

const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.greet(); // 출력: Hello, my name is John

하지만, 여러 개의 비슷한 객체를 생성해야 할 때는 이 방법이 비효율적일 수 있습니다. 이럴 때 생성자 함수나 클래스를 사용할 수 있습니다.

생성자 함수 사용하기

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log('Hello, my name is ' + this.name);
  };
}

const john = new Person('John', 30);
john.greet(); // 출력: Hello, my name is John

클래스 사용하기

ES6부터는 JavaScript에서도 클래스를 사용할 수 있게 되었습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log('Hello, my name is ' + this.name);
  }
}

const jane = new Person('Jane', 28);
jane.greet(); // 출력: Hello, my name is Jane

디자인 패턴 활용하기

디자인 패턴은 소프트웨어 설계에서 자주 발생하는 문제들을 해결하기 위한 재사용 가능한 해결책입니다. JavaScript에서 객체 생성과 관련하여 자주 사용되는 디자인 패턴은 '팩토리 패턴'과 '싱글톤 패턴'입니다.

팩토리 패턴

팩토리 패턴은 객체를 생성하는 인터페이스를 정의하지만, 인스턴스를 만들 클래스의 결정은 서브클래스가 내리는 패턴입니다. 이를 통해 객체 생성을 위한 코드를 한 곳에서 관리할 수 있습니다.

function Developer(name) {
  this.name = name;
  this.type = "Developer";
}

function Tester(name) {
  this.name = name;
  this.type = "Tester";
}

function EmployeeFactory() {
  this.create = (name, type) => {
    switch(type) {
      case 1:
        return new Developer(name);
      case 2:
        return new Tester(name);
    }
  }
}

const employeeFactory = new EmployeeFactory();
const employees = [];

employees.push(employeeFactory.create("John", 1));
employees.push(employeeFactory.create("Jane", 2));

employees.forEach(emp => {
  console.log(`${emp.name} is a ${emp.type}`);
});

싱글톤 패턴

싱글톤 패턴은 클래스의 인스턴스가 오직 하나만 생성되도록 제한하는 패턴입니다. 이는 전역 변수를 사용하여 여러 부분에서 같은 인스턴스에 접근해야 할 때 유용합니다.

let instance = null;

class Database {
  constructor(data) {
    if (!instance) {
      this.data = data;
      instance = this;
    }
    return instance;
  }

  getData() {
    return this.data;
  }
}

const mongoDB = new Database('mongoDB');
console.log(mongoDB.getData()); // 출력: mongoDB

const sqlDB = new Database('sqlDB');
console.log(sqlDB.getData()); // 출력: mongoDB, 새 인스턴스는 생성되지 않음

JavaScript에서 객체를 생성하고 활용하는 방법은 다양합니다. 프로젝트의 요구사항에 맞게 적절한 방법과 디자인 패턴을 선택하는 것이 중요합니다. 이번 포스트를 통해 JavaScript의 객체 생성과 디자인 패턴에 대해 조금 더 이해할 수 있기를 바랍니다.