ABOUT ME

-

Today
-
Total
-
  • [생활코딩] JavaScript 객체
    Study/JavaScript 2019. 12. 5. 10:18
    반응형

     

     

    객체 Object

     

    객체가 가지고 있는 여러 가지 특성 중 하나가 '정리 정돈의 수단'이다. 
    변수나 함수 같은 코드가 하나의 페이지에 아주 길어지다 보면, 그것을 정리하기 위해 '객체'를 쓴다.

     

    코드가 아주 길면 새로 만들 함수의 이름이 기존에 존재하는 함수이름 인지 파악하기 어려워진다. 

    그리고 만약 같은 이름의 함수를 만들면, 아래에 있는 함수가 위의 함수를 덮어 씌워 버려 심각한 문제를 초래한다.

    새로이 이름을 바꿔서 함수를 만드는 것도 방법이지만, 객체를 활용하면 이름이 겹칠때도 사용 할수 있다.
    이처럼 객체는 서로 연관된 함수와 변수를 담아 놓는 수납상자와 같은 폴더라는 관점에서 바라봐도 무방하다.

     

     

    순서 있이 저장하는 것이 배열이라면 순서 없이 정보를 저장하는 것이 객체이다.
    그리고 객체는 정보를 그냥 넣는 것이 아니라, 정보를 보관하는 폴더에 이름을 붙여서 정리한다.

     

     
    객체(object) : 이름이 있는 정리정돈 상자 

    - 객체 생성 : var 객체명 = {'key': value}


    예시)  

    var coworkers = {
    "programmer" : "egoing",
    "designer" : "leezche"
    };

    ▶ programmer가 폴더 이름이고 egoing이 정보이다.
    coworkers의 이름을 가진 객체를 만드는데, 2개의 속성을 넣었다.
    하나의 속성은, 속성명(key)이 programmer, 속성값(value)을 egoing,
    다른 하나의 속성은, 속성명(key)이 designer, 속성값(value)을 leezche로 만들었다.

     


    - 객체 불러오기 : 객체명.속성명 or 객체명["속성명"]

     

    예시)

    var coworkers = {
    "programmer" : "egoing",
    "designer" : "leezche"
    };
    
    
    coworkers.programmer // "egoing"


    ▶coworkers뒤에 있는 마침표는 'object access operator'라고 한다. (coworkers에 접근하겠다 라는 수단)

     

    예시) 

    var coworkers = {
    "programmer" : "egoing",
    "designer" : "leezche",
    "data scientist" : "subin"
    };
    
    
    coworkers["data scientist"] // "subin"
    coworkers[key]

     

    ▶key 문자열에 공백이 있거나 한다면 대괄호안에 따옴표와 함께 써주고 , 속성명 자리에 변수가 들어가야한다면 따옴표 없이 대괄호를 사용해야한다.

     

    - 객체 추가하기 : 객체명.속성명 = "속성값" or 객체명["속성명"] = "속성값" 

     

    coworkers.bookkeeper = "duru";
    
    coworkers["data scientist"] = "taeho"


    - for in 문 : 객체에 저장된 데이터를 모조리 가져올 때 반복문 사용

    for(var 변수 in 객체명)

    var coworkers = {
    "programmer" : "egoing",
    "designer" : "leezche",
    "data scientist" : "subin"
    };
    
    for(var key in coworkers){
    document.write(key+'+coworkers[key]+'<br>');

     

     

    - 객체지향 

     

    var grades = { 
        'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80}, 
        'show' : function(){ 
            for(var name in this.list){ 
                document.write(name+':'+this.list[name]+"
    "); 
            } 
        } 
    }; 
    grades.show(); 

     

    객체 안에 객체를 삽입할 수 있다. 
    객체 안에 값으로서의 함수를 삽입할 수 있다.
    this는 '소속되어 있는 객체를 가리키는 약속되어 있는 변수' 

     


    - 객체지향 프로그래밍 
    서로 연관되어 있는 데이터(값)과 서로 연관되어 있는 처리(함수)를 하나의 그릇인 객체에 모아서 그룹핑하는 방식 

    반응형

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

    [생활코딩] JavaScript 모듈 & 라이브러리  (0) 2019.12.06
    [생활코딩] UI 와 API  (0) 2019.12.06
    [생활코딩] JavaScript 배열  (0) 2019.12.04
    [생활코딩] JavaScript 함수  (0) 2019.12.04
    [생활코딩] JavaScript 반복문  (0) 2019.12.03

    댓글