Javascript class 기초 개념

Javascript class 기초 개념

  자바스크립트 기초도 없는 상태에서 FastBoot 스킨을 제작하다보니 어느덧 Global 변수가 무지막지하게 쌓여가고, 정리도 안되는 모습이 있어서 다음 버전에는 싹다 밀어볼 생각으로 Javascript의 Class의 개념에 대해서 살짝 정리를 해보려고 합니다. 제 다른 글처럼 굉장히 핵심만 짚고 넘어가는 방식으로 진행할 것입니다.

Constructor

Javascript에서의 Constructor는 다음과 같은 모습을 하고 있습니다.

	
function Circle(origin, radius) {
	this.originX = origin[0];
	this.originY = origin[1];
	this.radius = radius;
}

Circle.prototype.area = function() {
	return Math.PI * Math.pow(this.radius, 2);
}

var myCircle = new Circle([5,15], 10);
 
	

  function 생성자() { } 로 생성자를 정의하는 것인데요, 그 다음 Instance의 생성은 var Instance = new 생성자(); 로 하고 있습니다. 이런식으로 만들고자 하는 것을 객체화 시키게 되면 대략 다음과 같은 장점이 예상됩니다.

  1. 여러 Instance를 만들때 활용이 쉽고 꼬이지 않음

  2. 전역변수의 사용을 차단할 수 있음

  특히 2번이 중요한데요, 여러가지 자바스크립트를 Import 하여 사용하다보면, 전역변수가 겹치게 될 경우에 오동작을 하게 됩니다. 예를들어, a.js에서도 tmp라는 전역변수를 사용하고, b.js에서도 tmp라는 전역변수를 사용하게 된다면 서로 값이 덮어씌워지게 되는 일이 발생하는 것이죠.

Prototype

  객체가 있으면 항상 가지고 있는 놈이라고 생각하시면 됩니다. 이것이 중요한 이유는 prototype을 이용하여 생성하는 함수의 경우에는 메모리의 중복 사용을 막을 수 있다는 점에 있습니다. 다시한번 Circle class를 보면, 아래와 같이 사용할 수도 있음을 아시게 될텐데요,

	
function Circle(origin, radius) {
	this.originX = origin[0];
	this.originY = origin[1];
	this.radius = radius;
	this.area = function() {
		return Math.PI * Math.pow(this.radius, 2);
	}
} 
	

  this.area에다가 함수를 바로 넣은 모양입니다. 하지만 이렇게 될 경우에는 말씀드렸듯 Instance마다 해당 함수를 불러오는 꼴이 되므로 비효율 적입니다.

  마찬가지로, 객체의 상수 또한 Prototype을 사용하듯 이용할 수 있습니다.

	
function Circle(origin, radius) {
	this.originX = origin[0];
	this.originY = origin[1];
	this.radius = radius;
}

Circle.prototype.area = function() {
	return Circle.PI * Math.pow(this.radius, 2);
}

Circle.PI = 3.14159;
 
	

  위처럼, Circle.PI 라는 상수값을 Circle이라는 객체에다가 집어넣어 두었습니다. Circle이라는 객체가 예시로 들기에 보면 볼수록 적합하다는 생각이 자꾸 드네요..

Private, Public

  자바스크립트에 해당 개념이 있을리가 없습니다. 객체 개념또한 희미하므로.. 다만 아래처럼 흉내내볼 수 있습니다.

	
function PrivateClass() {
	var privateProperty = 'Private Property';
	this.openProperty = 'Open Property';
	this.getPrivate = function() {
		return privateProperty;
	};
}

PrivateClass.prototype.testMethod = function(a) {
	return this.getPrivate() + a;
}

var obj = new PrivateClass(); 
	

  PrivateJS라는 객체입니다. 내부를 보시면 아시겠지만 Javascript에서의 변수는 해당 Scope에서만 유효하다는 점을 가지고 만드는 것입니다. public property는 this.변수명 으로 생성하고, private property는 var 변수명 으로 생성한다고 보면 됩니다. 다만 getPrivate을 사용할 때, 배열을 return하게 될 경우 주소값이 return되는 것과 같은 개념이 되므로 이 상태에서 변수를 수정하게되면 원본이 수정된다는 단점이 있습니다. 이를 방지하려면 아래처럼 값을 복사하여 return하여야 합니다.

	
	this.getPrivate = function() {
		var copiedProperty = [];
		for (var i=0; i<privateProperty.length; i++) {
			copiedProperty.push(privateProperty[i]);
		}
		return copiedProperty;
	}; 
	

toString, valueOf

  자바스크립트의 객체라면 무조건 가지고 있는 method로서, overriding하여 다음과 같이 사용할 수 있습니다.

	

function Circle(origin, radius) {
	this.originX = origin[0];
	this.originY = origin[1];
	this.radius = radius;
}

Circle.prototype.area = function() {
	return Circle.PI * Math.pow(this.radius, 2);
}

Circle.prototype.toString = function() {
	return "[Origin: (" + this.originX + ", " + this.originY + "), Radius: " + this.radius + ", Area: " + this.area() + ".]";
}

Circle.prototype.valueOf = function() {
	return this.area();
}

Circle.PI = 3.14159;

Circle.DEFAULT = new Circle([5,5], 10);

Circle.dist = function(a, b) {
	var sideALength = Math.abs(a.originX - b.originX);
	var sideBLength = Math.abs(a.originY - b.originY);
	return Math.sqrt(Math.pow(sideALength, 2) + Math.pow(sideBLength, 2));
}

Circle.max = function(a, b) {
	if (a.radius > b.radius) {
		return a;
	} else {
		return b;
	}
}

Circle.min = function(a, b) {
	if (a.radius > b.radius) {
		return b;
	} else {
		return a;
	}
}



var myCircle = new Circle([0,0], 5);
document.write("myCircle Information(toString) : " + myCircle); 
	

  toString 함수는 예시에서 본 것처럼 문자열로 변환이 이루어질 때 사용이 되며, valueOf는 대소비교, 혹은 수치로 변환이 되어야 할 때 사용이 되게 됩니다. 만약 이러한 method가 overriding되어있지 않다면 흔히 보는 [object Object]의 형태로 반환이 되게 됩니다.

  이상으로 Javascript의 Class 개념에 대해 매우 빠르게 짚어보았습니다. 도움이 되시길 바라면서 글 마칩니다.