Javascript ES6 - 객체지향1 - Constructor

1️⃣   Constructor의 개념

const student1 = {name: 'kim', age: 20}
const student2 = {name: 'park', age: 22}

 

object를 여러 개 만들고 싶을 때 이렇게 일일이 하드코딩 해주게 되면 굉장히 비효율적인 코딩이 됩니다. 이런 과정을 쉽게 만들어 줄 때 Constructor를 이용합니다. 다시 말해 Constructor는 object를 여러개 만들고 싶을 때 사용하는 문법입니다.

 

function Student() {
  this.name = 'kim';
  this.age = 20;
}

 

Constructor는 함수의 형식을 빌려서 만듭니다. 이 때  Constructor의 이름은 일반 함수와 다르다는 것을 표시하기 위해 관습적으로 대문자로 시작합니다. 그러면 생성자 안에 등장하는 this의 의미는 무엇일까요? 이 때 this는 생성자로부터 만들어진 object를 의미합니다. 전문용어로 instance(인스턴스)라고 합니다. 그래서 이 코드를 다시 해석하자면 Student라는 생성자로부터 object를 만들건데 그 object의 name은 'kim', age는 20으로 할 것이다 라는 뜻이 됩니다.

 

 

 

2️⃣   Instance 만드는 방법

 

그럼 이렇게 만들어진 생성자로부터 인스턴스를 뽑는 방법은 무엇일까요?

 

const student1 = new Student();

 

이렇게 생성자 앞에 new 라는 키워드를 붙여주고 새로운 변수에 할당시켜주면 인스턴스가 생성이 완료가 됩니다.

 

 

 

3️⃣  Instance에 내용 추가할 일 생겼을 때 -> Constructor를 수정하면 된다!

 

그런데 인스턴스를 만들었는데 갑자기 인스턴스에 새로운 내용을 추가해야될 일이 생겼습니다. 가령 함수를 추가해야된다고 할 때 어떻게 해야될까요? 인스턴스마다 함수를 추가하는 것은 너무 비효율적이니 이번에도 생성자를 건드려 보겠습니다.

 

function Student() {
  this.name = 'kim';
  this.age = 20;
  this.sayHi = function () {
    console.log(`안녕하세요 저는 ${this.name}입니다.`)
  }
}

 

생성자 안에 sayHi 라는 함수를 추가했습니다. 이렇게 생성자를 만들어 놓으면 앞으로 만들어질 모든 인스턴스에 sayHi라는 함수가 포함됩니다.

 

 

 

4️⃣   Parameter를 활용하여 값이 비어있는 Constructor 만들기

 

const student1 = new Student();
const student2 = new Student();

 

그런데 인스턴스 두 개를 이렇게 만들어 놓고 보니 student1과 student2가 차이가 아예 없습니다. 둘 다 인스턴스 안에 오는 내용이 동일합니다. 이러면 무슨 의미가 있나 싶습니다. 이런 것을 방지하고 좀 더 인스턴스를 효율적으로 만들기 위해서는 parameter를 이용해주면 됩니다.

 

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function(){
    console.log(`안녕하세요 저는 ${this.name} 입니다.`);
  }
}


const student1 = new Student('kim', 20);
const student2 = new Student('park', 22);

 

이렇게 생성자를 만들 때  parameter를 미리 만들어 두고 인스턴스를 만들 때 파라미터에 원하는 값을 넣으면 그 값이 들어간 인스턴스가 만들어집니다.