객체 { }

(Object)

데이터가 추가되면 배열 전체에서 중복되지 않는 인덱스가 자동생성되어 추가된 데이터에 대한 식별자가 되며 이 인덱스를 이용해서 데이터를 가져오게 되는 것인데, 만약 인덱스로 숫자가 아닌 문자를 사용하고 싶다면 객체를 사용해야 함

배열 : 순서대로 정보 저장 / [대괄호]

vs

객체 : 순서없이 정보 저장 / {중괄호}

1. 객체

1-1. 객체의 생성

<script>
    var coworkers = {
        "programmer":"egoing",    //객체
        "designer":"leezche"
    };
</script>

1-2. 객체의 데이터 불러오기

<script>
    var coworkers = {
        "programmer":"egoing",
        "designer":"leezche"
    };
    document.write(coworkers.programmer); //egoing
    document.write(coworkers.designer);   //leezche
</script>

1-3. 객체에 데이터 넣기

객체가 만들어진 다음 데이터추가

coworkers.bookkeeper = "duru";        //데이터추가
document.write(coworkers.bookkeeper); //duru

띄어쓰기가 포함 된 객체추가

coworkers["data scientist"] = "taeho";
document.write(coworkers["data scientist"]);

 //띄어쓰기가 포함된 데이터 추가 : .을 지우고 대괄호 사용 ex)["배열"]
//coworkers.data scientist → coworkers["data scientist"]

완성본

<script>
    var coworkers = {
        "programmer":"egoing",
        "designer":"leezche"
    };
    document.write("programmer : " + coworkers.programmer + "<br>");
    document.write("designer : " + coworkers.designer + "<br>");
    
    coworkers.bookkeeper = "duru";
    document.write("bookkeeper : " + coworkers.bookkeeper + "<br>");
    
    coworkers["data scientist"] = "taeho";
    document.write("data scientist : " + coworkers["data scientist"] + "<br>");
</script>

2. 객체와 반복문

<h1>Object</h1>
<h2>Create</h2>
<script>
    var coworkers = {
        "programmer":"egoing",
        "designer":"leezche"
    };
    document.write("programmer : " + coworkers.programmer + "<br>");
    document.write("designer : " + coworkers.designer + "<br>");
    coworkers.bookkeeper = "duru";
    document.write("bookkeeper : " + coworkers.bookkeeper + "<br>");
    coworkers["data scientist"] = "taeho";
    document.write("data scientist : " + coworkers["data scientist"] + "<br>");
</script>

<h2>Iterate</h2>
<script>
    for(var key in coworkers){
        document.write(key + ' : ' + coworkers[key] + '<br>');
    }
</script>

document.querySelector('body').style.color

document → 객체

querySelector('body') 객체에 속해있는 함수 → 메소드(Method)