[JavaScript] 객체 응용 - 생성자 함수(feat. 인스턴스)

✔ 들어가며

자바스크립트 객체의 this, 생성자 함수, 프로토타입을 살펴본다.

다행히도 ES6에서 자바스크립트의 Class 문법이 추가되었다. 하지만, 자바스크립트의 Class 문법은 Prototype 기반으로 구현된 자바스크립트의 문법적 편의 기능일 뿐 엔진 내부적으로는 prototype 방식으로 작동되기 때문에, Class를 활용하더라도 this, 생성자 함수, 프로토타입의 개념과 작동방식을 짚고 넘어가 보려 한다.

 

this 포스팅을 이어,  이번 포스팅은 인스턴스를 곁들인 생성자 함수를 알아본다.

 

2022.11.13 - [Dev/JavaScript] - [JavaScript] 자바스크립트의 객체 응용 - this

 

 

---

👀 생성자(constructor) 함수란?

생성자 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다. 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다.

 

 

✔  먼저 인스턴스를  간단히 이해하자

💡 국가대표 정우영

⚽🏃 정우영 선수와 정우영 선수

 

const 작은우영 = {
  firstName: '우영',
  lastName: '정',
  nation: 'Republic of Korea',
};

const 큰우영 = {
  firstName: '우영',
  lastName: '정',
  nation: 'Republic of Korea',
};

리터럴 형식으로 생성한 두 객체가 있다. 두 객체는 같은 프로퍼티(property) 성, 이름, 나라와 같은 프로퍼티 값을 가지고 있다.

 

리터럴 : 일반적으로 고정된 값을 가리키는 용어
객체 리터럴: 객체 리터럴 방식은 객체 생성 방식 중 가장 일반적이고 간단한 방법으로, 콘텐츠를 그대로 대입하는 방법을 말한다

 

 

console.log(작은우영.firstName === 큰우영.firstName); // true
console.log(작은우영.lastName === 큰우영.lastName); // true
console.log(작은우영.nation === 큰우영.nation); // true

console.log(작은우영 === 큰우영); // false

 

두 객체를 비교 연산자로 확인해보면, 동일한 프로퍼티와 벨류를 가지고 있지만...

객체 자체를 비교했을땐 false를 반환하는 걸 확인할 수 있다.

객체의 value는 값으로 분류하고 비교할 수 있으나, 객체 그 자체를 비교할 때는 메모리 주소를 보기때문이다.

 

     정우영(작은 우영) !== 정우영(큰 우영) 

 

 

이러한 고유한 객체가 하나하나의 인스턴스로 인정된다. 즉, 이미 메모리에 올라가서 특정 메모리에 공간을 차지하고 있는 객체를 인스턴스라 설명할 수 있다. 위의 예시처럼 리터럴 방식으로 생성한 객체도 인스턴스일 수 있고, 아래 다뤄볼 생성자 함수로 만들어도 인스턴스가 된다.

 

 

 

✔  생성자 함수 이해하기

객체 리터럴 방식과 Object 생성자 함수 방식으로 객체를 생성하는 것은 프로퍼티 값만 다른 여러 개의 객체를 생성할 때 불편하고 비효율적이다. 동일한 프로퍼티를 갖는 객체임에도 불구하고 매번 같은 프로퍼티를 작성해야하기 때문이다.

동일한 프로퍼티를 가진 수많은 객체를 만들고 싶다면.. 찍어 낼 수 있는 템플릿을 만들면 된다. 바로 생성자 함수다.

 

 

💡 리터럴 방식, Object 생성자 함수 방식

// 객체 리터럴 방식
const player1 = {
  firstName: '흥민',
  lastName: '손',
  age: 30,
  club: '토트넘 핫스퍼',
  nation: '대한민국',
};

const player2 = {
  firstName: '민재',
  lastName: '김',
  age: 26,
  club: 'SSC 나폴리',
  nation: '대한민국',
};

// Object 생성자 함수 방식
const player3 = new Object();

player3.firstName = '강인';
player3.lastName = '이';
player3.age = 21;
player3.club = 'RCD 마요르카';
player3.nation = '대한민국';

console.log(player3);
// { firstName: "강인", lastName: "이", ...}

 

💡 생성자 함수

function Player(firstName, lastName, age, club, nation) {
    this.firstName = firstName; // 여기서 this는 생성될 instance를 가리킨다
    this.lastName = lastName;
    this.age = age;
    this.club = club
    this.nation = nation;
}

// new 연산자와 더해야만 생성자를 생성할 수 있다
// const player# = new Player(firstName, lastName, age, club, nation)
const player7 = new Player('흥민', '손', 30, '토트넘 핫스퍼', '대한민국'); // 하나하나의 인자를 this가 가리킴
const player3 = new Player('민재', '김', 26, 'SSC 나폴리', '대한민국');

• 생성자 함수는 일반적으로 대문자로 시작한다. 암묵적으로 파스칼 케이스(PascalCase) 대문자로 시작하는 규칙이 있으며, 이는 생성자 함수임을 인식하도록 도와준다.
• 프로퍼티 또는 메서드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킨다.

 

💡 생성자 함수 - 참조

function Player(firstName, lastName, age, club, nation) {
  this.firstName = firstName; // 여기서 this는 생성될 instance를 가리킨다
  this.lastName = lastName;
  this.age = age;
  this.club = club;
  this.nation = nation;
  const isRetired = false; // 생성자 함수 내에서 선언된 일반 변수

  this.getName = function () {
    return this.nation + ' 국가대표 ' + this.lastName + this.firstName + ' 입니다';
  };
}

const player7 = new Player('흥민', '손', 30, '토트넘 핫스퍼', '대한민국'); // 하나하나의 인자를 this가 가리킴
const player3 = new Player('민재', '김', 26, 'SSC 나폴리', '대한민국');

console.log(player7.getName()); // 대한민국 국가대표 손흥민 입니다
console.log(player3.getName()); // 대한민국 국가대표 김민재 입니다

console.log(player7.club) // '토트넘 핫스퍼'
console.log(player7.isRetired) // undifined

• this에 연결(바인딩)되어 있는 프로퍼티와 메서드는 public(외부에서 참조 가능)하다.
• 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다. 즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

 

 

 

---

📖 요약

• 특정 메모리에 공간을 차지하고 있는 고유한 객체를 인스턴스라 한다
• 동일한 프로퍼티를 가진 수많은 객체 인스턴스를 만들고 싶다면, 그 틀이 바로 생성자 함수이다
• 생성자 함수는 일반 함수와 구별하기 편하도록, 암묵적으로 대문자로 시작한다
• 프로퍼티 또는 메서드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
• this에 바인딩되어 있는 프로퍼티와 메서드는 public(외부에서 참조 가능)하다
• 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다

 

 

참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new

https://poiemaweb.com/js-object