#26 자바스크립트(JavaScript) - 생성자(Constructor)

안녕하세요 여러분 에이블디 입니다!

 

이번 시간에는 생성자를 사용해 객체를 만드는 방법에 대해 알아보겠습니다!

 

리터럴을 사용해 객체를 만들면 객체를 쉽게 만들 수 있습니다.

그런데 리터럴을 사용해 만든 객체는 정해진 값을 가진 객체를 한 번만 만들게 되는데요, 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다.

하지만 리터럴 객체를 사용하게 되면 매번 객체와 똑같은 속성과 함수를 입력하고 객체마다 그 값을 다르게 넣어 새롭게 객체를 만들어야 합니다.

이럴 때 항상 필요한 속성과 함수는 틀처럼 미리 만들어 두고, 필요할 때마다 그 틀을 복제한 인스턴스를 만들어 객체의 정보 값을 담아 객체를 만들 수 있습니다.

바로 생성자를 사용해 함수를 만들어 객체를 만들면 되는데요, 생성자를 사용한 함수를 생성자 함수라고 합니다.

 

생성자 함수란 객체를 만들어 내는 함수를 말하는데요, 이 또한 함수이므로 function 예약어를 사용해 선언합니다.

생성자 함수 안에 객체의 속성과 함수를 정의할 때는 this 예약어 다음에 마침표와 속성 이름을 입력합니다.

여기서 this가 가리키는 것은 선언하고 있는 객체 자체인데요, 객체의 속성은 객체에서 사용하는 변수, 객체의 함수는 해당 객체에서 사용하는 함수라고 생각하면 이해하기 쉽습니다.

 

그리고 생성자 함수는 항상 new 연산자를 붙여 실행하고, 관례적으로 함수 이름의 첫 글자는 대문자로 시작합니다.

 

자바스크립트 24번 포스팅 프로토타입과 인스턴스에서 작성했던 예제가 생성자 함수를 이용하여 객체를 생성한 예제인데요, 다시 한번 복습한다 생각하고 예제를 보도록 할게요!

 

24번 포스팅 예제에서는 Car라는 객체를 사용해 세대의 각기 다른 자동차를 만들었지요?

 

이번에는 Human이라는 객체를 만들어 각각 다른 사람 세명을 만들어 보겠습니다.

 

먼저 사람에 공통된 속성과 함수를 가지고 있는 Human이라는 객체를 만들어 보겠습니다.

function Human(name, age, sex) {
    this.name = name,
    this.age = age,
    this.sex = sex,
    this.introduce = function() {
        console.log("제 이름은 " + this.name + "이고 나이는 " + this.age + "이며 성별은 " + this.sex + "입니다.");
    }
};

인간이 공통적으로 가질 수 있는 이름, 나이, 성별이란 속성과 자기소개를 하는 함수를 가진 Human 객체를 만들어 보았습니다.

 

위 코드를 new Human()을 써서 함수를 실행하면 아래와 같이 작동되는데요,

function Human(name, age, sex) {
    // this = {}; - 빈 객체를 만들어 this에 할당.

    // 함수 본문을 실행. this에 새로운 프로퍼티를 추가해 this를 수정.
    this.name = name,
    this.age = age,
    this.sex = sex,
    this.introduce = function() {
        console.log("제 이름은 " + this.name + "이고 나이는 " + this.age + "이며 성별은 " + this.sex + "입니다.");
    }

    // return this; - this가 임시적으로 반환.
};

Human 함수를 이용하여 jayden이라는 사람을 만들어 보겠습니다.

var jayden = new Human("제이든", 18, "남성");

위와 같이 나이는 18세이고 남성인 제이든이라는 사람을 만들었는데요, 위의 코드는 아래의 리터럴을 형식으로 작성한 코드와 동일하게 동작하게 됩니다.

var jayden = {
    name : "제이든",
    age : 18,
    sex : "남성"
};

이런 식으로 jayden 이외에도 new Human()을 사용하여 다른 사람 객체를 손쉽게 만들 수 있게 됩니다.

리터럴 형식으로 일일이 객체를 만드는 것보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있는 거죠!

 

이렇듯 생성자는 재사용할 수 있는 객체 생성 코드를 구현하는 것에 그 의의를 두고 있습니다.

 

그리고 모든 함수는 생성자 함수가 될 수 있는데요, new를 붙여 함수를 실행한다면 어떤 함수라도 생성자 함수로 동작하게 됩니다.

 

그럼 빠르게 두 명의 사람을 더 만들어 볼까요?

var charlie = new Human("찰리", 17, "남성");
var miro = new Human("미로", 17, "여성");

찰리와 미로라는 사람 두 명을 더 만들었습니다!

 

그럼 각자의 객체 정보가 담겨있는지 확인해 볼까요?

 

 

객체마다 서로 다른 정보가 담겨 있는 것을 볼 수 있습니다!

 

이번 시간에는 생성자 함수에 대해 알아보았습니다!

 

다음 시간에 자바스크립트에 대해 더 많이 알아보도록 해요!