TIL#07 객체

29강 객체 예고

 

 

객체는 영어로 Object라고 한다.

 

객체라고 하는 것은 함수라는 것 기반 위에서 존재하는 것이다.

 

객체가 무엇인가를 설명하기 위해서는 너무 많은 얘기가 필요하니 객체가 가지고 있는

여러가지 얼굴들에서 딱 하나만 알아보고 

 

그 하나의 객체의 특성,존재 이유,기능에 집중해서 

 

'아, 객체가 이런 거구나'라는 느낌을 갖고 앞으로 나아가자.

 

 

//////////////////////////////////////////////////////////////////////

 

 

 

객체의 얼굴 중 하나는 역시 정리 정돈의 수단이다.

 

코드가 많아지면 정리정돈을 위해 함수를 사용하는데

함수가 많아지면, 그 뿐만이 아니라 그 함수와 관련된 변수들이 엄청나게 많아지면 

복잡함이 한계에 달하는데

 

그런 상황에서 서로 연관된 함수, 서로 연관된 변수를 같은 이름으로 그룹핑해서 정리정돈 하는 도구가

 

객체이다.

See the Pen 객체예고 by egoing (@egoing) on CodePen.

document.querySelector()는 document라는 객체에 querySelector라는 함수가 있다는 것이다.

 

객체에 속해 있는 함수는 매소드(method)라고 부른다.

 

 

30강 객체 쓰기와 읽기

 

우리가 정보의 양이 많아졌을 때 서로 연관된 정보를 정리정돈 하기 위해 배웠던 도구가 뭐였을까?

 

배열이였다.

 

그리고 그 배열이라는 도구는 순서에 따라서 정보를 정리정돈한다는 특징이 있었다.

그러면 순서대로 정보가 저장될 수 있는 것이 있다면 

 

순서없이 정보를 저장할 수 있는게 있지 않을까?

 

그게 바로 객체다.

 

그렇다고 객체에 마구잡이로 데이터를 집어넣는게 아니다. (그건 쓰레기통이다)

 

우리는 데이터를 다시 꺼낼 필요가 있기 때문에 수납상자에 집어넣으면서 

그 데이터에 이름을 붙이는 것이다.

 

객체는 이름이 있는 정리정돈 상자라고 생각하면 된다.

 

 

 

/////////////////////////////////////////////////////////////

 

 

 

 

객체를 만들 때 사용하는 기호를 object literal이라고 하는데(몰라도 된다)

 

중괄호를 사용한다.

 

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

egoing,leezche라는 정보를 넣었고 programmer,designer라는 이름을 붙였다.

 

 

 

 

정보를 꺼내 올 때

 document.write("programmer : "+coworkers.programmer+"<br>");
 document.write("designer : "+coworkers.designer+"<br>");

 

coworkers.programmer에 있는 . 점은 object access operator라고 부른다. 

즉, 이 객체에 접근하는 오퍼레이터라는 것이다.

 

 

 

 

정보를 추가할 때

coworkers.bookkeeper = "duru";
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");

coworkers["data scientist"] = "taeho";
 document.write("data scientist : "+coworkers["data scientist"]+"<br>");

coworkers.data scientist는 띄어쓰기(공백)이 들어가는데 이건 문법적으로 오류다.

이름에는 공백을 넣을 수 없다.

 

그러면 대신 배열에서 사용하는 [ ] 대괄호를 쓰면 똑같은 효과를 가져올 수 있다. 띄어쓰기도 쓸 수 있고.

coworkers.[data scientist]

 

 

 

31강 객체와 반복문

 

객체에 어떤 데이터가 있는지를 모조리 다 가져와야 하는 경우 반복문을 사용한다.

(배열에서 반복문을 사용했던 것처럼.)

 

See the Pen object iterate by Higher77 (@higher77) on CodePen.

 

 

 

객체에서는 for in을 사용한다.

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

Iterate는 순회한다,반복적으로 가져온다라는 뜻이다.

 

var key in coworkers는 coworker라는 변수가 가리키는 객체에 있는 key값들을 가져오는 반복문이다.

(key값은 programmer, designer과 같은 이름이다)

 

(배열에서는 순서대로 정리정돈 되어 있기 때문에 index라는 표현을 쓴다.)

 

For를 이용하면 coworker객체에 있는 데이터 수만큼 중괄호의 코드들이 실행된다.

 

실행 될 때마다 coworker안의 key값을 하나하나 변수 값으로 세팅해준다.

 

///////////////////////////////////////////////////////////////////////////////

 

coworkers["data scientist"] = "taeho";
 document.write("data scientist : "+coworkers["data scientist"]+"<br>");

coworkers에 데이터를 가져올 때 

우리가 배열의 형식을 사용해서 index가 들어가는 곳에 key값을 넣었더니 coworkers["data scientist"] 데이터를

가져올 수 있엇다.

 

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

그래서 coworkers[key]를 하면 첫번째의 key값으로  programmer 두번째는 designner 세번째는 ....

이렇게 되는 것이다.

(물론 순서는 다를 수 있다. key값은 순서를 보장하지 않는다)

 

 

 

 

 

32강 객체 프로퍼티와 메소드

 

 

객체에는 어떤 데이터를 담을 수 있다.

 

문자, 숫자, 배열 등등... 다 담을 수 있다.

 

그중에 하나 함수도 담을 수 있다.

 

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

 

var showAll = function( ) { } 은 function showAll( ) { }과 같은 표현이다.

 

var key in coworkers에서 coworkers라는 이름이 박혀 있기 때문에 객체의 이름이 바뀌면

데이터를 가져오지 못할 수 있다.

 

그런 경우를 대비해서 showAll이라는 이 함수 안에서 

이 함수가 소속된 객체를 가리키는 약속된 기호가 있는데 

 

'this'를 사용하면 된다.

 

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

 

이렇게하면 객체의 이름이 변해도 this는 자기 자신을 가리키기 때문에 영향받지 않는다.

 

 

조금 아쉬운건 여기있는 showAll조차도 coworkers에 소속된 데이터기 때문에 showAll도 화면에 표시가 되는데

이것을 해결하기 위해선 for문 안에 if문으로 showAll을 제외한다고 코딩해야하지만 지금은 중요하지 않다.

 

////////////////////////////////////////////////////////////////////////////////

 

 

우리는 객체에 소속된 변수의 값으로 함수를 지정할 수 있어서

 

객체에 소속된 함수를 만들 수 있다.

 

이런 객체에 소속된 함수를 메소드(Method)라고 부른다.

 

그리고 변수의 값으로 함수가 아닌 문자열, 숫자, 등이 지정된 것은 프로퍼티(Property)라고 부른다.

 

 

 

33강 객체의 활용