[JavaScript] 객체의 기본적인 정의 및 형태

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

오늘은 객체의 기본적인 정의 및 형태에 대하여 포스팅 해보는 시간을 갖도록 하였습니다.

---

* 객체의 정의

프로그래밍을 하다보면 코드가 많아지며,

코드를 정리 정돈하기 위해 함수를 사용함수를 많아지면 함수와 연관 되어 있는 변수들이 많아지므로, 복잡도의 한계에 도달하게 됨.

기본적인 정의 : 이러한 한계 상황에서 서로 연관된 함수와 연관된 변수를 동일한 이름으로 그룹화하여 정리 정돈하기 위한 도구

 

 

이전 포스팅에서 작성한 코드 중 var alist ~ i = i +1 ; 까지의 코드가 if절과 else 절에 반복되는 것을 최소화하고 싶었습니다.

해당 부분은 함수를 통하여 반복 되는 코드를 아래와 같이 해결할 수 있었습니다.

 

 

setColor라는 함수를 이용하여 코드를 단순화시켜 주었습니다.

  alist[i].style.color = color; --> color라는 매개변수 값을 줌으로써 ~ color의 값이 변경될 수 있도록 처리하였습니다.

 

여기서 또, 중복되는 target.style.color / target.style.backgroundColor 까지도 함수화 하여 코드를 단순화시켜주었습니다.

 

해당 부분들을 함수화 시키는 것은 무의미할 수도 있겠지만,

짧은 코드이지만 의미가 불명확하거나 시간이 지난 후 해당 코드가 어떤 뜻을 지녔는지 파악하기 어려울 때는 함수를 통해 로직의

이름을 부여하는 것도 좋은 방법이라고 보입니다.

(다만, 해당 부분들은 의미가 명확하긴 함)

 

 

 

※ 처음 만들었던 setColor 함수 (var alist ~ i = i +1 ;)의 이름을 LinksSetColor로 변경

: 수많은 코드들이 존재하였을 때 setColor라는 함수가 있었는지 없었는지 확인이 불가하므로, 

이름이 충돌되지 않도록 Links~, Body~ 등으로 함수 이름 앞에 명확한 표현을 해주었습니다.

 

다만 해당 코드로 실행해보니 button click 하였을 때 입력된 코드 실행이 안 되는 오류가 발생되었습니다.

확인해보니,  하기와 같은 이유로 실행이 불가한 점을 발견할 수 있었습니다.

 

function BodySetColor(color){target.style.color= color; }
  function BodySetBackgrouncolor(color){ target.style.backgroundColor=color;}

 

function 절의 target은 nightDayHandler 함수 내에 var 값으로 지정해준 target 이므로,

새로 만든 함수 (BodySetColor,BodySetBackgroundColor)의 target 은 document.querySelector('body')를 가리키지 못한다는 점이 확인되었습니다.

 

오류 수정

 

따라서 이와 같이 BodySetColor, BodySetBackgroundColor 함수의 target 값은

document.querySelector('body')로 지정해주어 발생된 오류를 해결해 주었습니다.

 

이와 같이 함수를 통하여 코드들의 중복을 최소화시킬 수 있지만, 객체를 이용해서 하기와 같이 정리해 볼 수 있겠습니다.

(서로 연관된 함수와 연관된 변수를 그룹화하여 정리 정돈하기 위한 도구라는 정의를 이용)

 

실제 동작은 불가한 코드입니다.

 

Body라는 객체의 속해 있는 setBackgroundColor, setColor 함수

Links라는 객체의 속해 있는 setColor 함수라는 점을 깨달을 수 있습니다.

 

여기서 알 수 있는 점!

document.querySelector의 형태를 보면

document는 객체 querySelector는 document라는 객체의 속해 있는 함수라는 점을 알 수 있게 되었으며,

 

※ 객체의 속해 있는 함수 (setBackgroundColor, setColor, querySelector 등)는 메소드(method)라고 부릅니다.