Programming/JavaScript

객체

잇나우 2019. 12. 14. 00:20
반응형

객체는 배열이랑 유사한 역할을 수행하고 있다. 연관되는 데이터들을 담아내는 그릇정도로 이해하면 된다.

(여러 데이터와 함수로 이루어져 있다. 객체 안에 있을때는 프로퍼티와 메소드라고 부른다.)

객체의 접근 연산자는 ' . ' 이다.

배열과 객체의 가장 큰 차이점은 객체는 index 값을 숫자나 문자열등 사용자가 원하는 데이터로 지정해줄 수 있다.

객체는 {}안에 데이터를 담는다.

배열의 index(자동으로 0부터 할당하여 추가) = 객체의 key

배열의 element = 객체의 vlaue

 

객체의 생성

// 1번째 방법
var grades = {};  // 비어있는 객체를 생성
grades.key = 'value';   // grades['key'] = 'vlaue'; 라고 쓸수도 있다.
console.log(grades.key); // console.log(grades['key']); 라고 쓸수도 있다.
> value
/*
비어있는 객체에 접근하여 key라는 이름의 vlaue라는 값을 가진 property 추가한다.
*/

// 2번째 두번째
var grades = {apple : 10, banana : 20}; 
console.log(grades['apple']);
> 10

// 3번째 방법
var grades = new Object(); // '{}'와 같은 의미
grades.apple = 10;
console.log(grades.apple);
> 10

객체의 값을 호출할때

// 1번째 방법
console.log(grades.apple);
> 10

// 2번째 방법
console.log(grades['apple']); // console.log(grades['app'+'le']); 로도 가능하다.
> 10 

 

다음은 객체에 저장된 데이터를 기준으로 반복작업을 하는 방법이다.

var grades = {apple : 10, banana : 20, blue : 'berry'};
for(key in grades) {   
/* 
grades는 객체이고 key는 객체의 key값이 들어가는 변수 
grades라는 객체에 담겨있는 key값들을 반복문이 실행될 때마다 
하나씩 하나씩 가져와서 'key'라는 변수에 담는다. (key값만 가져온다.)
*/
	document.write("key : "+key+" value : "+grades[key]+"<br />");
}

>
key : apple    value : 10
key : banana   value : 20
key : blue     value : berry

객체의 value값(프로퍼티)에는 객체를 넣을수도 함수를 넣어줄 수도있다.

var grades = {
    'list': {apple : 10, banana : 20, blue : "berry"},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();       // show가 가지고있는 함수를 호출하는

 

객체의 일부 value값 삭제하기 (Property 삭제하기)

delete grades.key;
console.log(grades.key);
> undefined

property와 method

실제 객체를 완성하는 구성요소들은 property와 method이다.

(객체는 컴퓨터 케이스라고 한다면 property와 method는 그 안에 여러가지 부품들을 말하며 이 모두가 완성되어야 진정한 컴퓨터라고 부를수 있는것이다.) 

프로퍼티 Property

객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태.

(객체가 가진 정보에 직접적으로 접근할수 있게 해준다.) 

메소드 Method

객체가 가지고 있는, 움직이는 동작.

메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행하여 한다.

(그 동작을 수행하는 주체가 객체가 되고, 객체에게 동작을 수행하라고 지시해야한다. <- 함수와의 차이점) 

메소드는 동작을 수행하기 위해서 객체의 정보를 담고있는 프로퍼티를 사용할 수 있다.

반응형

'Programming > JavaScript' 카테고리의 다른 글

클로저(closure)  (0) 2019.12.15
유효범위(Scope)  (0) 2019.12.14
배열  (0) 2019.12.11
함수  (0) 2019.12.11
반복문  (0) 2019.12.11