[자바스크립트의 시작] 8번째: 객체

0. 오늘의 정리

29. 객체 예고
30. 객체(쓰기와 읽기)
31. 객체(순회)
32. 객체(프로퍼티와 메소드)
33. 객체의 활용

1. 객체

반복적인 기능을 수행하는 코드를 정리하기 위해 사용한 것이 함수였습니다. 객체 또한 코드를 정리하기 위해 사용하는 개념입니다. 바로 많은 함수와 변수들을 정리하는데 사용됩니다.
배열은 대괄호를 사용하지만 객체는 중괄호를 이용해서 작성합니다. 그리고 객체는 안에 변수와 함수를 넣을 수 있다고 합니다. 변수는 배열처럼 순서대로 저장되는 것이 아니라 이름과 함께 저장됩니다.
객체를 선언하는 것은 다음 코드와 같이 합니다.

var coworkers= {
 "programmer": "egoing",
 "designer": "leezche"
}; // 객체를 선언한 것입니다.

console.log(coworkers.programmer) // 출력: egoing
console.log(coworkers["programmer"]) // 출력: egoing

var arr = ["egoing", "leezche"] // 배열을 선언한 것입니다.

console.log(arr[0])

2. 프로퍼티

객체 안에 있는 변수를 프로퍼티라고 합니다. 그리고 프로퍼티를 읽거나 새로운 프로퍼티를 추가할 때는 .을 이용하거나 [""]의 형식을 사용합니다. 예시는 다음과 같습니다.

//아래 코드는 읽는 코드입니다.
console.log(coworkers.programmer) // 출력: egoing
console.log(coworkers["programmer"]) // 출력: egoing

//아래 코드는 변수를 추가하는 코드입니다.
coworkers.bookkeeper = "duru";
coworkers["bookkeeper"] = "duru";

console.log(coworkers.bookkeeper) // 출력: duru

3.순회

객체 안에 있는 프로퍼티를 반복적으로 가져올 때 사용하는 문법이 있습니다. 바로 for in입니다. for in을 사용하면 객체 안에 있는 프로퍼티의 개수 만큼 반복하며 프로퍼티를 하나하나 가져와 사용합니다. 예시는 다음과 같습니다.

var coworkers = {
 "programmer": "egoing",
 "designer": "leezche"
};

// coworkers의 프로퍼티를 하나씩 가져와 key 안에 넣어줍니다.
for(var key in coworkers) {
 console.log(key+" ");
}
//출력: egoing leezche 

4. 메소드

객체 안에 선언된 함수는 메소드라고 합니다. 이미 앞서 사용한 코드에서도 객체가 사용되었다는 것을 알 수 있는데요. 바로 console.log()입니다. console객체 안에 있는 log() 함수를 사용한 것입니다. 메소드를 사용하거나 새로운 메소드를 추가하는 것은 프로퍼티에서의 방식과 동일합니다. 그런데 같은 객체 안에 있는 프로퍼티를 사용할 때는 this를 사용합니다. 예시는 다음과 같습니다.

// 아래는 메소드를 추가하는 코드입니다.
coworkers.showAll = function() {
 for (var key in coworkers) {
   document.write(key + ' : ' + coworkers[key] + '<br>');
 }
}
//아래는 coworkers를 대신해 같은 객체를 의미하는 this를 사용한 코드입니다.
coworkers.showAll = function() {
 for (var key in this) {
   document.write(key + ' : ' + this[key] + '<br>');
 }
}

5. 활용

배운 내용은 적용하여 수정한 코드는 다음과 같습니다.

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){
             alist[i].style.color = color;
              i = i + 1;
               }
           }
       }

       function nightdayhandler(self) {
           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');
           }
       }

읽어 주셔서 감사합니다.