자바스크립트 - 객체

객체

객체란

정리정돈의 수단

코드 많아짐 → 정리정돈 필요 → 함수 → 함수와 관련된 변수가 많아짐 → 복잡도 높아짐 → 서로 연관된 함수와 변수들을 grouping 하기 위한 도구가 객체

배열이 서로 연결된 정보를 순서에 따라 정리정돈하는 것이라면,

객체는 순서 없이 정보를 저장 (이름이 있는 정리정돈 상자)

객체 쓰기와 읽기

var A = {

"B" : "b"

"C" : "c"

};

변수 A를 지정해준 후, B와 C의 객체를 생성하고 정보를 저장할 수 있다.

• 추가하고 싶다면, 변수와 객체를 .으로 연결하면 된다 (A.D="d")
• 띄어쓰기가 필요한 객체라면, [" "]로 묶어줘야 한다 (A["E F"]="e"]

<h1> Object </h1>
    <h2> Create </h2>
    <script>
      var friends = {
        "men":"jiho",
        "women":"seran"
      };
      document.write("men : "+friends.men+"<br>");
      document.write("women : "+friends.women+"<br>");
      friends.alcoholic = "jeongki";
      document.write("alcoholic : "+friends.alcoholic+"<br>");
      friends["super genius"] = "jaehwan" ;
      document.write("super genius : "+friends["super genius"]+"<br>");
    </script>

위와 같이, friends 변수 안에 객체 men과 women을 생성하였고 지정된 정보를 출력할 수 있다.

객체와 반복문

for(var key in A) {

}

변수 A에 있는 key를 꺼내서 { } 안에 있는 코드가 실행 → 변수 A에 있는 key 값이 하나하나 변수로 세팅

(여기서 key값이란 위의 객체, 위 예시에서의 men, women 등..)

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

key → friend 변수의 key 값인 men, women 등을 불러옴

friends[key] → 대괄호를 통해 속성값들을 지정해줬던 것처럼 (jaehwan 참고) 속성값이 출력

이를 이용하여 코드 하나로 효율성을 획기적으로 업그레이드할 수 있다.

Property & Method
객체에는 문자, 숫자 이외에도 함수를 담을 수 있음

Method → 객체에 소속된 함수

Property → 객체에 소속된 변수

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

Take Away

• 망
  생활코딩에서 배운걸 따라하는것까진 괜찮았다.
  근데 이걸 내가 만든 홈페이지에 적용을 해보려니 갑자기 거기서부터 뇌정지가 오기 시작했다.
  그동안 단순히 코드를 따라가는거에 급급하다보니 제대로 된 복습을 할 시간이 없었던 것이 문제인듯 하다.
  자바스크립트를 너무 물로 본 내 잘못이다.
  HTML과 CSS 때 도움을 많이 받았던 Codecademy를 등록을 하고, 남은시간 거기에 있는 Syllabus에 충실히 따라가서 내가 배울 수 있는 만큼은 최대한 배우려고 노력을 해야할 듯 하다.
  나 자신에게 실망이 많아지는 시간이다.