5.javascript객체

이번에는 객체에 대해서 알아보도록 하겠습니다.

 

객체(Object) 변수와 함수가 모여 만든 하나의 꾸러미라고 볼 수 있습니다. 빈 객체를 생성하여 변수와 함수를 그 안에 추가하여 만들 수 있는데

이때 선언된 변수를 '프로퍼티'라고 부르고, 함수는 '메서드'라고 합니다. 객체 자체는 프로퍼티와 메서드를 갖는 역할만 합니다.

그럼 코드로 확인해보도록 하겠습니다.

 

객체를 생성해보도록 하겠습니다.

객체는 New Object() 또는 {} 등 두 가지의 방법으로 생성할 수 있습니다.

var obj = new Object();
var obj = {};

 

객체를 생성했으면 프로퍼티를 추가하고 읽어보도록 하겠습니다.

먼저 baby라는 객체를 생성합니다. 그리고 2~4번 라인에서 age, sex, birthday라는 프로퍼티를 추가하고 값을 할당합니다.

6번 라인에서는 baby객체의 age값인 '2살'을 읽어 출력하고 7번 라인에서는 "남자"라는 값을 읽어 출력합니다.

var baby = {};
baby.age = "2살";
baby.sex = "남자";
baby.birthday = "9월22일";
 
document.write(baby.age);
document.write(baby.sex);

이번에는 객체 생성시 동시에 프로퍼티를 추가하는 방법에 대해서 알아보겠습니다.

baby객체를 생성하면서 {}안에 프로퍼티를 넣어주면되는데요 콤마(,)로 나누고, 세미콜론(;)을 사용해서 값을 넣어줍니다.

var baby = {
                age:"2살",
                sex:"남자",
                birthday:"9월22일"
            };
 
document.write(baby.age);
document.write(baby.sex);

객체에 메서드를 추가하는 방법도 프로퍼티를 생성하는 방법과 유사합니다.

baby객체에 getAge() 라는 메서드를 추가합니다. 값으로 함수(function)선언과 동시에 할당합니다.

10번 라인에서 baby객체에 getAge()메서드를 호출하여 5번라인에 등록한 메서드가 호출되어 함수가 동작하게 됩니다.

여기서 주의깊게 살펴볼 사항은 this입니다. 여기서 this는 baby객체가 됩니다. 메서드를 호출하면 this를 통해서 메서드를 가지고 있는 객체가 넘어 옵니다. 

그렇기 때문에 this에서 age프로퍼티의 값을 읽어서 반환(return)해준 것입니다. 그럼 반환된 값은 10번라인에 age변수에 할당되고 11번 라인에서 변수 age를 documnet에 출력해주면 "2살"이라는 값이 출력됩니다.

이러한 개발 패턴은 jQuery나 자바스크립트 개발에서 자주 사용되는 형태이기 때문에 반드시 숙지해야 합니다.

메서드는 미리 선언한 함수를 참조할 수도 있습니다.

var baby = {
                age:"2살",
                sex:"남자",
                birthday:"9월22일"
                getAge:function(){
                    return this.age;
                }
            };
 
var age = baby.getAge();
document.write(age);

이번에는 미리 선언되어 있는 함수를 메서드로 넣는 방법에 대해서 살펴보겠습니다.

8번 라인에 getAge()함수를 미리 선언하고, 5번 라인에서 객체에 함수명을 차조하여 메소드로 추가시켰습니다. 

12~13번 라인의 수행결과는 위와 동일합니다.

var baby = {
                age:"2살",
                sex:"남자",
                birthday:"9월22일"
                getAge:getAge
            };
 
function getAge(){
    return this.age;
}
 
var age = baby.getAge();
document.write(age);

참고서적 : JavaScript+jQuery입문+실전북