> For the complete documentation index, see [llms.txt](https://westsilver.gitbook.io/study-script/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://westsilver.gitbook.io/study-script/javascript/basic/undefined-4.md).

# 객체 { }

(Object)

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

{% hint style="info" %}
**배열** : **순서대로** 정보 저장 / \[대괄호] 

vs 

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

## 1. 객체

### 1-1. 객체의 생성

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

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

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

### 1-3. 객체에 데이터 넣기&#x20;

![](https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miu1tqKdNPM-BV0usUx%2F-Mj932IE0Jx7Yy4IqVpC%2F-Mj93AKweoTaOeeGd1cC%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%20053.jpg?alt=media\&token=fd7dfdc6-04bb-417f-934a-5e6d46ff07ac)

{% tabs %}
{% tab title="객체가 만들어진 다음 데이터추가" %}

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

{% endtab %}

{% tab title="띄어쓰기가 포함 된 객체추가" %}

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

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

{% endtab %}

{% tab title="완성본" %}

```javascript
<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>
```

{% endtab %}
{% endtabs %}

## 2. 객체와 반복문

```javascript
<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>
```

{% hint style="info" %}
**document.querySelector('body').style.color**

document → 객체

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