[Javascript] 객체(Object)란?

객체(Object)란?

• 중복된 코드를 함수로 정리하듯, 객체는 서로 연관된 함수와 변수가 많아지면서 이를 정리하기 위해 사용하는 것이다.

// 링크 색상 변경 함수 
function setColor(color){
   let alist = document.querySelectorAll('a');
   let i = 0;
    while(i < alist.length) {
      alist[i].style.color = color;
      i = i + 1;
    }
}

// body 글씨 색상 변경 함수
function BodySetColor(color){
   document.querySelector('body').style.color = color;
}

// body 배경색 변경 함수
function BodySetBackgroundColor((color){
  document.querySelector('body').style.backgroundColor = color;
}

• 함수의 종류가 많아지게 되면, 이 함수들끼리 이름이 중복되지 않도록 하기 위해 복잡한 이름을 사용하게된다.
• 이때, 객체를 사용하게 되면 비슷한 함수들끼리 그룹으로 묶어서 만들어 줄 수 있다.

document.querySelector('body');

• 위와 같은 코드가 바로 객체를 사용한 모습이다.
• document가 바로 객체이고, querySelector가 객체에 속해있는 함수이다.
• 그리고 객체에 속해 있는 함수들을 메소드(Method) 라고 한다. (객체에 속해 있는 변수는 프로퍼티라고 한다.)

객체 쓰기와 읽기

• 배열이 순서에 따라 정보를 정리한다면, 객체는 순서 없이 정보를 저장한다.
• 객체는 순서가 없는 대신 각각에 이름이 붙어있다.

객체 문법

let coworkers = {
   "programmer" : "egoing",
   "designer" : "leezche"
}

• 객체를 만들 때에는 배열과 달리 중괄호를 사용한다. (배열은 대괄호)
• 각 요소들은 각각 이름(programmer)과 값(egoing)으로 이루어져 있다.

객체 사용

coworkers.programmer
coworkers["programmer"] // 이름에 공백이 있을 때 

//결과
// 'egoing'
// 'egoing'

• coworkers라는 객체 안에서 programmer이라는 이름을 가진 값을 가져와서 출력한다.

객체 추가

coworkers.bookkeeper = "duru";
coworkers["bookkeeper"] = "duru"; // 이름에 공백이 있을 때

//결과
//coworkers {programmer: 'egoing', designer: 'leezche', bookkeeper: 'duru'}

• coworkers라는 객체 안에 bookkeeper라는 이름으로 duru값을 넣어준 것이다.

객체 순회

• 객체에 있는 모든 값들을 가져오는 기능을 순회(iteration) 라고 부른다.
• 배열에서는 for문(반복문)을 사용했고, 객체에서는 for in이라는 것을 사용한다.
  
  

객체 이름 출력

let coworkers = {
   "programmer": "egoing",
   "designer": "leezche"
}

for(let key in coworkers){
   console.log(key);
}

//결과
// programmer
// designer

객체 이름에 해당하는 값 출력

let coworkers = {
   "programmer": "egoing",
   "designer": "leezche"
}

for(let key in coworkers){
   console.log(coworkers[key]);
}

//결과
// egoing
// leezche

객체 프로퍼티와 메소드

• 메소드 : 객체에 속해있는 함수
• 프로퍼티 : 객체에 속해있는 변수

메소드 추가

let coworkers = {
   "programmer": "egoing",
   "designer": "leezche"
}

coworkers.showAll = () =>{
   for(let key in coworkers){
      console.log(key + ':' + coworkers[key]);
   }
}

//결과
//programmer:egoing
//designer:leezche

• 위 방법은 coworkers라는 변수 이름이 바뀌면, 함수를 수정해야하기 때문에 좋은 방법은 아니다.
• 변수가 바뀌더라고 함수 수정이 없도록 하기 위해 this를 사용한다.
• this는 메소드가 쓰인 객체를 가리킨다.

this를 사용한 메소드 추가

let coworkers = {
   "programmer": "egoing",
   "designer": "leezche"
}

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

//결과
//programmer:egoing
//designer:leezche

• 위에서 객체에 해당하는 함수인 메소드는 showAll이고, 객체에 해당하는 변수인 프로퍼티는 coworkers.programmer에서 programmer이 해당된다.

객체의 활용

• 처음에 객체는 서로 연관된 변수나 함수가 많아지면서 이를 정리하기 위해 사용하는 것이라고 했다.
• 이제는 이름이 겹치지 않도록 복잡하고 긴 이름의 함수들을 객체를 활용하여 정리 할 수 있다.

객체 활용 전

// 링크 색상 변경 함수 
function setColor(color){
   let alist = document.querySelectorAll('a');
   let i = 0;
    while(i < alist.length) {
      alist[i].style.color = color;
      i = i + 1;
    }
}

// body 글씨 색상 변경 함수
function BodySetColor(color){
   document.querySelector('body').style.color = color;
}

// body 배경색 변경 함수
function BodySetBackgroundColor((color){
  document.querySelector('body').style.backgroundColor = color;
}

객체 활용

// Body 객체
let Body = {
   setColor : (color) => {
     document.querySelector('body').style.color = color;
   },
   setBackgroundColor : (color) => {
      document.querySelector('body').style.backgroundColor = color;
   }
}

// Links 객체
let Links = {
   setColor : (color) => {
        let alist = document.querySelectorAll('a');
         let i = 0;
          while(i < alist.length) {
            alist[i].style.color = color;
            i = i + 1;
          }
   }
}

• 이렇게 만들면 비슷한 함수들끼리 묶어서 관리할 수 있다.
• 또 Body와 Links에 모두 setColor라는 함수(메소드)가 존재하지만, 서로 다른 객체이기 때문에 이름이 동일해도 상관없다.

Body.setColor('black');
Links.setColor('black');