JavaScript에서 어려운 난관을 만났다.

함수로 간결해진 코드를 더 간결하게 만들기 위해 객체를 사용한다는데… 연습코드는 깔끔하지만 내 머리는 복잡해졌다.

Property, Method, Key, Value 등등 있는데 그냥 내가 이해한대로 정리를 해봐야겠다 복-잡ㅠ_ㅠ

먼저 객체의 필요성을 느끼기 위해 자바스크립트를 여러가지 작성해본다.

버튼을 클릭시 바꿀 항목들이고 script에 작성한다면 이렇게 된다.

1. 배경색을 바꾼다.(‘body’)
2. 글자색을 바꾼다.(‘body’)
3. 카테고리색을 바꾼다.(‘a’)

<script>
 punction BodySetBackground(color){
  document.querySelector('body').style.backgroundColor = color;
 }
 punction BodySetColor(color){
  document.querySelector('body').style.color = color;
 }
 punction LinkSetColor(color){
  var alist=document.querySelectorAll('a');
  var i=0;
  while(i < alist.length){
   alist[i].style.color = color;
   i+=1;
  }
</script>

항목 하나당 함수를 하나씩 만들어 총 세개의 함수가 만들어졌다. 그런데 여기서 더 줄이란다.

그렇다면 이때 객체를 이용해 body 태그에 적용되는 함수가 두개인데 이를 더 줄여 하나로 만들 수 있다.

전문적인 사이트로 가면 전문용어로 알려주던데… Pass!

내가 이해한 방법으로 정리하고 코드를 짜보면 이렇다.

1. 함수의 공통적인 부분을 찾아 객체이름으로 지정한다(태그나 알기쉽게)
2. 그리고 ={ } 여기 안에 함수를 넣는다. 바로 이렇게 ! 함수 이름 : function(매개변수){ 해당 함수식 }
3. 함수간의 구분은 ,로 찍는다.

<script>
 var Body = {
  SetBackground : function(color){
   document.querySelector('body').style.backgroundColor = color;
  },
  SetColor : function(color){
   document.qeurySelector('body').style.Color = color;
  }
 }
</script>

이렇게하면 공통된 여러개의 함수를 하나의 객체로 정리정돈할 수 있다. 사용법도 간단하다.

객체이름.함수이름(매개변수);를 사용하면 된다.

Body.SetBackground(black);
Body.SetColor(white);

LinkSetColor함수도 비록 한개지만 간결하게 객체로 바꾸는 것이 좋다. 코드의 생명은 중복제거와 간결이기에..ㅠ_ㅠ

그치만 Link는 다음에 정리할 jQuery 간단하게 보기에서 정리하는게 더 좋을 것 같다!