[JavaScript] new 생성자 함수로 유사한 객체 찍어내기

What

function sum() {...}과 functin Sum() {...}의 차이점은 뭘까? 함수 이름이 소문자로 시작하는 게 우리가 일반적으로 알고 있는 함수라면, 대문자로 시작하는 것은 바로 new 연산자와 함께 사용하는 생성자 함수이다.

안 그래도 복잡한데 일반 함수 쓰면 되지 굳이 생성자 함수를 알아야 할 필요가 있을까 싶겠지만, 이 생성자 함수를 제대로 사용한다면 객체 생성에 있어서 조금 더 효율적으로 사용할 수 있게 된다. 이제 우리가 생성자 함수를 어떨 때 사용하는지에 대해서 알아보도록 하자.

 

How

유사한 객체를 무한대로 찍어내고 싶을 때

function Character(name, age){
    this.name = name;
    this.age = age;
}
let kim = new Character('Kim', 30);
console.log(kim); // {name: 'Kim', age: 30};

예를 들어서, 우리가 게임 캐릭터처럼 이름과 나이가 고정되어 있는 객체를 여러 개 찍어낸다고 가정해보자.

생성자 함수를 안 쓴다면 일일이 객체를 하나씩 생성해줘야 하는 번거로움이 생길 것이다. 하지만, 생성자 함수를 사용하면 객체의 전체적인 틀을 만들어 놓고, 거기에 new 연산자를 이용해서 인수로 하나씩 값을 넣기만 하면 되기 때문에 무한대로 객체를 생성할 수 있게 된다.

 

function Character(name, age){
    this = {}; // 숨어 있음
    this.name = name;
    this.age = age;
    return this; // 숨어 있음
}
let kim = new Character('Kim', 30);
console.log(kim); // {name: 'Kim', age: 30};

생성자 함수를 사용할 때, this를 사용하는 이유는 바로 생성자 함수 안에 this라는 빈 객체가 숨어있기 때문이다. 따라서, this.name, this.age처럼 this를 이용해서 객체의 key와 value을 주는 게 가능한 것이다.

또한, 생성자 함수는 일반 함수처럼 return을 쓰지 않는다. 그 이유도 역시 생성자 함수에는 return this가 숨어있기 때문에 자동으로 this를 반환하게 된다. 즉, 이러한 이유들로 유사 객체를 무한대로 찍어낼 수 있는 것이다.

 

생성자 함수에서의 메서드 사용

function Sum(name){
    this.name = name;
    this.say = function (){
        console.log(`My name is ${this.name}`);
    }
}
let kim = new Sum('Kim');
kim.say(); // My name is Kim;

생성자 함수의 this 객체의 value 값에 단순히 숫자나 문자열만 넣는 게 아니라, 위처럼 함수를 넣어서 메서드로 활용할 수도 있다. 메서드로 사용할 때는 먼저 변수에 new 연산자를 사용해서 생성자 함수로 만든 객체를 할당해 주고, 일반 메서드처럼 사용해주면 된다.

 

그런데, 위 코드의 형식을 보다 보면 어디서 많이 익숙한 코드 형식인 것을 확인할 수 있다. 바로 클로저이다.

클로저란 외부 함수와 내부 함수가 있을 때 내부 함수가 외부 함수의 변수를 참조하는 현상을 말하는 데, 생성자 함수의 메서드가 딱 클로저 형식이기 때문에 우리는 생성자 함수를 클로저로서 활용할 수도 있다.

 

function Sum(){
    this.num = 0;
    this.sum = function (val){
        this.num += val; // this.num은 생성자 함수 Sum()의 변수
        console.log(this.num);
    }
}
let cal = new Sum();
cal.sum(5); // 5
cal.sum(10); // 15
cal.sum(-2); // 13

생성자 함수의 메서드를 클로저로서 활용한다면 다음과 같이 사용할 수 있다. 생성자 함수 Sum()의 메서드 sum()은 인수를 모두 더해서 누적값을 반환하는 메서드이다. 여기서 누적값을 반환할 수 있는 이유는 sum() 메서드의 외부 스코프인 생성자 함수 Sum()의 변수 this.num을 메서드 sum()이 참조했기 때문이다. (this.sum()은 외부 스코프의 변수 this.num을 기억하고 있기 때문에, 내부 함수인 sum() 메서드에서 계속 사용할 수 있는 것이다.)

 

1. 생성자 함수의 함수 이름 첫 글자는 무조건 대문자로 작성
2. 생성자 함수를 사용할 땐, 반드시 new 연산자와 함께 사용
3. 생성자 함수는 유사한 객체를 여러 개 만들 때 사용하면 좋다.
4. 생성자 함수는 메서드도 만들 수 있고, 그 메서드는 클로저로서 활용 가능하다.