[Javascript] constructor 생성자 함수

1. constructor의 필요성

 예를 들어, 아래와 같이 'dongle' 이라는 이름을 가진 객체를 만들었고, 이 객체는 어떤 평가 점수들이 담겨 있고 그 합을 구하는 객체라고 하자.

dongle이라는 객체 생성

 이와 똑같은 형식으로 'dongri' 라는 이름을 가진 객체를 만들었다.

dongri 라는 객체 생성

 이 두 객체에 third 라는 세 번째 score를 넣고 싶으면 아래와 같이 두 객체에 다 적용해주면 될 것이다.

 

 객체의 기본적인 동작방법이 바뀌면, 같은 취지의 객체는 다 바꾸어주어야 하기 때문에 이번엔 두번만 하면 된다. 하지만 만약에 객체가 수억 개가 있다면? 아마도 인간이 하기에는 너무나도 벅찬 일 일 것이다. 때문에 'constructor' 가 필요한 것이다.

third를 추가한 코드

 2. contructor : 객체를 찍어내는 공장

 위의 코드를 바탕으로 Person 이라는 함수를 만들어 보았다.

Person 함수 만들기

 이 함수를 출력하게 되면, 

 인자를 넣어주지 않았기 때문에, undefined 라고 출력된다.

 여기서, 그 함수에 new라는 키워드를 달아서 출력했을 경우에는 어떻게 될까?

 객체를 생성하는 생성자 함수가 된다. new를 통해 contructor를 만들게 된 것이다.

생성자 함수 출력

 이제 만들어진 생성자 함수를 사용해보는 일만 남았다. dongle이라는 객체, dongri라는 객체에 Person이라는 생성자 함수를 넣어주고 콘솔에서 출력을 해보았다. 

생성자 함수 사용해보기

 결과는 동일한 값이 나온다. 왜냐하면, Person을 불러와서, 그 안에 있는 수치 값들을 그대로 출력했기 때문이다. 

 따라서, Person이라는 함수에 입력 값을 주입해주면 되는데, 그러기 위해서 Person 함수의 코드를 조금 수정해준다.

인자를 주기 위해 수정한 코드

 그리고 생성자 함수에 인자에 맞게 값을 주입해준다.

입력 값을 주입한 코드

 그 결과는 아래와 같이 정상적으로 원하는 값을 얻을 수 있게 된다.

 원래는 객체를 만들 때마다 번거롭게 객체를 다시 정의해 주어야 했지만 'new'를 사용함으로써,  이렇게 생성자 함수를 만들게 되면서, 실행할 때 마다 객체를 초기 상태로 세팅하고 양산할 수 있게 된다.

 

 또한 생성자 함수의 데이터를 변경했을 때, 이 생성자 함수에 의해서 만들어지는 모든 객체들이 한 번에 바뀌게 되는 폭발적인 효과를 얻을 수 있는 것이다.

 

 이를 통해서, 코드를 깔끔하게 정리할 수 있을 뿐만 아니라, 효율성 또한 증대시킬 수 있다.