객체(object) 활용하기 (feat.JSON)

 

객체를 활용하면 우리가 스크립트로 무언가를 구현할 때 굉장히 편리하다는 것을 알 수 있습니다. 이 객체는 사실 우리가 Json이라고 말하는 같다고 생각하시면 됩니다. 중괄호로 값을 포함하고 Key : Velue 형태로 값을 호출하는 방법인데 어디선가 Key : Velue 형태로 값을 호출하는 방법이라는 단어가 이상하게 친숙하지 않나요? (저만 그런 거면 죄송합니다.) 이전에 소개해 드렸던 html5의 data- 속성에 관한 글에서도 Key : Velue에 대한 이야기가 잠깐 나왔습니다.

궁금하신 분들은 위에 링크에 있는 글을 참고해 주세요.

 

그럼 이제 객체에 대해서 한번 알아볼께요. 모두 설레는 마음으로 같이 알아봐요.

 

1. 객체는 키와 그에 매칭하는 속성 값으로 선언합니다.

앞에서 말했듯이 객체는 Key : Velue의 형태로 데이터를 이루게 됩니다. 그리고 그 값들은 중괄호로 감싸줍니다.

{key:'velue', key:'velue', key:'velue'}

 

생각보다 쉽죠? (갑자기 밥로스 아저씨가 생각나는 이유는 뭘까요?)

그럼 이제는 진짜 데이터를 넣어서 한번 적용해 볼게요. 한번 여러분도 직접 해보시면 더욱 이해가 빠르실 거 같아요.

var product = {    
    name : '7D 건조 망고',    
    type : '당절임',    
    details : '망고, 설탕, 메타중아황산나트륨, 치자황색소'
};

alert(product.name); // 객체.키 [결과 : 7D 건조 망고]
alert(product['type']); // 객체['키'] : 키에 공백문자나 특수문자가 들어있을 때 이와같이 사용, [결과 : 당절임]

 

2. 객체는 모든 자료형의 속성을 가질 수 있습니다.

우리는 방금 객체의 저장되어 있는 값에 접근해서 그 값을 다시 호출하는 방법을 배웠습니다. 벌써 객체를 사용할 수 있는 기본적인 것은 전부 배우신 것과 같아요. 그래도 우리 조금 더 우아하게 객체를 핸들링하기 위해서 조금 더 심도 있게 알아볼게요. 

 

객체는 매력적이게도 모든 자료형의 데이터를 한 번에 저장할 수 있습니다. 우리가 필요한 값을 형태에 구애받지 않고 넣었다가 그 값을 언제든 호출할 수 있어요. 정말 멋지지 않나요?

var object = {    
    number: 273,                //숫자    
    string: 'happy',            //문자    
    boolean: true,              //논리형    
    array: [52,273,103,32],     //배열    
    method: function(){         //함수  
        alert("l like pizza");    
    }
};

document.write(object.number);  // 결과 : 273
document.write(object.string);  // 결과 : happy
document.write(object.boolean); // 결과 : true
document.write(object.array);   // 결과 : 52,273,103,32
document.write(object.method);  // 결과 : l like pizza

 

3. 객체는 여러 데이터를 한번에 호출할 수도 있으며  this속성을 사용합니다.

객체는 객체에 저장된 내부 함수에 다른 값을 같이 출력할 수도 있습니다. 

var person = {    
    name: '홍길동',    
    eat: function(food) {        
        alert(this.name+'이 '+food+'을/를 먹습니다.');    
    }
};

person.eat('자장면');  // 결과 : 홍길동이 자장면을 먹습니다.

 

기본적인 객체 사용방법에 대해서 알아보았습니다. 

이번 기회에 제가 정리한 글로 조금이나마 도움이 되고 객체에 대해서 조금은 더 잘 알게 되었으면 좋겠습니다. 

 

감사합니다.