객체

유동헌·2021년 3월 10일

JavaScript

정의

지금까지 살펴본 배열은 아이템에 대한 식별자로 숫자를 사용했다.

데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동으로 만들어져서 추가된 데이터에 대한 식별자가 된다.

이 인덱스를 이용해서 데이터를 가져오게 되는 것이다. 만약 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 한다.

다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.

인덱스로 원하는 데이터를 직접 지정할 수 있는 것이 가장 큰 장점

객체지향과 연결되는 중요한 패러다임이 존재

KakaoTalk_20210309_161426567

기본 문법

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; // 객체 만들기
grades // 변수 확인
{egoing: 10, k8805: 6, sorialgi: 80} //결과값 잘 나오는 것 확인 할 수 있음
grades['egoing']; // grades 변수 안에, egoing이라는 key 값 확인
10 // key의 값을 확인 : value
grades.egoing // 위의 문법 말고 이렇게도 사용 할 수 있음
10 // key의 값을 확인 : value

반복문을 이용해서 객체를 다루는 법

key 값 가져오기

var grades = {'gomgom' : 10, 'gomdol' : 40, 'gomgim' : 5};

    for (key in grades) {
        console.log(key);
    }
gomgom // 결과 출력
gomdol // 결과 출력 
gomgim // 결과 출력

key 값에 해당하는 부분을 가져온다.

value 값 가져오기

for (key in grades) {
    console.log(grades[key])
}

점수에 해당하는 부분을 가져온다.
객체에 저장되어 있는 값을 가져온다.

객체 + 반복문 정리

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="lecture__summary.js"></script> -->
    <title>Document</title>
</head>
<body>
    <ul>
        <script>
            var grades = {'gomgom' : 10, 'gomdol' : 40, 'gomgim' : 5};
                for (key in grades) {
                document.write("<li>key : " +key+" value : " + grades[key]+ "</li>");   
            }
        </script>
    </ul>
</body>
</html>

반복문 연결

객체지향 프로그래밍

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show': function () {
        alert('hello world');
    }
}
grades['show']();

참고 사이트 : 생활코딩

유동헌

지뢰찾기 개발자

이전 포스트

배열

다음 포스트

객체

정의