객체지향 프로그래밍(OOP)은 근대 소프트웨어의 근간이라고 할 수 있습니다. OOP(Object-Oriented Programming) 는 우주의 모든 유·무형의 사물을 객체화 시켜서 객체 끼리의 정보를 주고 받으며 개념을 구체화 시키는 것이라고 할 수 있습니다. 이 말이 더 어렵네요. ^^;;
객체라는 개념을 이해하는 순간이 프로그래밍 언어(language)의 반은 안다고 해도 과언이 아닐 것입니다. 나머지 반은 알고리즘과 같은 고유 스킬과 경험과 같은 지속 스킬 정도라고 해도 무방해 보입니다. 물론 제 의견입니다 ^^.
자, 이번에는 JavaScript 의 객체(Object)에 대해서 알아 보겠습니다.
Object : 객체
JavaScript 의 모든 것은 모두 객체입니다. 객체를 만드는 가장 쉬운 방법은 객체 리터럴(object literal)을 이용하는 것입니다. 리터럴이란 a = 7; 에서 7을 지칭하는 것입니다. 쉽게 말씀드리면 등호(=) 오른쪽에 있는 놈들을 리터럴이라고 이해하시는 게 빠를 것 같습니다. 아래 예제에서 {} 가 리터럴 입니다. 객체 리터럴이죠.
var x = {};
var y = {
name: "Pete",
age: 15
};
객체 리터럴이 대입된 x, y 는 이제 object 변수가 됩니다. object 의 타입은 "object" 입니다.
console.log(typeof {}); // "object"
Dot Notation : 점(.) 표기법(연산자)
객체의 속성을 읽기 위해서는 점 연산자를 사용하여 접근할 수 있습니다. 아래 예제는 위의 x, y 객체의 속성 값을 빼오거나 입력하는 예시입니다.
console.log(y.name); // "Pete" console.log(y.age); // 15 console.log(x.name = y.name + " Pan"); // "Pete Pan" console.log(x.age = y.age + 1); // 16
Array Notation : 배열 표기법
배열 객체일 경우 아래와 같이 동적으로 속성을 읽을 수 있습니다.
var operations = {
increase: "++",
decrease: "--"
}
var operation = "increase";
console.log(operations[operation]); // "++";
console.log(operations["multiply"] = "*"); // "*"
Iteration : 반복문
객체는 for Loop 문을 통해 쉽게 각 요소에 접근할 수 있습니다.
var obj = {
name: "Pete",
age: 15
};
for(key in obj) {
console.log("key is "+[key]+", value is "+obj[key]);
}
//result 1 : key is name, value is Pete
//result 2 : key is age, value is 15그런데 Object의 prototype 인 for Loop 문은 종종 다른 라이브러리들과 사용할 때는 쓰지 못하는 경우도 있습니다. jQuery 에서는 같은 역할을 하는 함수로 each 함수를 제공하고 있습니다.
jQuery.each(obj, function(key, value) {
console.log("key", key, "value", value);
});
//result 1 : key name value Pete
//result 2 : key age value 15더 자세한 내용은 Functions 챕터에서 다루도록 하겠습니다.
Prototype
모든 객체들은 prototype 속성을 가지고 있습니다. 프로그램이 해석될 때 속성과 그에 대한 prototype 을 찾습니다. "jQuery 에서도 메소드 추가를 사용할 수 있습니다" 라고 되어 있네요. 영어 딸립니다. prototype 을 해석할 만한 마땅한 한글이 없네요. 이건 단어라기 보다는 개념적인 것이기 때문에 전체 흐름을 말씀드려야 합니다. 그러기에도 너무 많은 내용이 있습니다. javascript prototype 에 대해서 검색해 보시면 많은 자료가 있습니다. 여기서 나온 prototype 은 Prototype 라이브러리가 아니므로 주의하시기 바랍니다.
prototype 이란 어떤 객체에 기본 속성들 이라고 보시면 됩니다. 스타크래프트의 SCV를 예로 들겠습니다.
var scv = function(){
this.size = 10;
this.damage = 1;
this.speed = 4;
};
scv.prototype.doCollect = function(){
return 8;
}
scv.prototype.doAttack = function(){
return this.damage;
}
var a = new scv();
console.log(a.size); //10
console.log(a.doCollect()); //8
6, 9 라인에 보시면 prototype 키워드가 보이실 겁니다. a 를 scv 의 객체로 만들었기 때문에 scv 에서 정의한 모든 속성들을 점 연산자를 통해 이용할 수 있게 되죠. 뭐~ 그냥 이렇게 사용한다는 정도만 보시면 될 것 같습니다.
그러면 jQuery에서는 어떻게 지원하고 있을까요?
<body>
<form id="myform">
<input value="aaaa" />
</form>
<script>
var form = $("#myform");
console.log(form.clearForm); // undefined
form.fn.clearForm = function() {
return this.find(":input").each(function() {
this.value = "";
}).end();
};
form.clearForm() // works for all instances of jQuery objects, because the new method was added to the prototype
</script>
</body>위 예제는 body 안에 넣어야 합니다. form 태그가 있어야 하니까요. 그런데 저는 이게 실행 오류가 나더군요. 위 예제에서 form.fn.clearForm 을 jQuery.fn.clearForm 으로 수정하면 정상 실행됩니다. 왜 그런지는 잘 모르겠네요. jQuery.com 의 설명은 form.fn 이 form.prototype 의 암묵적인 대체어 라고 되어 있네요. 혹시 이 글을 보시고 위 오류에 대해 말씀해 주실 수 있으시면 도움 부탁드립니다.
객체에 대한 수박 겉핥기 정도의 내용이지만 객체의 모든 내용이라고 봐도 무방합니다. JavaScript 는 Object 자체이다라고 생각하시면 편하시겠네요.
아직 Array 와 Functions 두 챕터가 남았네요. 그냥 간단하게 하고 재미있는 예제들이 많은 API 나 Effect 쪽을 할 걸 그랬나 봅니다. 좀 지루해 지기 시작했습니다. 하하하;
그럼 남은 두 챕터도 힘내서 으쌰으쌰~ 즐프하세요.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery 쉽게하기 - API 깨부시기, 선택자(Selectors) : All Selector ("*") (14) | 2011.01.19 |
|---|---|
| jQuery 쉽게하기 - API 깨부시기, jQuery Core (12) | 2011.01.19 |
| jQuery 쉽게하기 - 기본부터 시작하자, 함수(Function) 편 (4) | 2011.01.18 |
| jQuery 쉽게하기 - 기본부터 시작하자, 배열(Array) 편 (4) | 2011.01.18 |
| jQuery 쉽게하기 - 기본부터 시작하자, Number 편 (14) | 2011.01.17 |
| jQuery 쉽게하기 - 기본부터 시작하자, string 편 (13) | 2011.01.14 |
| jQuery 쉽게하기 - 파이어폭스의 파어어버그 사용하여 디버깅하기 (6) | 2011.01.14 |
| jQuery 쉽게하기 - 다른 라이브러리와 같이 쓰기 (12) | 2011.01.13 |
