# 객체의 활용

### 예시) 주/야간모드 토글버튼 : 객체

![](https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miu1tqKdNPM-BV0usUx%2F-Mj979kyKSkehpABVwZF%2F-Mj97UWxyDwy1A33AyxO%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%20055.jpg?alt=media\&token=b0b14585-1259-4847-b5d8-9821c5a9cb39)

{% tabs %}
{% tab title="before" %}

```javascript
<script>
function LinksSetColor(color){
    var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
            alist[i].style.color = color;
            i = i + 1;
        }
}
function BodySetColor(color){
    document.querySelector('body').style.color = color;
}
function BodySetBackgroundColor(color){
    document.querySelector('body').style.backgroundColor = color;
}
function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
        BodySetBackgroundColor('black');
        BodySetColor('white');
        self.value = 'day';

        LinksSetColor('powderblue');

    } else {
        BodySetBackgroundColor('white');
        BodySetColor('black');
        self.value = 'night';

        LinksSetColor('blue');
    }
}
</script>
```

{% endtab %}

{% tab title="after" %}

```javascript
<script>
var Links = {
    setColor : function(color){
        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
            alist[i].style.color = color;
            i = i + 1;
        }
    }
}
var Body = {
    setColor : function(color){
        document.querySelector('body').style.color = color;
    },
    setBackgroundColor : function(color){
        document.querySelector('body').style.backgroundColor = color;
    }
}
function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){
        Body.setBackgroundColor('black');
        Body.setColor('white');
        self.value = 'day';

        Links.setColor('powderblue');

    } else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        self.value = 'night';

        Links.setColor('blue');
    }
}
</script>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**set** :  설정하기
{% endhint %}

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

document → 객체임을 알 수 있음
{% endhint %}

{% hint style="info" %}
BodySetBackgroundColor('white');  →  **Body.s**etBackgroundColor('white');

BodySetColor('black');                        →  **Body.s**etColor('black');

LinksSetColor('blue')                           → **Links.s**etColor('blue')
{% endhint %}

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

```javascript
var Body = {
    setColor : function(color){
        document.querySelector('body').style.color = color;
    },
    setBackgroundColor : function(color){
        document.querySelector('body').style.backgroundColor = color;
    }
}
```

{% hint style="danger" %}
**객체가 2개 이상일 때**

프로퍼티와 프로퍼티를 구별해 주기 위해 **' , ' 콤마** 꼭 찍어줘야 인식함
{% endhint %}

{% hint style="info" %}
변수명 : Body, Links

프로퍼티 : setColor, setBackgroundColor
{% endhint %}