JavaScript : 객체 (Dictionary)

객체 (Dictionary)

배열은 원소에 대한 식별자로 숫자를 사용. dictionary는 인덱스로 문자 사용 가능

배열은 원소를 담을 때 대괄호 사용하지만 객체는 중괄호 사용 

var grades = {'ㅁㅁ' : 90, 'ㄹㄹ' : '50' , 'ㅍㅍ' : 70 }; // ' 문자 ' 가 index

<script>
 
//객체를 만드는 방법 
 
//방법 1) 중괄호에 인덱스명과 값 입력
var grades = {ㅁㅁ : 90, 'ㄹㄹ' : '50' , 'ㅍㅍ' : 70 };
 
document.write(grades['ㅁㅁ'] + '<br />');
 
// 인덱스명을 정해줄땐 ''안붙여줘도 되지만 
//문자열 인덱스를 사용할땐 ''를 붙여줘야 인덱스를 읽을 수 있다.
 
//인덱스는 key, 값은 value
 
//방법2) 변수를 생성하고 변수[대괄호에 인덱스명] = 값
var grades = {}; // = new Object();와 같다
 
grades['aa'] = 40;
grades['bb'] = 80;
 
 
//방법3) new를 사용하여 Object 객체 생성후 변수에 대입
var grades = new Object(); // = {}와 같음
 
grades['aa'] = 40;
grades['bb'] = 80;
grades['c' + 'd'] = 100; //[]안에서 문자열 결합된 채로 인식
 
//해당 인덱스(key)를 dot으로 구분하여 호출하기도 가능하다 
//grades.cd
 
document.write(grades.cd + '<br />');
 
</script>

객체의 문법

<script>
 
//객체를 다루는 문법
 
//배열에는 인덱스 순서가 있지만 객체에는 순서가 없고  key와 value만 있다.
//= key를 알아야만 값을 가져올수 있다
 
var grades = {ㅁㅁ : 90, 'ㄹㄹ' : '50' , 'ㅍㅍ' : 70 };
 
for (key in grades){
    
    document.write( "key : " + key + "&nbsp vlaue : " +grades[key] + "<br />" );
    console.log (key + " : " + grades[key] );
    // 콘솔 로그 함수는 브라우저 콘솔창에서만 보이는듯 ..?
}
 
//출력
//key : ㅁㅁ  vlaue : 90
//key : ㄹㄹ  vlaue : 50
//key : ㅍㅍ  vlaue : 70
 
for (var name in grades){ //key 대신 다른 변수 지정해주어도 된다. key는 기본으로 지정된 변수
    
    document.write( "key : " + name + "&nbsp vlaue : " +grades[name] + "<br />" );
}
 
</script>

<ul><!-- HTML 문법 -->
 
    <li> egoing </li> 
    <li> graphiite </li>
    <li> leezche </li>
 
</ul>

출력 :

• egoing
• graphiite
• leezche 

<ul>
<script>
 
for (var name in grades){ //key 대신 다른 변수 지정해주어도 된다. key는 기본으로 지정된 변수
    
    document.write( "<li>key : " + name + "&nbsp vlaue : " +grades[name] + "</li>" );
}
 
</script>
</ul>

출력 :

• key : ㅁㅁ  vlaue : 90
• key : ㄹㄹ  vlaue : 50
• key : ㅍㅍ  vlaue : 70

객체지향 프로그래밍

<script>
 
var grades = {
        
        'list' : { 'aaa' : 10, 'bbb' : 8, 'ccc' : 4 },
        'show' : function(){
            alert('Hello World!');//익명함수
        }
        
}//list와 show는 key (콜론 좌측은 key 우측은 value)
 
 
alert(grades['list']); // 객체는 'object Object'로만 뜬다.
 
alert(grades['list']['aaa']); // 10
 
grades['show'](); //Hello World! ★★★★★
      
 

//엘리먼트 사이에 콤마 빼먹지 말 것!

 function(){

            alert('Hello World!');//익명함수

        }

이 자체가 Object. 뒤에 ( )를 붙여주면 호출(실행)된다.

grades['show'] 가 Object 이므로 뒤에 ( )를 붙여주어 함수를 실행

this는 grades 객체를 가리킨다. java에서 class 내의 this가 현재 인스턴스를 가리키는것과 동일

<script>
 
var grades = {
        
        'list' : { 'aaa' : 10, 'bbb' : 8, 'ccc' : 4 },
         'show': function(){        
             document.write(this.list['aaa']);
         }
        
}//list와 show는 key (콜론 좌측은 key 우측은 value)
 
 
alert(grades['list']); // 객체는 'object Object'로만 뜬다.
 
alert(grades['list']['aaa']); // 10
 
grades['show']();
 
</script>

grades['show']();
grades.show();

똑같은 실행 코드