[JavaScript] constructor(생성자) 이해하기

안녕하세요 이번시간에는 생성자라는 개념에 대해서 알아보겠습니다 :)

생성자란?

정해진 키밸류를 가진 객체를 편리하게 생성할 수 있게 도와주는 기계같은 역할입니다. 비슷한 객체들을 여러개 생성하기 위해서 생성할때마다 키밸류 값을 일일이 입력해서 만드는 것이아니라 하나의 생성자를 만들어놓으면 그 생성자를 이용하여 간편하게 해당 객체(인스턴스)를 생성할 수 있게 해줍니다.

코드 살펴보기

      function Student(name, age, height) {
        this.name = name;
        this.age = age;
        this.height = height;
        this.sayHi = function () {
          console.log(
            `안녕하세요 저의 이름은 ${name}이고 나이는 ${age} 이며, 키는 ${height}입니다.`
          );
        };
      }

우선 위 코드가 생성자를 만드는 방식입니다. 만드는 방식은 함수랑 비슷하지만, 다른점이 이름 첫 시작을 대문자로 시작해야합니다(필수는 아니지만, 프로그래밍 세계에서 생성자는 대문자로 시작하는게 관습입니다) 그리고 this. 으로 접급하여 키값을 할당해줍니다.

해당 생성자로 3명의 학생을 만들어보겠습니다.

      let student1 = new Student("홍길동", "22", "181");
      let student2 = new Student("박새로이", "28", "183");
      let student3 = new Student("한지평", "32", "184");

이런식으로 new 생성자명(파라미터값) 을 이용하여 객체(인스턴스)를 만들어주시면 됩니다.
그러면 각기 다른 파라미터로 넘겨서 같은 구조의 객체 3개를 빠르게 만들어낼 수 있습니다.
이러한 행위를 상속이라고 불리기도 합니다. 부모(생성자)가 자식(인스턴스)한테 자신의 속성값들을 물려주는것입니다.

---

이렇게 편리하게 여러개의 비슷한 객체를 생성할 수 있게 도와주는 유용한 도구가 바로 생성자입니다.

인스턴스명.sayHi() 를 찍게되면
'안녕하세요 저의 이름은 홍길동이고 나이는 22 이며, 키는 181입니다.'
이런식으로 각자 넘긴 파라미터 값을 기반으로 결과값이 나오게 될 것입니다.

감사합니다.

참고자료

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