객체란

객체는 0개 이상의 프로퍼티(속성,구역)로 구성된 집합이며,
각 프로퍼티는 키(key)와 값(value)으로 이루어져있다.

JavaScript에서는 원시 값을 제외한 함수, 배열, 날짜, 정규표현, 에러, Math, JSON등 거의 모든 요소가 객체이다.

const person = {
name: 'Lee', // 프로퍼티 구역 (name,age = 키)
age : 20 // 프로퍼티 구역 ('Lee',20 = 값)
};

프로퍼티 키는 값에 접근할 때 사용하는 식별자이며 빈 문자열을 포함한 모든 문자열에 사용 가능하다.

프로퍼티 값은 해당 프로퍼티가 가지는 실제 값이며 javaScript의 모든 데이터 타입에 사용 할 수 있다.

하나의 객체에는 여러개의 프로퍼티를 작성할 수 있으며, 각 프로퍼티는 ,로 구분한다.
마지막 프로퍼티 뒤에 쉼표를 생략할 수도 있고, 추가할 수도 있지만 일관된 코드를 위해 생략이 일반적이다.

객체를 생성하는 다른 방법들
1.생성자 함수

const person = new Object();
person.name = 'Lee';
person.age = 20;

console.log(person) // { name: 'Lee', age: 20 } 

new Object를 이용해 person이라는 객체를 먼저 만들어 두고
객체.키 = 값; 을 이용해 객체에 프로퍼티를 추가한다(쉼표를 사용하지 않음).
(person.name = 'Lee';)

2.Object.create() 사용

const basePerson = {

isHuman: true
};

const person = Object.create(basePerson);
person.name = 'Lee';

console.log(person); // { name: 'Lee', isHuman: true } 
console.log(person.isHuman); // true (basePerson으로부터 상속받은 값)

Object.create()를 사용하면 지정한 객체를 프로토타입으로 갖는 새 객체를 생성할 수 있다. (상속)
직접적으로 하나가 여러개를 상속 받을 수는 없지만 간접적인 방법으로 구현할 수 있다.(assign,mixin)

3.동적 프로퍼티 키 사용

const keyName = '성별';
const value = '남성';
const person = {
	// 프로퍼티 키는 name, 프로퍼티 값은 'Lee'
	name: 'Lee',
	// 프로퍼티 키는 age, 프로퍼티 값은 20
	age: 20,

	[keyName]: value
}

console.log(person) // { name: 'Lee', age: 20, 성별: '남성' } 

변수를 활용하여 동적으로 지정할 수 있다.
동적 프로퍼티 크는 나중에 사용자 입력을 활용하거나 프로퍼티 이름을 동적으로 바꿔야 할 때 유용하게 사용 됨.

선언된 객체의 프로퍼티는 프로퍼티 키(key)를 통해 값(value)을 조회할 수 있다.
그 값을 조회하는 방법은 두 가지인데,
1. 마침표.표기법

const person = {

name: 'Lee',
};

console.log(person.name); // Lee

• 가장 간단한 접근 방식으로, (객체.프로퍼티 키)형식으로 사용한다.
  키가 고정되어 있을 때 주로 사용하며, 가독성이 좋아 일반적으로 가장 많이 사용된다.

-변수로 접근 불가능

• 마침표 표기법을 사용할 때의 주의점이 있는데,식별자 규칙을 따르는 경우에만 사용할 수 있다.
  그 규칙으로는 알파벳(A–Z, a–z), 숫자(0–9), 밑줄 ($)만 사용할 수 있고,
  숫자로 시작할 수 있다. 그리고 공백이나 특수문자 (-,%,!등) 사용할 수 없다.
  그리고 또, 예약어는 사용 불가하다.(class,function,let,reture 등)
  이 규칙을 따르지 않는 경우는 반드시 대괄호 표기법을 사용하고 문자열로 작성해야한다.

2. 대괄호[""]표기법

   const person = {
     name: 'Lee',
   };

   console.log(person["name"]); // Lee
   
   const key = "name";
   console.log(person[key]); // Lee
   
   // 문자열로 작성하지 않은 경우
   console.log(person[name]); // ReferenceError: name is not defined

• (객체["프로퍼티 키"])형태로 사용하며,프로퍼티키를 문자열로 작성해야한다.
  이 방식은 변수로 키를 다룰 때 유용하게 사용 된다
  • 문자열로 작성하지 않을경우 오류가 난다 *

-변수로 접근 가능하다(변수 사용 시 큰따옴표 생략 가능)

-HTML,CSS속성을 JavaScript에서 그대로 객체로 표현해야 할때나 API,JSON 응답을 그대로 사용할 때 JavaScript의 식별자 규칙을 따르지 않는 경우도 있기 때문에 대괄호 표기법도 알아야한다.

두 가지 표기법 모두 프로포티 키다 해당 객체에 존재하지 않을 경우 undefined가 출력된다.

객체에서 값을 꺼내는 것만 목적이 아니라, 그 값을 활용해 새로운 정보를 계산하는 것도 객체 사용의 핵심이다.

1.객체 프로퍼티 간 연산.

const student = {

name: '김오즈',
score1: 85,
score2: 92,
};

const total = student.score1 + student.score2;
const average = total / 2;

console.log(`총점: ${total}`);    // 총점: 177
console.log(`평균: ${average}`);  // 평균: 88.5

2. 조건문에서 객체 프로퍼티 사용

   const user = {

   username: 'oz_dev',
   isAdmin: true,
   };

   if (user.isAdmin) {
     console.log('관리자 권한이 있습니다.');
   } else {
     console.log('일반 사용자입니다.');
   }

   예를 들어 위의 코드에서 사용자의 권한이 true인지 확인해 동작을 분기할 수 있다.
   객체의 프로퍼티의 값이 boolean인 경우, 조건문과의 결합니 매우 직관적이고 유용하다.

3. 객체 안의 객체 조회

   const products = {

   itemA: { name: '노트북', price: 1200000 },
   itemB: { name: '마우스', price: 25000 },
   itemC: { name: '모니터', price: 330000 },
   };

   const key = 'itemB';
   const selected = products[key];
   
   console.log(`${selected.name}의 가격은 ${selected.price}원입니다.`);
   // 마우스의 가격은 25000원입니다.

   대괄호 표기법과 변수 사용이 유용한 객체 안에 또 다른 객체가 들어있는 구조다.

• 존재하지 않는 프로퍼티와 연산할 시
  객체에는 없는 값을 불러와 연산에 사용하면 undefined와의 연산이 되어 NaN이 발생할 수 있다.

객체 프로퍼티 조작

객체는 선언 이후에도 자유롭게 구조를 바꿀 수 있다.
이 유연한 구조 덕분에 객체에 프로퍼티를 추가하고 값을 수정하고, 필요할 때 삭제할 수 있다.

프로퍼티의 추가

. 표기법

// . 표기법을 활용한 프로퍼티 추가
const person = {
  name: 'Lee',
}

person.age = 32;  // age 프로퍼티 추가

console.log(person); // {name: "Lee", age: 32}

[]표기법

// [] 표기법을 활용한 프로퍼티 추가
const person = {
  name: 'Lee',
}

person['age'] = 32;  // age 프로퍼티 추가

console.log(person); // {name: "Lee", age: 32}

프로퍼티 값 변경

. 표기법

// . 표기법을 활용한 프로퍼티 값 수정
const person = {
  name: '김오즈',
}

person.name = '박코딩'; // name 프로퍼티 값 수정

console.log(person); // {name: "박코딩"}

[]표기법

// [] 표기법을 활용한 객체 프로퍼티 값 변경
const person = {
  name: '김오즈',
}

 person['name'] = '박코딩'; // name 프로퍼티 값 수정

console.log(person); // {name: "박코딩"}

프로퍼티 키 변경

// 기존 내용 삭제
const person = {
  name: 'Lee',
}
delete person.name;
// 새로운 프로퍼티 추가
person.fullName = 'Lee'; 

console.log(person); // {fullName: "Lee"}

이전 내용을 삭제 후 새로운 프로퍼티를 추가해야 한다.

프로퍼티 삭제

const person = {

name: 'Lee',
age: 32,
}

delete person.age;  // age 프로퍼티 삭제

console.log(person); // {name: "Lee"}

delete 연산자를 사용한다.
. 표현식과 []표현식 모두 사용이가능하며, 존재하지 않는 키를 삭제 하더라도 오류는 발생하지 않는다.
delete는 객체의 프로퍼티에서만 사용해야 하며, 변수 자체나 다른 값에는 사용하지 않습니다.