티스토리 뷰

Front-End

Javascript 객체

on1ystar 2019. 7. 2. 15:51
728x90
반응형

배열은 연관되어 있는 데이터들을 담아내기 위한 일종의 그릇이다.

객체 역시 연관되어 있는 데이터들을 담아내기 위한 그릇으로 유사하지만, 배열의 경우 데이터들의 index가 자동으로 할당되는 반면 객체에서는 이 index를 사용자가 원하는 값으로 채울 수 있다. 

때문에 객체에서의 요소들은 Key와  Value로 불리게 된다.

이 객체는 유사하게 연관배열 또는 맵, 딕셔너리라는 타입이다. 지금 느끼기에는 파이썬의 딕셔너리 타입과 매우 유사한 것 같다.

 

 

html에서 for문을 이용해 객체를 제어하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var grades = {'egoing': 10, 'seong': 20, 'jin': 30}
        for(key in grades){
            document.write("key : "+key+"value: "+grades[key]+"<br />");
        }   // in을 중심으로 뒤쪽에는 객체 혹은 배열이(순환할 수 있는 타입), 앞쪽에는 변수가 위치한다.
            // for문은 grades 객체를 순환하면서 key라는 변수에 grades의 키들을 담는다.
            // 또한 이 변수의 담기는 key값은 문자열 형태로 저장된다.
        
    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>

    <script>
        var grades = {'egoing': 10, 'seong': 20, 'jin': 30}
        for(key in grades){
            document.write("<li>key : "+key+"value: "+grades[key]+"</li>");
        }   // 리스트 형태로 출력하기
        
    </script>

    </ul>
</body>
</html>

 

다양한 값을 객체에 담기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>

    <script>
        var grades = {
            'list': {'egoing': 10, 'seong': 20, 'jin': 30}, // 객체에 또다른 객체를 담기
            'show': function(){
                alert('Hello world');
            }   // 객체에 함수 담기
        }
        alert(grades['list'])
    </script>

    </ul>
</body>
</html>

 

        grades['show'](); // () 넣어줘야 함

 

this 변수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>

    <script>
        var grades = {
            'list': {'egoing': 10, 'seong': 20, 'jin': 30}, // 객체에 또다른 객체를 담기
            'show': function(){
                for(var name in this.list){
                    console.log(name, this.list[name]);
                }
                console.log(this.list);
            }   // this라는 키워드는 해당 함수가 속해있는 객체를 가리키는 변수
        }
        grades.show();
    </script>

    </ul>
</body>
</html>

 

 

728x90
반응형

'Front-End' 카테고리의 다른 글

Javascript 모듈  (0) 2019.07.02
Javascript 배열의 메소드  (0) 2019.06.27
Javascript 함수 선언  (0) 2019.06.27
Javascript === 연산자, null 과 undefined  (0) 2019.06.27
Javascript 변수  (0) 2019.06.27
댓글