이번 시간은 특히 더 어렵다. 객체에 대해서 알아보자

객체는 function이 많아질때 이 기능을 묶어 보관하는 역할을 하고 있다.

배열은 정보를 담는 그릇이면서, 순서대로 정보를 정리하는 기능이다.

그에 비해 object는 순서에 상관없이 이름대로 데이터를 정리해둔 기능이다.

즉, 정보를 순서대로 저장 = array
이름표를 붙여 저장 = object

객체는 {}중괄호를 활용해 만들 수 있다.

<script>
        var coworks = {
            "programer": "young",
            "designer": "inn"
        };
</script>

이 식을 해석해보면, young라는 데이터를 programer라는 네임택을 붙여둔 것이라 생각하면 된다.
마찬가지로, inn이라는 데이터도 designer라는 네임택을 붙인셈이다.

이 정보를 꺼내오기 위해서는 네임택을 위주로 생각하면 된다.

<script>
        var coworks = {
            "programer": "young",
            "designer": "inn"
        };
         document.write("programer : " + coworks.programer + "<br>");
        document.write("designer : " + coworks.designer + "<br>");
</script>

여기서 document.write("네임택 : " + object.네임택);을 해주면 해당 값을 도출할 수 있다.

헷갈릴 수 있는게, '변수 .네임택'을 하는 과정에서 .은 오퍼레이터 엑세스 역할을한다.
즉, object내에 있는 데이터에 접근시켜주는 역할을 하는 것이다.

이 방법을 쓰면 만들어져있는 데이터에 접근할 수 잇다.
그러나, 이미 만들어져있는 object에 따로 추가하고 싶은 항목이있다면 별도로 설정해줄 수 있다

<script>
        var coworks = {
            "programer": "young",
            "designer": "inn"
        };
         document.write("programer : " + coworks.programer + "<br>");
        document.write("designer : " + coworks.designer + "<br>");
        coworks.bookeeper = "ming";
        document.write("bookeeper : " + coworks.bookeeper + "<br>");
        coworks["data scientist"] = "bewhy";
        document.write("data scientist : " + coworks["data scientist"] + "<br>");
</script>

또한, coworks.data scientist 처럼 띄어쓰기가 있는 경우엔 문법적으로 오류가 나기에
cowrks["data scientist"] 이런 식으로 처리한다면 타 문법처럼 띄어쓰기도 한 덩어리로 묶어줄 수 있다.

object iterate / 객체 반복

객체를 만들고 생성하는 것은 아래와 같다.

    <script>
        const sayhi = {
            "spain": "hola",
            "korea": "annyoung",
            "english": "hello"
        }
        document.write("spain : " + sayhi.spain);
    </script>

반복은 아래와 같다.

여기서 key 값은 우리가 원하는 데이터로 가는 열쇠 역할을 한다.

즉, 해석해보자면
hola를 뽑아내기 위해 sayhi에서 이름 붙여진 spain이 키 값이 되는 것!

그러니 더 단순하게 키 값만을 뽑아내고 싶다면 다음과 같은 코드로 알 수 있다.

    <script>
        for (const key in sayhi){
            document.write(key+'<br>')
        }
    </script>

그렇다면 다음과 같은 값을 볼 수 있다.

좌항의 키값을 뽑아냈다면, 우항의 네임태그가 붙여진 실제 데이터값은 어떻게 뽑아낼까?
우린 이전에 활용했던 array를 활용해 나타낼 수 있다.

  <script>
    for (const key in sayhi){
        document.write(sayhi[key]+'<br>')
    }
</script>

이렇게 이전에 data scientist를 만들때 사용했던 대괄호를 이용한다면 우항만을 뽑아낼 수 있다.

이 둘을 동시에 가져오기 위해선 '좌항의 key'와 object[key]를 활용하면 모두 가능하다. 식은 아래와 같다.

여기서 이 문장을 전체로 뽑아내 반복하고 싶다면
for (var key in object) 문법을 활용하면 된다.

    <script>
        for (const key in sayhi){
            document.write(key+ ':' + sayhi[key]+'<br>')
        }
    </script>

이렇게 할 경우 산출 값은 다음과 같다.

함수 정의

이전으로 돌아가
우리가 정의해둔 object 'sayhi'를 들고와서 반복 함수를 적용한다면 다음과 같다.

<script>
    sayhi.showall2 = function(){
    for(var key in this)
        document.write(key + ' : ' + this[key] + '<br>')
    }
    sayhi.showall2();
</script>

값은 아래와 같다

그러나 showall2의 영향을 자신도 받기에 해당 코드가 고스란히 노출된다
이를 줄이기 위해 if를 활용할 수 있다.

객체 활용

먼저 function을 정의하는 두가지 형태가 있다.

• function 함수명(){ 로직 };
• var 함수명 = function(){ 로직 };

이전에 만들어뒀던 로직을 살펴보면, function이 4번이 중복된다.
이 들을 객체로 묶어 function을 최소화해보자.
먼저 기존의 코드는 다음과 같다.

  <script>
    function AsetColor(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 BackgroundColor(color) {
      document.querySelector('body').style.backgroundColor = color;
    }
    function buttonhandler(self) {
      var target = document.querySelector('body');
      if (self.value === 'night') {
        BackgroundColor('black');
        bodysetColor('white');
        self.value = 'day'
        AsetColor('powderblue');
      } else {
        BackgroundColor('white');
        bodysetColor('black');
        self.value = 'night'
        AsetColor('green');
      }
    }
  </script>

해당 식에서 function을 아래와 같이 리팩토링했다.

<script>
    var Alinks = {
      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 buttonhandler(self) {
      var target = document.querySelector('body');
      if (self.value === 'night') {
        Body.setBackgroundColor('black');
        Body.setColor('white');
        self.value = 'day'
        Alinks.setColor('powderblue');

      } else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        self.value = 'night'
        Alinks.setColor('green');
      }
    }
  </script>

기능은 완전히 똑같고, 외관도 똑같다.
작동하는 방식에 있어서는 유의미하게 줄어들었고, 코드가 깔끔해졌다.

이번에 역시 가장 중요한 것은 key와 object의 이해다.

즉, function을 간결화시켜주기 위해서 다음과 같은 과정을 거쳐야한다.

var 함수 명 = function(기능){
로직 1 , 로직 2, 로직 3
}
해당 방식을 거치면 함수를 묶기가 가능한 것이다.