[JavaScript] : 생성자 함수

지난객체 게시글에서 객체를 생성하는 방법에는 몇 가지가 있고 그 중 생성자 함수에 대해서 간단하게 언급 했던 적이 있다.

이번 시간에는 조금 더 자세하게 생성자 함수에 대해서 알아볼 생각이다.

✍️ 생성자 함수란?

정말 대표적인 생성자 함수에는 Object 생성자 함수가 있는데 다음과 같이 쓰일 수 있다.

const profile = new Object();

profile.name = "HYUNSANG";
profile.age = 31;
profile.intro = function () {
  console.log(`My Name is ${this.name} and I am ${this.age} years old`)
}

위에서 profile 객체를 Object 생상자 함수로 만들고 name, age, intro와 같은 프로퍼티 혹은 메서드를 추가한 것이다.

예제로 살펴보았듯이,

생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 뜻하며 이때 만들어진 객체를 인스턴스라고 한다.

=> 그 밖에도 우리가 자주 사용하는 RegExp(), Array도 생성자 함수이다.
=> 특별한 목적이 있지 않는 이상 객체를 생성할 때는 객체 리터럴 방식이 더 용이하다.

📝 생성자 함수 만드는 방법

1. 기본적으로 일반 함수와 동일한 방식으로 정의 하지만 식별자의 첫 글자를 대문자로 설정
2. 전달된 인수를 인스턴스의 프로퍼티 초기 값으로 설정하기 위해 this로 바인딩
3. 메서드(객체 내 함수)를 정의할 필요가 있으면, 메서드 정의
   => 메서드 : 객체 내 함수를 메서드라고 하였지만 실상 모든 객체 내 함수를 메서드라고 하지 않는다. 오직 메서드 축약 표현으로 된 함수만이 메서드로 인정 받는다.
4. 인스턴스 생성
   인스턴스 생성시 new 연산자와 함께 생성자 함수 호출 (new연산자가 없이 호출 할 시, 일반 함수로 취급된다)

✍️ 생성자 함수의 필요성

위에서 잠깐 언급했듯이, 사실 일반적인 객체를 생성하는 것이라면, 객체 리터럴방식이 더욱 간편하다.. 그럼 생성자 함수는 도대체 언제 쓰일까?
상황에 따라 여러가지로 나뉘겠지만 가장 대표적인 예는 다음과 같다.

const student1 = {
  name : "Park",
  grade : "Freshman",
  intro() {
    return `My Name is ${this.name} and I am ${this.grade}`
  }
}

const student2 = {
  name : "Oh",
  grade : "Freshman",
  intro() {
    return `My Name is ${this.name} and I am ${this.grade}`
  }
}

위 상황을 보면 2개의 student# 객체는 프로퍼티 값이 약간 다를 뿐, 구조와 메서드 자체는 동일하다. 객체 리터럴의 경우, 상위 student가 많아지면 갯수 만큼 객체를 끝까지 생성해야 해서 코드량이 많아져 유지 보수가 어려워진다. 하지만 생성자 함수라면 다음과 같이 한 번에 깔끔하게 정리가 가능하다.

function Student(name, grade) {
  this.name = name;
  this.grade = grade;
  this.intro = function () {
    return `My Name is ${this.name} and I am ${this.grade}`
  }
}

const student1 = new Student("Park","Freshman")
const student2 = new Student("Oh","Freshman")