[JS] 18. 객체란 무엇인가? (객체 생성, 추가, 추출방법)

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

결과는 이렇구요.

1) 객체에 변수를 담는법

coworkers라는 변수에 객체를 담는것이고,

객체에 내용을 담을때는 대괄호 { } 를 사용합니다.

"daniel"이라는 이름을 넣을때는 이 이름에 대한 정보를 앞에 "programmer"이라고 넣습니다.

designer도 동일합니다.

즉, daniel이라는 이름을 programmer라는 딱지(네임택)을 사용한거죠.

이렇게 저장된 내용을 사용할때는,

아래와 같이,

coworkers.programmer이라고 사용합니다.

이 점(.)은 오브젝트 엑세스 오퍼레이터라고 부릅니다.

즉, 해당하는 오브젝트(객체)에 접근할 수 있게 해주는 역할을 하는 자바스크립트 문법입니다.

여기까지가 객체를 만드는 방법, 그리고 만든 객체에 대해서 사용하는 방법에 대해서 살펴봤습니다.

2) 객체를 추가하는 법

이번에는 객체를 추가하는법을 알아볼께요!

bookkeeper라는 객체를 추가해볼께요.

coworkers변수에 . 뒤에 bookkeeper이라는 객체를 만들고 이 객체에 david라는 값을 넣었습니다.

이번에는 data scientist라는 객체를 추가해볼께요!

coworkers.data scientist 이렇게는 사용이 안됩니다. 왜냐하면 이름에는 공백을 쓸 수 없어요!

그래서 띄어쓰기는 그대로 쓰면 안되고 아래와 같이 사용해야 합니다.

배열에서 어떤 정보를 가져올때 대괄호[] 이렇게 쓰듯이, 동일하게 아래처럼 사용하면 됩니다.

가져올때도 .을 사용할순 없고 아래처럼 작성하면 됩니다.

본 강의안은 생활코딩 강의안을 바탕으로 재작성하였습니다.

opentutorials.org/course/3085/18853

3) 객체 데이터 불러오기(반복문 활용)

생성된 객체 또는 객체에 있는 모든 데이터를 불러와서 활용해야 할 때가 있죠. 이러한때 반복문을 사용한다는 건 기본적으로 알 수 있는데요, 반복문을 활용해서 어떻게 쓰는지를 알아보겠습니다. 방법은 검색을 통해서 알 수 있습니다.

이렇게 검색해봤습니다. 'javascript object iterate'

첫번째 페이지를 들어가보니, 아래와 같이 for in을 사용하라고 되어 있네요!

한번 사용해보겠습니다.

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

이렇게 사용했습니다.

for()라는건 coworkers의 변수가 가르키고 있는 객체의 key값들을 반복적으로 가져오는데, 그 종료시점은 coworkers의 데이터 수가 됩니다.

Key값에 어떤 데이터가 있는지 한번 결과를 보면 알 수 있겠죠?

key값을 확인했습니다.

그럼 이걸 조금 더 응용하면 전체 데이터를 뽑을 수 있겠죠?

아래와 같이 적용해봅니다.

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

그럼 결과는 이렇게 되겠죠.

네, for .. in 을 활용해서 객체의 데이터값을 어떻게 가져오는지 알아봤습니다.

4) 객체 프로퍼티와 메소드

이번에는 객체에 함수를 담는걸 해보겠습니다.

    <h2>Property & Method</h2>
    <script>
      coworkers.showAll = function(){
        for(var key in coworkers){
          document.write(key+' : ' +coworkers[key]+'<br>');
        }
      }
      coworkers.showAll();
    </script>

결과는 아래와 같습니다.

아래와 같이 수정해줄 필요가 있습니다.

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

본 강의는 생활코딩 강의안을 바탕으로 재작성하였습니다.

opentutorials.org/course/3085/18853

객체 - 생활코딩

객체 2017-11-28 23:32:58 객체의 쓰기와 읽기 변경사항 객체와 반복문 변경사항 프로퍼티와 메소드 변경사항

opentutorials.org