02-1. Object 객체

객체란 ?

• 객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.

  • 객체는 {}(중괄호)로 감싸져 있고,
  • 콜론으로 구분된 이름/값의 쌍들이 쉼표로 분리된 목록의 형태입니다.

01.객체를 만들어 보자..!

let plan1 = {
	name : 'Basic',
	price : 3.99,
	space : 100,
	transfer : 1000,
	pages : 10
};

• 프로퍼티의 이름은 중복 될 수 없다.
• 프로퍼티의 이름과 프로퍼티의 값 사이는 : (콜론)으로 구분한다.
• 프로퍼티를 추가(값까지 다 적고 다음 프로퍼티로 넘어갈 때)할 때는 , (쉼표)를 붙인다.
• 프로퍼티 값에는 어느 값의 type이나 가능하다.

02.객체의 프로퍼티 값을 접근하려면 ?

1. 마침표 . 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 오른쪽에 위치합니다.

2. 대괄호 [] 를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 쌍따옴표 "" 와 함께 대괄호 안에 작성합니다.

   let plan1 = {
   name: 'Basic'
   };

   프로퍼티 값 접근방법
   1. (.) 연산자 사용 : console.log(plan1.name);
   2. ([]) 사용 : console.log(plan1['name']);

03. 접근할 때 마침표가 편하니까 마침표만 쓸까?

• 결론은 아니다! 마침표가 행하지 못하는 것들을 대괄호를 사용하여 접근하는 것이 많기 때문이다.

1. 대괄호 안에는 변수가 들어갈 수 있습니다!

   예제 1)

   let planB = {
   	name : 'first'
   };
   let last = 'name'; //변수 last의 값으로 이름이 같은 'name'할당
   console.log(planB[last]);

   예제 2)

   let person = {
   	name : 'john',
   	age : 22,
   	job : {
   		jobTwo : 'police'
   	}
   	
   }
   	let change = 'job' //값으로 프로퍼티와 동일한 값을 변수에 할당
   
   console.log(person['name']);
   console.log(person.age);
   //[]로 변수를 프로퍼티에 접근이 가능한 예시
   console.log(person[change][change + 'Two']);
   // . 연산자는 변수로 프로퍼티에 접근이 불가
   console.log(person.job.jobTwo);

04. 프로퍼티의 값을 수정하기

/code

let person = {
	name : 'john'
	job : {
		jobTwo : 'police'
	}
}
let chn = 'name'

//1. .으로 접근
console.log(person.name = 'jeon'); //jeon
//2. [] 변수로 접근
console.log(person[chn] = 'john'); // john
//3. 새 값을 추가
console.log(person[chn + '1'] = ['jeon','john']);

혹은 새로운 프로퍼티를 추가할 수도 있습니다.

chn = 'job'; //job key로 변경
person[chn] = [3,6,9]; // job 의 value 값이 [3,6,9]로 변경
console.log(person[chn]);
//배열 요소 가져오기
console.log(person.job[0]); // 3
console.log(person[chn][1]); // 6

05. 많이 사용하는 객체의 구조

let objData = {
  name: 50,
  address: { 
    email: "gaebal@gmail.com",
    home: "위워크 선릉2호점"
  },
  books: {
    year: [2019, 2018, 2006],
    info: [{
      name: "JS Guide",
      price: 9000
    }, {
      name: "HTML Guide",
      price: 19000,
      author: "Kim, gae bal"
    }]
  }

//"HTML Guide" 에 접근해보자
console.log(objData.books.info[1].name)
console.log(objData['books']['info'][1].name)