[생활코딩] JavaScript 29-33 (객체, 객체와 반복문,객체 프로퍼티와 메소드)

*객체(Object)

함수의 기반 위에서 객체가 존재.

함수, 함수와 연관되어있는 변수가 많아졌을 때, 그룹핑해서 정리정돈하기 위한 도구.

 

 

 

document.querySelector('body').style.color = color;

-> document 가 객체 / querySelector은 document 객체에 속한 함수 / 객체에 속한 함수 => 메소드(method)라 부른다

     

 

*객체 쓰기와 읽기

 

-배열은 정보를 담는 그릇, 정보가 순서대로 저장됨. 

-> 순서 없이 정보를 저장할 수 있는 것: 객체 (=이름이 있는 정리정돈 상자)

 

-객체를 만들 때 쓰는 기호 : {} (배열은 [])

 

 

ex.

<script>

var coworkers = {

"programmer":"해린",

"designer":"혜인"

};

</script>

-> coworkers 라는 객체에 해린,민지 라는 정보를 각각 programmer, designer라는 딱지를 붙여 저장한 것.

 

 

-만들어져있는 객체에서 데이터를 가져오기

 

document.write("programmer : "+coworkers.programmer);

document.write("designer : "+coworkers.designer);

coworkers.programmer 에서의 ' . ' 은 object access operator라고 부름 -> 객체에 접근하는 operator

 

 

 

 

-객체가 만들어진 다음에 정보 추가

 

coworkers.bookeeper = "민지";

 

-이름에 공백 넣고 싶을 때

 

coworkers["data scientist"] = "하니";

 

 

 

 

*객체와 반복문

생성된 객체에 어떤 데이터가 있는지를 다 가져와야 하는 경우 -> 반복문 사용 

 

key-> 가져오고 싶은 정보에 도달할 수 있는 열쇠 ex. programmer, designer (배열에서는 index)

 

for(var key in coworkers){

}

coworkers에 있는 key를 하나하나 꺼내 {}에 있는 코드를 실행해주는 명령 

 

 

 

 

 

모든 데이터를 순회하며 필요한 데이터가 있는지 확인 가능

 

*객체 프로퍼티와 메소드

 

-객체에는 데이터를 담을 수 있다. ex. 문자, 배열, 숫자 등등.. 

함수 또한 담을 수 있다!

 

 

객체에 소속된 변수의 값으로 함수를 지정할 수 있음

ex. coworkers라는 객체에 showAll이라는 메소드 추가.

 

coworkers.showAll = function(){

}

 

<script>

   coworkers.showAll = function(){

   for(var key in coworkers){

   document.write(key+ " : " +coworkers[key]+'<br>');

  }

}

   coworkers.showAll();

</script>

 

여기서 'coworkers' 라는 객체의 이름이 바뀐다면, 데이터를 못 가졍오는 현상 생길 수 있음 

따라서 함수가 소속된 객체를 가리키는 약속된 기호인 'this' 사용.

 

<script>

   coworkers.showAll = function(){

   for(var key in this){

   document.write(key+ " : " +this[key]+'<br>');

  }

}

   coworkers.showAll();

</script>

 

객체에 소속된 함수를 '메소드'라고 하고, 객체에 소속된 변수(ex.programmer,designer...)를 '프로퍼티'라고 부른다

 

*객체의 활용

Body 라고 하는 변수에 객체 담기

 

ex.

 function BodySetColor(color){

 document.querySelector('body').style.color = color;

}

 

↓

 

  var Body = {

  setColor:fucntion (color){

  document.querySelector('body').style.color = color;

 }

}

 

 

 

**객체는 객체의 프로퍼티와 프로퍼티를 구분할 때 콤마를 찍는다

 

LinkSetColor도 마찬가지로 객체화 

 

 

 

 

출처

https://www.youtube.com/@coohde

생활코딩

유튜브 생활코딩님의 'WEB2-JavaScript' 강의를 수강하고 공부한 내용을 정리한 포스팅입니다.