[Javascript] 생성자 함수(Constructor Function) 사용하기

Javascript에서 사용하는 Object는 지난 포스팅에서 다뤄봤습니다. 내부에 변수를 저장하고 함수를 만들어서 사용할 수 있는 형태의 Object를 만들 수 있습니다. 그리고 또 이 Object를 함수 형태로 만들 수 있습니다.

 

 

이번 포스팅에서는 Constructor Function 이라 하는 생성자 함수에 대해서 알아보도록 하겠습니다.

---

생성자 함수(Constructor Function) 만들기

자바스크립트(Javascript)는 재사용 가능한 코드들을 한데 묶어서 사용할 수 있도록 Object를 만들 수 있습니다. 그중에서도 생성자 함수를 이용해서 아래와 같이 만들어 볼 수 있습니다.

function Student() {
	this.name = 'Ironman',
	this.age = 43
}

const student = new Student();

여기 Student() 라는 함수가 있습니다. 이전 포스팅에서 보았던 일반적인 함수입니다. 하지만 이 함수는 생성자 함수로 사용하기 위해서 만든 함수입니다. 그래서 변수에 담을 때 new라는 키워드를 사용했습니다.

* 생성자 함수로 만들때는 반드시 new 키워드를 사용합니다. 사용하지 않을 경우에는 일반적인 함수와 동일하게 반응하여 Object를 반환하지 않습니다.

이렇게 만들어진 student Object는 앞서 만들어 보았던 Object의 형태와 동일한 형태를 가지게 됩니다.

---

생성자 함수(Constructor Function) 사용 방법

생성하는 방법을 해보았으니 이제는 접근하고 값을 변경하는 방법에 대해서 알아보겠습니다.

---

생성자 함수 접근 방법 dot notation

생성자 함수는 Object로 반환하기 때문에 접근 방법도 동일하게 점 표현식(dot notation)으로 접근할 수 있습니다.

function Student() {
	this.name = 'Ironman',
	this.age = 43
}

const student = new Student();

// access constructor function
console.log(student.name); // Ironman
console.log(student.age); // 43

student에 반환된 Object는 {name: 'Ironman', age:43}과 같은 형태입니다. 따라서 dot notation으로 쉽게 접근할 수 있습니다.

---

여러 개의 동일한 Object 만들기

생성자 함수를 사용하는 이유는 동일한 Object를 여러 개 만들 수 있습니다. 앞서 Object를 직접 만드는 방법과 다른 점입니다.

function Student() {
	this.name = 'Ironman',
	this.age = 43
}

const student1 = new Student();
const student2 = new Student();

console.log(student1);
console.log(student2);

위와 같이 사용하면 무수히 많은 동일한 Object들을 만들어 낼 수 있습니다.

 

이렇게 만들어진 Object들은 모두 동일한 값들을 가지게 됩니다. 따라서 값을 변경하기 위해서는 각 Object에 접근해서 하나씩 값을 변경해 주어야 합니다. 그럼 최초 만들 때 값을 초기화할 수 없을까요?

---

Object 생성 시 값 초기화. 생성자 함수 parameter

생성자 함수를 조금 변경해 보도록 하겠습니다.

function Student(name, age) {
	this.name = name,
	this.age = age,
    
	this.hello = function(){
		console.log(`I am ${this.name} and ${this.age}.`);
	}
}

const student1 = new Student('Ironman', 43);
const student2 = new Student('Hulk', 48);

console.log(student1.hello());
console.log(student2.hello());

함수를 만들 때 parameter를 받고 받은 값은 내부 변수에 그대로 저장했습니다. 그런 다음 생성자 함수를 이용해서 Object를 생성할 때 값을 넘겨주어 Object를 만들어주었습니다. 이렇게 만들어진 값을 확인하기 위해서 hello()라는 함수를 출력하도록 변경했습니다.

---

Object의 Prototype 만들기

이제 Object를 만드는 방법을 모두 알아보았습니다. 기본적인 Object형태를 이용해서 만드는 방법과 생성자 함수를 이용해서 만드는 방법입니다. 여기서 추가적으로 어떠한 동일한 기능을 추가하고 싶다면 이 생성자 혹은 Object에 Prototype이라는 것을 만들 수 있습니다.

function Student(name, age) {
	this.name = name,
	this.age = age
}

const student1 = new Student('Ironman', 43);
const student2 = new Student('Hulk', 48);

Student.prototype.hello = function(){
	console.log(`I am ${this.name} and ${this.age}.`);
}

console.log(student1.hello());
console.log(student2.hello());

Prototype은 이 Object가 참고하고 있는 원형을 뜻한다고 생각하시면 됩니다. 그래서 prototype을 추가할 때에는 함수의 이름을 이용하고 이 이름의 Prototype을 추가하거나 수정합니다.

 

Prototype을 추가한 함수를 이용해서 만들어지는 모든 Object는 추가된 모든 함수를 사용할 수 있습니다.

* ES6부터는 class라는 개념이 도입되었습니다. 이는 현재 Javascript의 생성자 함수(Constructor Function)와 동일한 개념입니다.

---

이번 포스팅에서는 생성자 함수(Constructor Function)에 대해서 알아보았습니다. Javascript에서는 함수 형태를 주로 사용하기 때문에 이 부분을 정확히 알고 사용하신다면 Javascript를 이해하는 데에 더 좋을 것 같습니다. 도움이 되셨으면 합니다. 이상입니다.