(생활코딩) Javascript 객체 -3-

객체프로퍼티(property)와 메소드(method)에 대해서 알아보자.

 

객체에는 데이터를 담을 수 있다. 전에는 문자를 담았지만 배열, 숫자, 함수등등 다 담을 수 있다.

여기서 객체에 함수를 담아보자.

 

첫 번째, 두 번째, 세 번째 다 함수를 지정하는 내용이다.

 

coworkers는 이미 만들어 놓은 게 있으니까 그대로 활용하고, coworkers라는 객체에 메소드를 추가해보자. showALL이라는 메소드를 추가해서 coworkers에 있는 각각의 데이터들을 iterate해서 화면에 출력하는 for(var key in coworkers)코드를 넣어 놓는다.

 

coworkers 객체에 함수인 showAll 메소드를 추가한다. 

coworkers 를 this로 바꿔준다.

 

해당 코드를 출력하면 위와같이 나오는데, 아주 좋은 방법은 아니다.

coworkers라는 객체명이 coworkers[key]라고 박혀있기 때문에, 만약에 이 객체의 이름이 바뀐다면 데이터를 못가져오는 현상이 발생된다. 이러한 현상을 막기위해 showAll이라는 함수 안에 이 함수가 소속된 객체를 가리키는 약속된 기호가 있는데 전의 "this"를 사용하면 된다. coworkers를 this로 바꿔 해당 변수의 이름이 다른걸로 바뀌어도 this는 자기 자신을 가리키기 때문에 영향을 받지 않는다. 

 

 

또한, showAll조차도 coworkers에 소속된 데이터이기 때문에 showAll도 같이 화면에 표시된 것을 볼 수 있다.

이런 문제를 없애기 위해서는  for문 안에 if문으로 showAll을 제외한다는 코딩을 하면 된다. (key!="showAll"을 조건으로 키값이 showAll이 아닐때만 조건 실행)

 

이렇게 객체에 소속된 변수의 값으로 함수를 지정할 수 있고, 객체에 소속된 함수를 만들 수 있다. 이 함수를 메소드라고 한다. 객체에 소속된 변수는 프로퍼티라고 부른다.

 

 

그럼 객체-1-에서 돌아가 body와 links객체를 만들고 해당 함수들을 메소드로 만들어보자.

 

 

body라는 객체의 프로퍼티로 setcolor와 setbackgroundcolor로 지정한 다음에 해당 함수코드들을 복사해준다.

또 객체는 객체의 프로퍼티와 프로퍼티를 구분할 때 컴마(,)를 찍어줘야 한다.

 

Body, Links를 객체로 만들고 setcolor함수들을 메소드로 만들었다.

 

위와같이 코드를 작성하면 잘 돌아간다!

 

여기서 늘 사용했던 document.querySelector()가 document라는 객체이고, querySelector()는 함수이면서 객체에 소속되어 있기 때문에 메소드라는 사실을 알 수 있다.