[JavaScript] 여러가지 객체 생성 방법, 그 중 뭘 쓸까?

서동경·2023년 1월 26일
0
post-thumbnail

🌱 객체 생성 방법

🧩 1. 객체 리터럴

가장 간결한 방식으로, 중괄호 안에 key: value 형태의 프로퍼티를 정의하여 대입한다.

let workout = {
  name: "Squat",
  sets: 3,
  reps: 10,
  getInfo: function () {
    console.log(
      `오늘의 운동은 ${this.name}이고 ${this.sets}세트, 각 ${this.reps}회가 목표입니다!`
    );
  },
};

//마침표(혹은 대괄호) 연산자를 통해 객체의 프로퍼티에 접근할 수 있다. 
workout.getInfo(); // 오늘의 운동은 Squat이고 3세트, 각 10회가 목표입니다!

🧩 2. Object - 내장 생성자 함수

Object라는 내장 생성자 함수가 존재하고, new 키워드와 함께 객체를 찍어낼 수 있다. 즉 new Object()를 통해 객체를 생성한다. 프로퍼티는 객체를 생성한 후 정의한다.

let workout = new Object();

//마침표(혹은 대괄호) 연산자를 통해 객체의 프로퍼티를 생성할 수도 있다.
workout.name = "Squat";
workout.sets = 3;
workout.reps = 10;
workout.getInfo = function () {
  console.log(
    `오늘의 운동은 ${this.name}이고 ${this.sets}세트, 각 ${this.reps}회가 목표입니다!`
  );
};

workout.getInfo(); // 오늘의 운동은 Squat이고 3세트, 각 10회가 목표입니다!  

🧩 3. Object.create()

만들 때부터 자세하게 만들고 싶은 경우에 사용한다.

첫 번째 파라미터에 프로토타입, 두 번째 파라미터에 객체 서술자를 입력한다.

let workout = Object.create(Object.prototype, {
  name: {
    value: "Squat",
    writable: true, //덮어쓸 수 있는지?
    enumerable: true, //열거할 수 있는지?
    configurable: true, //객체 서술자를 수정할 수 있는지?
  },
  sets: {
    value: 3,
  },
  reps: {
    value: 10,
  },
  getInfo: {
    value: function () {
      console.log(
        `오늘의 운동은 ${this.name}이고 ${this.sets}세트, 각 ${this.reps}회가 목표입니다!`
      );
    },
  },
});

workout.getInfo(); // 오늘의 운동은 Squat이고 3세트, 각 10회가 목표입니다!

🧩 4. 생성자 함수(Constuctor Function)

비슷한 유형의 객체를 찍어낼 수 있고 재사용 가능한 코드를 통해 비교적 규모가 큰 웹 페이지를 구현할 때 유용하다.

생성자 함수의 상속은 프로토타입(Prototype)을 통해 구현된다.

생성자 함수는 다음과 같은 규칙을 따른다.

1. 대문자로 시작하는 함수명을 가진다.
2. new 연산자를 통해 함수를 호출하여 객체를 찍어낸다.
3. 이를 통해 찍어낸 객체는 constuctor 속성을 갖는데, 이 속성을 통해 원본 객체인 생성자 함수를 참조할 수 있다.

function Workout(name, sets, reps) {
  this.name = name;
  this.sets = sets;
  this.reps = reps;
  this.getInfo = function () {
    console.log(
      `오늘의 운동은 ${this.name}이고 ${this.sets}세트, 각 ${this.reps}회가 목표입니다!`
    );
  };
}

let squat = new Workout("Squat", 3, 5);
let legPress = new Workout("Leg Press", 5, 10);

squat.getInfo(); // 오늘의 운동은 Squat이고 3세트, 각 5회가 목표입니다!
console.log(squat.constuctor) // Workout
legPress.getInfo(); // 오늘의 운동은 Leg Press이고 5세트, 각 10회가 목표입니다!
console.log(legPress.constuctor) // Workout

🧩 5. 클래스(Class)

생성자 함수와 마찬가지로 비슷한 유형의 객체를 찍어낼 수 있고 재사용 가능한 코드를 통해 비교적 규모가 큰 웹 페이지를 구현할 때 사용한다. 다만 생성자 함수에 비해 최신 문법(ES6)으로, 코드가 더욱 간결하고 직관적이다.

마찬가지로, 프로토타입을 통해 상속을 구현한다.

클래스도 사실 하나의 특별한 함수이며 함수처럼 선언식, 표현식으로 정의할 수 있다. 또한 함수와 마찬가지로 new연산자를 통한 호출도 가능하다.

클래스는 다음 규칙을 따른다.

1. 대문자로 시작하는 클래스명을 가진다.
2. 클래스는 constructor() 메서드를 통해 인스턴스 객체를 생성하고 초기화한다.

class Workout {
  constructor(name, sets, reps) {
    this.name = name;
    this.sets = sets;
    this.reps = reps;
  }
  getInfo() {
    console.log(
      `오늘의 운동은 ${this.name}이고 ${this.sets}세트, 각 ${this.reps}회가 목표입니다!`
    );
  }
}

const squat = new Workout("Squat", 3, 5);
const legPress = new Workout("Leg Press", 5, 10);

squat.getInfo(); // 오늘의 운동은 Squat이고 3세트, 각 5회가 목표입니다!
legPress.getInfo(); // 오늘의 운동은 Leg Press이고 5세트, 각 10회가 목표입니다!

👉 결론

객체를 만드는 방법은 여러가지가 있지만 결국 목적에 맞는 방법을 사용하면 된다. 만약 규모가 작은 프로젝트를 진행한다면 가장 간결하고 직관적이고 빠른 객체 리터럴 방식을 사용하면 된다. 프로젝트의 규모가 커져 재사용 가능한 코드를 작성하고자 한다면 생성자 함수와 클래스를 이용할 수 있겠지만 비교적 최신 문법인 클래스를 이용해 객체를 생성하는 것이 가독성 측면에서 유리할 것이다.

Object 생성자 함수와 Object.create()를 이용한 방식은 사용 빈도가 매우 적을 것으로 보이는데, 그나마 Object.create()는 프로퍼티의 세부적인 설정을 위해 사용할 수 있지만 Object 생성자 함수는 사용할 이유가 전혀 없는 것 같다.

profile
개발 공부💪🏼

0개의 댓글