[부스트코스] 6. 자바스크립트 기초 (자바스크립트 객체 'JavaScript Object' )

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다.

1. 객체 Object

1) 객체란

자바스크립트에서 객체란, 연관된 함수들을 그룹으로 묶기위해 사용하는 것입니다.

document 또한 객체이고, document로 접근하는 것이 함수입니다.

document.querySelector('body');

• document : object (객체)
• querySelector : object (document)에 정의되어 있는 메서드

 

2) 객체 정의

자바스크립트에서 객체는 중괄호로 정의할 수 있습니다.

객체 Name = { 'key_name' : 'value'};

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

 

객체의 값은 키로 접근할 수 있습니다.

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

 

객체에 데이터를 삽입하기 위해서 아래의 방법을 사용합니다.

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

 

---

2. 객체 순회(조회)

객체의 특정 데이터를 가져오기 위해서는 Key 값으로 가져오면됩니다.

객체의 전체 데이터를 순회하며 조회하기 위해서는 "For in" 구문을 사용합니다.

 

ex) for var key in object

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

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

객체를 순회하며 key값을 조회합니다.

데이터를 함께확인하기 위해서 key값을 이용하여 value에 접근합니다.

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

---

3. 객체 메서드 & 프로퍼티(변수)

1) 객체 프로퍼티

• (2)위와 같은 예시에서 "programmer" 같은 객체의 변수를 프로퍼티라 합니다.

2) 객체 메서드 ( 객체 함수 )

• 객체에는 프로퍼티뿐만 아니라 [함수] 도 추가할 수 있습니다.

[객체에 함수 추가]

객체_이름.함수_이름 = function(){ ~~ 기능 정의 ~~ };

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

 

3) 객체 활용 [ 객체 함수 정의 ]

객체에 함수를 프로퍼티로 지정하여 객체를 완성해봅니다.

var Body = {
  setColor: function (color) {
    document.querySelector('body').style.color = color;
  },
  setBackgroundColor: function (color) {
    document.querySelector('body').style.backgroundColor = color;
  }
}