#9. Object ( 객체 )
JavaScript 의 심장 , Object ( 객체 )
JavaScript 는 Object-Oriented Programming ( OOP - 객체 지향 프로그래밍 ) 이라고 불립니다. Stephen Gilbert 와 Bill McCarty 저서, "Object-Oriented Design in Java" 에서는 OOP 의 기본 개념을 5가지로 정의하고 있습니다.
즉, OOP 가 어떤 개념인지 이해하기 위해서는 아래 5가지 질문에 답을 할 수 있어야 합니다.
What Are Objects? ( 객체란 무엇인가? )
What Are Classes? ( 클래스란 무엇인가? )
What is Encapsulation? ( 캡슐화란 무엇인가? )
What Is Inheritance? ( 상속이란 무엇인가? )
What Is Polymorphism? ( 다형성이란 무엇인가? )
즉, Object, Class, Encapsulation, Inheritance, Polymorphism 을 이해한다는 것은 JavaScript 를 이해한다는 것과 같은 의미며, Object 는 OOP 또는 JavaScript 를 학습하는데 중요한 핵은 맡고 있는 심장과도 같은 존재입니다. 그만큼 중요한 개념이기 때문에 이후에도 여러번 다룰 예정입니다.
이번 장에서는 첫 번째 What Are Objects? 에 대한 답을 찾아보는 시간을 갖겠습니다.
Class, Encapsulation, Inheritance, Polymorphism 는 다소 난이도가 있는 개념이기 때문에 기초 설명이 끝난 후에 살펴보도록 하겠습니다.
What Are Objects? - 객체란 무엇인가?
Array 가 비슷한 성격을 갖고 있는 종(?)들의 집합이었다면, Object 는 각각의 종들에 대한 개별적인 정보를 담고 있는 그릇이라고 볼 수 있습니다. #7. Array 편에서 우리는 "사과", "바나나", "오렌지" 의 공통된 성격을 갖고 있는 fruit Array 를 살펴보았습니다.
var fruit = ["사과", "바나나", "오렌지"];
Object 는 Array 와는 달리 "사과"처럼 특정 요소에 대한 구체적인 정보를 담는 그릇이라고 생각하면 됩니다.
var apple = {
"color" : "red",
"taste" : "great",
"count" : 1
};
Object 를 생성하는 방법은 위 코드처럼 {} ( 중괄호 ) 안에 생성된 Object 와 관련 있는 항목들을 나열하고, 각각의 항목들에 해당하는 정보를 담으면 됩니다. 위 코드에서 "color", "taste", "count" 와 같은 항목을 property, "red", "great", 1 같은 정보들을 value 라고 얘기합니다. 정리하자면 Object 는 {} 안에 property 와 value 로 구성되어 있는 데이터 타입을 의미합니다.
Object 의 property 또한 서적 또는 블로그마다 표현하는 방식이 다릅니다. 보통은 property 와 key 라는 용어를 많이 쓰는데 필자는 property 로 통일하여 사용하겠습니다.
여기서 주의할 점은 property 는 String 데이터 타입을 사용해야 합니다. 물론 Number 같은 데이터 타입을 사용해도 정상적으로 출력되지만, Object 의 항목을 구체적으로 표현하기 위해서는 String 이 가장 효과적이기 때문에 꼭 문자열을 이용해 주시기 바랍니다. 대신 value 는 어떤 데이터 타입을 넣더라도 상관없습니다.
참고로 property 를 작성 시 "" 는 생략하여 사용할 수 있습니다.
Array 와 Object 비교위 이미지를 보면 Object 는 Array 비슷한 점이 많습니다. 물론 겉모양만 비슷한 뿐 전혀 다른 성격을 갖고 있기 때문에 개념을 이해하는 데 있어서 별개로 구분해서 살펴봐야 합니다.
이제 Object 안에 property 에 접근해 보자.
Object.key() 를 사용하면 Object 에 어떤 property 들이 나열되어 있는지 확인할 수 있습니다.
var apple = {
"color" : "red",
"taste" : "great",
"count" : 10
};
Object.keys(apple);
만약 특정 property 의 존재 유무를 확인하고 싶다면 hasOwnProperty() 를 사용하면 됩니다. 이때 결과값으로 property 가 존재한다면 true, 없다면 false 를 반환합니다.
var apple = {
"color" : "red",
"taste" : "great",
"count" : 10
};
apple.hasOwnProperty("color");
apple.hasOwnProperty("origin");
위 코드 굳이 해석하자면..... "사과. 가지고 있냐? property("origin") 을" 정도로 표현할 수 있습니다. ^^;;;
개인적으로 Object 의 항목이 key 또는 property, 2가지 단어를 혼용하여 사용되는 이유가 key(), hasOwnProperty() 를 덕분(?)이 아닌가 생각됩니다.
Object 안에 value 에 접근하여 값을 변경해 보자.
Object 안에 있는 value 에 접근하여 값을 변경하기 위해서는 2가지 방법을 이용해야 합니다. 하나는 Array 처럼 [] 를 사용하여 접근하는 방법입니다.
var apple = {
"color" : "red",
"taste" : "great",
"count" : 10
};
apple["color"];
다른 방법은 dot notation ( 점 표기법 ) 을 사용하여 접근할 수 있습니다.
apple.taste;
위 접근법을 사용하면 Object property 의 value 를 바꿀 수 있습니다.
var apple = {
"color" : "red",
"taste" : "great",
"count" : 10
};
apple["color"] = "green";
apple;
Array 와 Object 를 결합하여 사용해보자.
var friends = [
{
"name" : "David",
"age" : 30,
"country" : "France"
},
{
"name" : "Lee",
"age" : 20,
"country" : "China"
},
{
"name" : "Chang",
"age" : 45,
"country" : "China"
}
];
만약 "Lee" value 에 접근하고 싶다면, 먼저 해당 값이 들어있는 index 에 접근합니다.
friends[1]; // { "name" : "Lee", "age" : 20, "country" : "China" } 출력
다음 출력하고자 하는 Object 의 property 를 선택하면 됩니다.
friends[1]["name"]; // "Lee" 출력
Object 가 Function 과 만났을 때
영화 "해리가 셀리는 만났을 때" 를 간략히 정리하면 남녀 사이에는 우정이 불가능하다고 생각했던 남자와 까다로운 취향을 갖고 있는 있는 여자가 오랜 기간 동안 친구로 지내다가 결국에는 연인으로 관계가 발전(?)하게 되는 이야기입니다. 즉, 친구에서 연인으로 대상과의 관계를 나타내는 단어가 달라지게 됩니다.
Object 와 Function 의 관계도 마찬가지입니다. "Object 가 Function 을 만났을 때" 를 정리하면 평소에 독립적으로 활동하던 2개의 데이터 타입이 결합하면 Function 에서 Method 로 사용되는 용어가 달라지게 됩니다.
var cal = {
add : function (a, b) {
return a + b;
}
};
cal.add(10, 20); // 30 출력
위 코드처럼 cal Object 안에 add Function 이 자리 잡게 되면 add() Function 은 add() Method 로 불리게 됩니다.
처음 JavaScript 를 공부했을 때 Method 와 Function 을 혼용하여 사용하는 경우가 있습니다. 물론 크게 봤을 때는 틀린 표현은 아니지만, 명확한 개념 정리를 위해서 깔끔하게 정리한다면... Object 안에 있는 Function 은 Method 라고 표현해야 합니다.
데이터 타입 Object 까지 연재를 마치면서 이제야 말할 수 있게 되었습니다. 앞서 Number 와 String 을 설명하면서 parseInt(), pareseFloat() 를 Function 을 표현한 글이 있는데, 다시 정정하자면 Function 이 아닌 Method 가 조금 더 정확한 표현입니다. 계속 저 찜찜함을 갖고 있었는데 이제야 홀가분해졌네요.
눈치가 빠른 독자분들은 Object 연재 글과 위 문장을 살펴보면 한 가지 모순점이 있다는 것을 발견할 수 있습니다. 여기에 대한 이야기는 #11 장에서 자세하게 살펴보겠습니다. 혹시 모순점을 발견한 분들은 댓글로 코멘트를 남겨주셔도 괜찮습니다. 그럼 다음 장에서는 Primitive type ( 원시 타입 )과 Reference type ( 참조 타입 ) 에 대해 살펴보겠습니다.
