객체

객체는 그 대상과 관련된 데이터와 함수의 {집합}이다.

일반적으로 객체는 여러 데이터 & 함수로 이루어지는데, 이들이 객체 안에 있을 때는 보통 프로퍼티 & 메소드 라고 부른다.

---

객체 기본

다른 JS의 요소들과 마찬가지로,
객체의 생성은 변수의 정의와 변수의 초기화로 시작한다.

객체 기본 선언

var person = {};
.
person // 출력결과 : {}
typeof(person) // 출력결과 : 'object'

객체는 { } 중괄호로 정의 한다.

다양한 객체 설계구조
객체는 데이터 : property 와 함수 : method 의 집합이라고 했다. 이 때, 프로퍼티(속성)는 키 : 값의 쌍으로 이루어진다.

property | Key : value 한 쌍

(1) 기본 설계구조

const person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};
.
< 호출 >
person.name 	// 출력결과 : (2) ['Bob','Smith']
person.name[0]	// 출력결과 : 'Bob'
person.age	// : 32
person.interests[1]// : 'music'
person.bio()	// alert : Bob Smith is 32 years old. He likes music and skiing.
person.greeting() // alert : Hi! I'm Bob.

(2) 하위 namespaces : 객체 속의 객체

const person = {
  name: {		// 하위 네임스페이스 객체 속의 객체
    first: 'Bob',
    last: 'Smith'
  },
  age: 32
};

+ 하위 네임스페이스의 호출

(1) 점 표기법

person.name.first // : 'Bob'
person.name.last	// : 'Smith'

(2) 괄호 표기법

person['age'] // : 'Bob'
person.['name']['first']	// : 'Smith'

이 괄호표기 방식은 배열속의 항목에 접근하는 방법과 매우 유사해 보이며 실제로도 기본적으로 동일한 방식이다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신 각 멤버의 값들과 연결된 아름을 이용하는 것.

괄호 표기법에는 엄청난 장점이 존재한다.
단순히 property의 값을 동적으로 변경해주는 것 뿐 아니라
property의 이름 또한 동적으로 할당해 줄 수 있다는 것이다!!
.아래를 보자

var myDataName = 'height';
var myDataValue = '1.75m';
person[myDataName] = myDataValue;
.
console.log(person.height)

• 출력결과 : '1.75m'
  .
  .
  대괄호 내에 변수를 넣어줌으로써 person 객체에 변수 내에 입력된 string인 'height'라는 새로운 이름의 property가 동적으로 할당되었고 그 값 또한 동적으로 myDataValue의 값이 할당되었다.

객체 멤버 설정하기

지금까지는 객체 멤버를 단순히 호출하여 가져오거나 반환만 했다.

지금부터는 설정 멤버를 점 표기법/괄호 표기법을 이용해 간단히 명시하여 객체의 멤버를 설정(갱신) 한다.

이와 같은 방법은 기존의 객체 멤버를 단순히 갱신 할 수 있을 뿐 아니라, 완전히 새로운 멤버를 생성 해줄 수도 있다.

person.age = 45;
person['name']['last'] = 'Cratchit';

person['eyes'] = 'hazel';
person.farewell = function() { alert("Bye everybody!"); }

---

ref :

MDN - Basic Objects : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics