자바스크립트의 시작 : Javascript 객체

4. Javascript 객체 (Object)

 

function nightDayHandler(self){
   var target = document.querySelector('body');
   if(self.value === 'night'){
   target.style.backgroundColor = 'black';
   target.style.color = 'white';
   self.value = 'day';
   
   var alist = document.querySelectorAll('a');
   var i = 0;
   while(i < alist.length){
      alist[i].style.color = 'powderblue';
      i = i + 1;
   }
  } else {
    target.style.backgroundColor = 'white';
    target.style.color = 'black';
    self.value = 'night';
    
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
      alist[i].style.color = 'blue';
      i = i + 1;
   }
  } 
}

 

지난 시간에 작성한 코드인데 여기서 중복되는 코드가 꽤 있다는 걸 알 수 있다.

 

var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
   alist[i].style.color = 'powderblue';
   i = i + 1;
}

 

이 부분만 따로 함수로 만들어보겠다.

이 코드의 기능은 각 리스트에 색을 입히는 것이므로 LinksSetColor라는 이름의 함수를 새로 작성한다.

 

function LinksSetColor(color){
   var alist = document.querySelectorAll('a');
   var i = 0;
   while(i < alist.length){
      alist[i].style.color = color;
      i = i + 1;
   }
}

 

LinksSetColor는 매개변수로 color 값을 받는 함수이다.

 

target.style.color = 'white';

 

그리고 이 코드 한 줄도 반복되어서 사용되고 있으니 함수로 만들자.

지금은 한 줄이지만 만약에 여러줄의 코드가 반복되고 있다고 생각하면 함수로 구현하는게 바람직하다.

또한, 짧은 코드여도 함수로 만들면 나중에 목적과 기능을 파악하기 쉽다는 장점이 있다.

 

function BodySetColor(color){
   document.querySelector('body').style.color = color;
}

 

이번에는 BodySetColor라는 함수를 만들었다.

같은 방식으로 BodySetBackgroundColor라는 함수도 만들 수 있을 것이다.

 

function BodySetBackgroundColor(color){
   document.querySelector('body').style.backgroundColor = color;
}

 

준비된 함수들을 이용해서 처음 코드를 수정해보자.

 

function LinksSetColor(color){
   var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
       alist[i].style.color = color;
      i = i + 1;
   }
}

function BodySetColor(color){
   document.querySelector('body').style.color = color;
}

function BodySetBackgroundColor(color){
   document.querySelector('body').style.backgroundColor = color;
}

function nightDayHandler(self){
   var target = document.querySelector('body');
   if(self.value === 'night'){
   BodySetBackgroundColor('black');
   BodySetColor('white');
   self.value = 'day';
   
   LinksSetColor('powderblue');
  } else {
    BodySetBackgroundColor('white');
    BodySetColor('black');
    self.value = 'night';
    
   LinksSetColor('blue');
  } 
}

 

이렇게 다양한 함수들이 존재하는 상황에서 객체를 사용하면 코드의 정리정돈이 더 수월해진다.

 

💡 객체란? 서로 연관된 함수들을 그룹핑 하기 위해 존재하는 수납상자.

객체에 속한 함수는 메소드라고 부른다.

 

function nightDayHandler(self){
   var target = document.querySelector('body');
   if(self.value === 'night'){
   Body.SetBackgroundColor('black');
   Body.SetColor('white');
   self.value = 'day';
   
   Links.SetColor('powderblue');
  } else {
    Body.SetBackgroundColor('white');
    Body.SetColor('black');
    self.value = 'night';
    
   Links.SetColor('blue');
  } 
}

 

만약 Links와 Body라는 객체를 만든다고 하면 이런 식으로 수정가능하다.

 

---

객체의 쓰기와 읽기

 

💡 배열 - 어떤 정보를 순서대로 저장하는 구조

💡 객체 - 어떤 정보를 순서 없이 저장하는 구조. 순서가 없는 대신 각 요소에 이름을 부여함.

 

배열은 대괄호 []를 사용해서 선언했다면 객체는 중괄호 {}를 사용해서 선언한다.

 

// 객체를 만드는 방법
var coworkers = {
   "programmer" : "KIM",
   "designer" : "LEE",
}

// 객체에 담긴 정보를 꺼내오는 방법
document.write("programmer : "+ coworkers.programmer +"<br>"); //KIM
document.write("programmer : "+ coworkers.designer +"<br>"); //LEE

 

객체에 담긴 정보를 꺼낼때는 객체이름에 .을 붙인다.

여기서 "programmer", "designer" 같은 값들을 key값이라고 부른다.

 

// 객체에 새로운 값을 추가하는 법
coworkers.bookkeeper = "Choi";
// 이름에 공백 넣는 법
coworkers["data scientist"] = "Ko";

 

또 나중에 객체에 새로운 값을 추가하는 것도 가능하다.

만약 이름에 공백을 넣고 싶다면 .대신 [] 괄호를 사용해서 적으면 된다.

 

 

---

객체의 순회(iteration)

배열에서 for문을 사용해 배열에 담긴 각 요소를 가져오는 이런 기능을 순회라고 한다.

객체에 담겨있는 값들을 꺼내올 때는 for in 을 사용한다.

 

for(var key in corworkers) {
	document.wrtie(key+'<br>');
}

// programmer
// designer

 

위 코드는 coworkers라는 객체의 key값을 하나씩 가져와 출력한다.

 

for(var key in corworkers) {
	document.wrtie(key+':'+coworkers[key]+'<br>');
}

// programmer : Kim
// designer : Lee

 

key값을 마치 배열의 인덱스처럼 사용하여 각 key에 해당하는 값을 가져오는 것도 가능하다.

 

---

메소드와 프로퍼티 (Method & Property)

 

객체에는 함수를 담는 것도 가능하다.

위에서 적은 코드를 함수로 만들어보자.

 

coworkers.showAll = function(){
   for(var key in corworkers) {
	   document.wrtie(key+':'+coworkers[key]+'<br>');
   }
}

 

이렇게 나타낼 수도 있지만 corworkers라는 객체의 이름이 변경될 경우 이 코드는 제대로 작동하지 않기 때문에 다음과 같이 고칠 수 있다.

 

coworkers.showAll = function(){
   for(var key in this) {
	   document.wrtie(key+':'+this[key]+'<br>');
   }
}

 

괄호 안의 coworkers를 this로 변경했다. this는 코드가 속한 객체를 가리키기 때문에 문제 없이 프로그램이 실행된다.

 

여기서 객체에 속한 함수를 메소드, 각 객체에 해당하는 변수들(programmer,designer 같은)을 프로퍼티라고 부른다. 맥락에 따라 부르는 말이 달라지는 셈이다.

 

조건문을 사용해서 key가 programmer일때만 출력하도록 만들 수도 있다.

 

coworkers.printProgrammer(){

   for(var key in this){

       if(key === programmer)

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

   }

}

---

객체의 활용

 

var Body = {
   setColor:function(color){
      document.querySelector('body').style.color = color;
   }, //객체의 프로퍼티와 프로퍼티를 구분하는데 콤마가 필요함
   SetBackgroundColor:function(color){
   document.querySelector('body').style.backgroundColor = color;
}

var Links = {
   SetColor:function(color){
      var alist = document.querySelectorAll('a');
       var i = 0;
       while(i < alist.length){
          alist[i].style.color = color;
          i = i + 1;
      }
   }
}


function nightDayHandler(self){
   var target = document.querySelector('body');
   if(self.value === 'night'){
   Body.SetBackgroundColor('black');
   Bod.SetColor('white');
   self.value = 'day';
   
   Links.SetColor('powderblue');
  } else {
    Bod.ySetBackgroundColor('white');
    Body.SetColor('black');
    self.value = 'night';
    
   Links.SetColor('blue');
  } 
}

 

처음의 코드를 객체를 사용해서 정리한 모습이다. Body와 Links라는 객체를 만들고 그 안에 SetColor와 SetBackgroundColor라는 메소드들을 만들었다.

 

※ edwith의 [부스트코스] 자바스크립트의 시작이라는 강의를 듣고 작성했습니다.