객체

함수의 종류가 많아지게 되면 함수들끼리 이름이 중복되지 않도록 점점 더 길고 복잡한 이름을 사용해야 한다.
이 때, 객체를 사용하면 이 함수들을 비슷한 것들끼리 그룹을 만들어 묶어줄 수 있다. 이렇게 나누면 다른 그룹끼리는 함수의 이름이 겹쳐도 상관없다.
대표적인 예시가 아래 코드이다.

document.querySelector('body');

document가 객체이고 querySelector가 document 객체에 속해있는 함수이다. 이렇게 객체에 속해 있는 함수를 메소드(Method)라고 한다.

객체 생성

var memberObject = {
  // 원소의 이름 : 원소 값
  manager: 'egoing',
  developer: 'graphittie',
  designer: 'leezhce'
}
//객체에서는 값에 접근할 때 .를 사용합니다.
memberObject.designer = 'leezche';
console.log('memberObject.designer', memberObject.designer);
//[]를 이용해 접근할 수도 있습니다.
console.log("memberObject.['designer']", memberObject['designer']);

객체 수정

var memberObject = {
  // 원소의 이름 : 원소 값
  manager: 'egoing',
  developer: 'graphittie',
  designer: 'leezhce'
} 
memberObject.designer = 'leezhe';

객체 삭제

delete memberObject.manager
console.log('after delete memberObject.manager', memberObject.manager);

결과값이 undefined가 나오는 것을 확인할 수 있다.

객체의 읽기와 쓰기

객체에는 각각의 이름이 있다. 이 이름을 이용하여 값들을 꺼내고 넣는다.

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

객체를 만들 때에는 이처럼 중괄호를 사용한다.
이 요소들을 꺼낼 때에는 다음과 같이 하면 된다.

document.write(coworkers.programmer)
document.write(coworkers["programmer"])

객체에 요소를 추가할 때에는 다음과 같이 하면 된다.

coworker.bookkeeper="duru";
coworkers["bookkeeper"]="duru";

객체의 순회

객체에 있는 모든 값들을 가져오기 위해서는 for in이라는 것을 사용한다.

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

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

객체의 메소드

객체에는 함수도 담을 수 있다.
객체에 담긴 함수, 즉 메소드이다.

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>');
  }
}

constructor

function Person(){
    this.name = 'kim';
    this.first = 10;
    this.second = 20;
    this.third = 30;
    this.sum = function(){ 
        return this.first+this.second+this.third;
    }
}

console.log('Person()', Person());  // undefined
console.log('new Person()', new Person()); // 객체 생성

함수를 그냥 호출하면 일반 함수 취급되지만
new라는 키워드를 붙일 경우 객체를 생성하는 생성자가 됩니다.
생성자를 constructor라고 합니다.

객체를 여러 개 만들 때 각각의 객체가 다른 값을 갖게 하려면 생성자 함수가 실행될 때 입력 값을 주도록 하면 된다.

function Person(name,first,second,third){
    this.name = name;
    this.first = first;
    this.second = second;
    this.third = third;
    this.sum = function(){ 
        return this.first+this.second+this.third;
    }
}

var kim = new Person('kim',10,20,30);
var lee = new Person('lee',10,10,10);