JavaScript의 생성자 (Constructors)

객체를 하나씩 생성하는 것은 느립니다. 동일한 속성을 가진 학생 10명이 필요하다면, 같은 코드를 반복해서 작성하느라 시간을 낭비하게 됩니다.

JavaScript는 생성자 함수(Constructor Functions)를 통해 이 문제를 해결합니다.

생성자를 설계도라고 생각해보세요. 집의 설계도가 곧 집은 아니지만, 이를 사용해 많은 집을 지을 수 있습니다.

작동 방식:

생성자는 특별한 함수입니다. new 키워드를 사용하여 이 함수로부터 객체를 생성합니다.

예시:

function Student(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
}

const student1 = new Student("John", 21, "Chennai");
const student2 = new Student("David", 22, "Madurai");

왜 사용하나요?

  • 시간을 절약합니다.
  • 코드 중복을 방지합니다.
  • 데이터에 대한 표준 구조를 만듭니다.

this의 역할:

생성자 내부에서 this라는 키워드는 여러분이 만들고 있는 새로운 객체를 가리킵니다.

선생님이 "나의 교실"이라고 말할 때, "나의"라는 단어는 그 특정 선생님을 가리킵니다. 코드에서 this.name은 방금 생성한 특정 객체의 이름을 가리킵니다.

new를 사용하면 어떤 일이 일어나나요?

const emp = new Employee("John", 50000)를 실행하면 네 가지 단계가 일어납니다:

  1. JavaScript가 빈 객체를 생성합니다.
  2. this 키워드가 그 새로운 객체를 가리킵니다.
  3. 객체에 속성(properties)이 추가됩니다.
  4. 객체가 반환됩니다.

동작 추가하기:

객체는 단순히 데이터를 보유하는 것 이상의 일을 할 수 있습니다. 동작을 수행할 수도 있죠. 프로그래밍에서는 이러한 동작을 메서드(methods)라고 부릅니다.

예시:

function Laptop(brand, ram) {
    this.brand = brand;
    this.ram = ram;
    this.showDetails = function() {
        console.log(this.brand, this.ram);
    };
}

이제 Laptop 객체는 데이터와 그 데이터를 보여주는 함수를 모두 가집니다.

권장 사항 (Best Practices):

  • 항상 생성자의 첫 글자를 대문자로 작성하세요. student가 아닌 Student를 사용하세요. 이는 다른 개발자들에게 new 키워드를 사용해야 함을 알려줍니다.
  • 항상 new 키워드를 사용하세요. 이를 잊어버리면 함수가 일반 함수처럼 동작하여 코드가 망가질 수 있습니다.

비교:

객체 리터럴 (Object Literals):

  • 단일 객체에 적합합니다.
  • 단순하고 빠릅니다.
  • 설계도가 없습니다.

생성자 함수 (Constructor Functions):

  • 여러 객체를 만들 때 적합합니다.
  • 재사용 가능하고 체계적입니다.
  • 설계도 방식을 사용합니다.

Source: https://www.w3schools.com/js/js_object_constructors.asp Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor Full post: https://dev.to/annapoo/constructor-in-javascript-4nbm