(Javascript) 자바스크립트 심화 (6) 객체의 생성자

안녕하십니까 영감을 주는 개발자 방민방민입니다.

이전의 자바스크립트 기초문법을 통해 객체를 생성하는 방법에 대해서는 선행학습을 하였습니다.

이번시간에는 그러한 객체를 생성자를 통해 자유롭게 생성하는 방법에 대해 알아보고자 합니다.

먼저 아래의 코드를 살펴보겠습니다.

var o1= {
	name : 'Bangmin',
	introduce : function(){
		return 'My name is ' + this.name;
	}
}

var o2={
	name : 'Minseok',
	introduce : function(){
		return 'My name is ' + this.name;
	}
}


alert(o1.introduce());
alert(o2.introduce());

o1이라는 객체와 o2 라는 객체는 name 과 동일한 기능을하는 메서드인 introduce 를 가진 두개의 다른 객체입니다. 이렇게 틀이 같은 상태에서 두번의 코드를 모두 중복으로 사용하는것은 코드의 효율성을 저하시키는 원인이 됩니다. 그렇기 때문에 이러한 코드 중복을 없애기 위해서는 자바스크립트가 제공하는 생성자를 적극적으로 사용해야 할 필요가 있습니다.

1. 생성자

자바스크립트에서는 생성자로 함수를 사용합니다. 예제를 통해 빠르게 살펴보도록 하겠습니다.

function Person(name){
	this.name = name;
	this.introduce = function(){
		return 'My name is ' + this.name;
	}
}

var o1 = new Person('Bangmin');
document.write(o1.introduce());

var o2 = new Person('Minseok');
document.write(o2.introduce());

위에서 두번의 선언에 의해 생성되었던 o1 과 o2 객체를 간소화 하기 위하여 함수를 선언하고, this.name 에 인자로 name 을 받고, introduce 라는 함수로 this.name 을 출력하도록 하였습니다. 그리고 함수를 통하여 각각의 o1과 o2 객체를 생성하였습니다. 두번에 걸쳐 각각의 객체를 생성하던 첫번째 예제에 비해 코드가 간소화 되었습니다. 이러한 내용을 객체의 생성자라고 합니다. 

객체 생성은 new 를 통해 이루어집니다. 정의한 Person(name)을 단순히 호출하는 것이 아니라. new 를 앞에 붙여주어야만 새로운 객체가 생성되어 그 내용이 사라지지 않고 선언되는 객체의 내용으로 저장됩니다.

오늘은 정말 간단하게 객체를 생성하는 생성자에 대하여 알아보았습니다.

오늘의 예제를 통해 자바스크립트에서는 함수를 활용하여 객체를 생성한다는 점과, 또 그러한 함수를 단순히 호출하는 것이 아니라, new 라는 명령어를 사용하여야 한다는 점을 기억해야 하겠습니다.

지금까지 영감을 주는 개발자 방민방민 이었습니다. 감사합니다 :)