2. 생성자 함수와 일반 함수의 차이점

자바스크립트를 활용하면서

수 없이 사용하는 array와 object 유형의 데이터는

이미 자바스크립트에 내장된

new Object(), new Array()라는 생성자함수에 의해 인스턴스로서 생성된다.

 

객체와 배열을 통해 생성자와 인스턴스를 자주 사용하고 있지만,

그 뜻에 대해서는 모호하게 알고 있었고,

일반함수와 다른 점은 무엇인지 궁금하여서 공부하게 되었다.

1. 개념

생성자 함수?

생성자 함수는 생성자를 만드는 함수를 의미 한다.

function MakeSong(genre, singer) {
  this.genre = genre;
  this.singer = singer;
  
  this.introduce = function () {
    console.log(
      "이 노래는 " +
        this.genre +
        " 장르이고, " +
        this.singer +
        "(이)가 불렀습니다."
    );
  };
}

const mySong = new MakeSong("pop", "juju");
mySong.introduce();

생성자 함수는 일반 함수와 다르게

함수 이름을 대문자로 시작 한다.

 

소문자로 해도 생성자 함수를 만들 수는 있지만,

개발자들간 원활한 의사소통을 위해서 정해놓은 약속이므로 지키는 것이 좋다.

 

인스턴스?

인스턴스는 일반 함수가 아닌 생성자 함수를 사용하는 이유이다.

생성자 함수와 동일한 프로퍼티와 메서드를 가진 객체를 의미 한다.

 

생성자 함수를 통해 만들어진 생성자를 이용하여

생성자 객체의 프로퍼티와 메서드를 똑같이 가진 유사한 객체를

대량 생성하고 싶을 때 사용 할 수 있다.

 

생성자?

맨 앞에 new 연산자가 붙은 함수를 의미한다.

예) new MakeChoco()

 

인스턴스를 만들 수 있으며,

new 연산자가 붙으면 함수의 this는 인스턴스를 참조하게 된다.

=> new 연산자가 자동으로 인스턴스를 반환하기 때문에 함수안에 return 연산자도 필요 없어지게 된다!

 

* new 연산자가 없는 함수의 this는 메서드를 호출한 객체를 참조하게 된다.

 

 

생성자 함수와 생성자, 인스턴스를 보기 쉽게 나열하면 아래와 같다.

function MakeSong(){}
const mySong = new MakeSong()

생성자함수 : function MakeSong(){}
생성자 : new MakeSong()
인스턴스 : const mySong

 

* instanceof / constructor 메소드를 통해서도 생성자와 인스턴스의 관계를 쉽게 확인 할 수 있다.

 

2. 생성자 함수와 일반 함수의 차이점

생성자 함수의 일반 함수와의 차이점을 요약한다면 아래와 같다.

 

1. 생성자 함수이름은 대문자로 시작한다.

2. 생성자 함수는 new 연산자를 붙여 호출 한다.

 2.1. new 연산자가 자동으로 인스턴스를 리턴하기 때문에

        생성자 함수안에 return 연산자는 보통 불필요하여 존재하지 않는다.

3. 인스턴스를 생성하는데 특화된 함수다.

 

3. 결론

생성자 함수와 일반 함수는 기술적으로 특별히 다른 점은 없기에

유사한 객체들을 대량 생산해야 하는 일이 생긴다면, 생성자 함수를 활용하면 좋을 것 같다.

 

참고 문헌

https://ko.javascript.info/constructor-new

new 연산자와 생성자 함수