이제 객체 수업에서 살펴본 내용을 복습하겠습니다.
JavaScript 변수 안에는 다양한 형태의 값을 저장할 수 있습니다. 어떤 경우에는 서로 연관된 값들을 하나로 묶어 저장할 필요가 있습니다. 객체 는 이 때 등장하는 개념입니다.
객체 란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 형식입니다. 객체를 만들기 위해서는 평소처럼 변수를 선언한 다음, 중괄호로 키-값의 속성쌍을 묶어줍니다.
var objectName = { 
  propertyName: propertyValue,
  propertyName: propertyValue,
  ...
};
다음은 윈스턴을 설명하는 객체입니다. 이 객체는 두 개의 프로퍼티 'hometown''hair'를 가지며 각 프로퍼티 값은 문자열입니다.
var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"
};
다음의 객체는 좀 더 복잡한데, '나이', '털색', '좋아하는 것', '생일'의 4가지 프로퍼티를 가지고 고양이에 대해 설명하고 있습니다.
var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, year: 1994}
};
각각의 프로퍼티가 서로 다른 데이터 형식을 저장하고 있습니다. '나이'는 숫자를, '털색'은 문자열을, '좋아하는 것'은 배열을 저장하고 '생일'은 다른 객체를 저장합니다. 객체가 다른 객체를 저장할 수 있다는 것은 객체가 가진 여러 장점 중 하나입니다. 복잡한 데이터를 가지는 객체를 만들 수도 있습니다.
또한 프로퍼티 이름에 큰따옴표를 씌워 객체를 선언할 수 있습니다:
var aboutWinston = {
  "hometown": "Mountain View, CA",
  "hair": "no"
};
이는 앞에서 본 큰따옴표가 없는 것과 비교했을 때 길이 말고는 다를 게 없습니다. 큰따옴표가 꼭 필요한 순간은 프로퍼티 이름에 공백이 있을 때뿐입니다.
var aboutWinston = {
  "his hair": "none"
};
이런 경우에는 큰따옴표를 사용하지 않으면 JavaScript 인터프리터가 혼란스럽게 됩니다. 가장 좋은 방법은 프로퍼티 이름에 공백을 넣지 않는 것입니다. 그러면 프로퍼티 이름에 큰따옴표를 사용할 일도 없죠.

객체 프로퍼티 접근하기

객체 안에 있는 프로퍼티의 값을 확인할 수 없다면 객체는 별로 유용하지 않을 것입니다. 두 가지 방법이 있습니다. 먼저 "dot 표기법"은 변수 이름 뒤에 "." 을 붙이고 프로퍼티 이름을 적는 것입니다.
var aboutWinston = {
  hometown: "Mountain View, CA",
  hair: "no"
};

text("Winston is from " + aboutWinston.hometown, 100, 100);
text("Winston has " + aboutWinston.hair + " hair", 100, 150);
또한 "bracket 표기법"을 이용할 수도 있습니다. 이 표기법은 배열 요소에 접근하는 방법과 비슷합니다. 변수 이름을 쓴 후 따옴표로 묶인 프로퍼티 이름에 대괄호를 씌우면 됩니다.
var hisHometown = aboutWinston["hometown"];
var hisHair = aboutWinston["hair"];
존재하지 않는 프로퍼티에 접근하면 "undefined"라는 메시지가 나타납니다.
text("Winston's life goal is " + aboutWinston.lifeGoal, 100, 150);

객체 프로퍼티 수정하기

변수에 다른 데이터 종류를 저장하는 것과 같이 프로그램 내부에서 dot 표기법이나 bracket 표기법을 이용하여 객체 프로퍼티의 값을 언제든지 변경할 수 있습니다.
aboutWinston.hair = "curly"; // Winston gets a wig!
새로운 프로퍼티를 추가할 수도 있습니다.
aboutWinston.lifeGoal = "teach JavaScript";
프로퍼티를 다 사용했으면 삭제할 수도 있습니다. 그러나 대부분의 경우엔 값을 변경합니다.
delete aboutWinston.hair;

객체의 배열

이제 배열과 객체를 모두 알고있기 때문에 그 둘을 결합하여 객체의 배열을 만들어 봅시다. 실제로 객체의 배열은 데이터를 프로그램에 저장하는 유용한 방법입니다. 예를 들어, cat 배열을 살펴보겠습니다:
var myCats = [
  {name: "Lizzie", 
   age: 18},
  {name: "Daemon",
   age: 1}
];

for (var i = 0; i < myCats.length; i++) {
  var myCat = myCats[i];
  println(myCat.name + ' is ' + myCat.age + ' years old.');
}
객체의 배열을 순회할 때에도 숫자나 문자열의 배열을 순회할 때와 마찬가지로 for 반복문을 사용하는 것을 주목하세요. 각각의 반복에서 bracket 표기법을 사용해서 배열의 현재 요소에 접근하고, dot 표기법을 사용해서 각각의 요소(객체)의 프로퍼티에 접근합니다.
다음은 프로그램에서 사용할 수 있는 실용적인 예제로 좌표위치의 배열입니다:
var positions = [
    {x: 200, y: 100},
    {x: 200, y: 200},
    {x: 200, y: 300}
];

for (var i = 0; i < positions.length; i++) {
    var position = positions[i];
    ellipse(position.x, position.y, 100, 100);
}
깔끔하죠? 객체는 처음엔 혼란스러울 수 있으나 계속 사용하다보면 모든 것을 객체로 만들고 싶어할지도 모릅니다!
로딩 중