자바스크립트 기초 개념 - 객체 #15

객체는 함수라는 기반 위에서 존재하는 것이다. 함수의 심화라고 생각하면 좋다.

 

한줄짜리 코드는 통상적으로 함수로 만들지 않지만, 그 코드의 가독성이 안좋거나 의미가 불명확할 때, 코드로 만들어주는 것도 좋은 방법이다.

 

만약 setColor()라는 함수를 만들었을 때,

수많은 코드를 작성하다보면 함수 이름이 중복되는 경우가 생길 수 있다.

 

 

그래서 보통 BodySetColor(), LinksSetColor(), BodySetBackgroundColor() 등으로 다양하게 함수명을 만든다. 하지만 그래도 쓰임이 조금 비슷한데, 복잡한 경우가 많다.

 

이를 방지하기 위해 서로 관련있는 함수와 변수를 그룹핑하는 것이 객체이다.

 

객체를 사용하면 다음과 같이 변한다.

 

Body라는 객체 생성, Links라는 객체생성

 

BodySetColor() 

 -> Body.SetColor()

 

LinksSetColor()

 -> Links.SetColor()

 

BodySetBackgroundColor()

 -> Body.SetBackgroundColor()

 

자바스크립트에서 객체는 디렉토리와 비슷한 역할을 한다.

 

document.querySelectorAll();

 

는 document라는 객체에 속해있는 querySelectorAll() 함수이다.

 

객체에 속해있는 함수는 메서드(method)라고 한다.

 

> 객체 쓰기와 읽기

 

배열은 변수 등을 순서대로 정리한다.

객체는 각 변수, 메서드에 이름을 붙여주고 정리한다.

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

이렇게 coworkers라는 변수(객체)안에 각각에 대응되는 코드를 넣어주면

 

객체.변수

 

이렇게 묶이게 된다. 여기서 나오는 '.'을 Object Acess Operator라고 한다.

    <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"]);
    </script>

원래는 이름에 띄어쓰기(공백)을 허용하지 않는다. 따라서 공백을 사용하려면 위와 같이 []대괄호안에 넣어서 입력을 하고 출력도 같은 방법으로 하면 된다.

[]는 인덱스를 의미하고, 그 안에 key값을 넣어도 데이터를 가져올 수 있다.

 

이와 같은 방법으로 객체를 생성하고 객체에 데이터를 입력할 수 있다.

 

> 객체와 반복문

 

'javascript object iteration' 

 

https://stackoverflow.com/questions/14379274/how-to-iterate-over-a-javascript-object

    <h2>Iterate</h2>
    <script>
      for(var key in coworkers){
        
      }
    </script>

coworkers라고 하는 변수가 가르키는 객체에 있는 이 key 값들을 가져오는 반복문이다. key 값은 아까 작성했던 "programmer" "designer" "bookkeeper" "data scientist" 이다.

 

즉, key 값은 우리가 가져오고 싶은  정보에 도달할 수 있는 열쇠다. 배열에서는 key가 아니라 index라는 표현을 쓴다. 

 

coworkers에 있는 데이터의 수만큼 중괄호에 있는 코드가 실행되는데 실행될 때마다 key값이 coworkers의 값을 하나하나 변수로 세팅해준다.

for(var key in coworkers){
        document.(key+'<br>');
      }

이렇게 작성된다.

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

지금까지 객체의 데이터를 순회(iterate)하는 방법을 알아봤다.