[JS][자료형] 객체(Object) 기본

JavaScript 객체(Object) 가이드 🚀

초보자를 위한 쉬운 개념 정리!

JavaScript에서 가장 중요한 개념 중 하나가 객체(Object) 입니다.

이번 글에서는 객체가 무엇인지, 어떻게 사용하는지, 그리고 객체로 무엇을 할 수 있는지 차근차근 설명해보겠습니다.

---

1️⃣ 객체(Object)란 무엇인가?

📌 객체란?

객체(Object)는 데이터를 구조적으로 저장하는 방식으로, 여러 개의 값을 하나로 묶을 수 있습니다.

배열이 순서대로 값들을 저장하는 반면, 객체는 key: value (키-값) 형태로 데이터를 저장합니다.

📌 객체의 기본 구조

const person = {
    name: "홍길동",
    age: 25,
    job: "개발자"
};

• name, age, job → 속성(프로퍼티, Property)
• "홍길동", 25, "개발자" → 값(Value)💡 즉, 객체는 "속성:값" 형태의 데이터 집합!

---

2️⃣ 객체 사용 방법

📌 1. 객체 선언 방법

객체를 선언하는 방법은 여러 가지가 있습니다.

✅ 1) 객체 리터럴 ({}) 사용 (가장 일반적인 방법)

const car = {
    brand: "Tesla",
    model: "Model 3",
    year: 2024
};

✅ 2) new Object() 사용

const car = new Object();
car.brand = "Tesla";
car.model = "Model 3";
car.year = 2024;

💡 추천 방식 → {} 리터럴 방식이 더 간결하고 읽기 쉬움.

---

📌 2. 객체 값(프로퍼티) 접근하기

✅ 1) 점 표기법 (.)

console.log(car.brand); // "Tesla"
console.log(car.year);  // 2024

✅ 2) 대괄호 표기법 ([])

console.log(car["model"]); // "Model 3"

❓ 언제 []을 써야 할까?

• 속성 이름이 공백이 포함되어 있을 때
• 속성 이름이 변수(dynamic) 로 사용될 때

const user = {
    "full name": "John Doe",
    age: 30
};
console.log(user["full name"]); // "John Doe"

---

📌 3. 객체 값 변경하기

car.year = 2025;
console.log(car.year); // 2025

---

📌 4. 객체에 새로운 속성 추가하기

car.color = "Red";
console.log(car);
// { brand: 'Tesla', model: 'Model 3', year: 2025, color: 'Red' }

---

📌 5. 객체 속성 삭제하기

delete car.color;
console.log(car);
// { brand: 'Tesla', model: 'Model 3', year: 2025 }

---

3️⃣ 객체로 할 수 있는 것들

📌 1. 객체 안에 함수(메서드) 추가하기

객체는 속성(Property)뿐만 아니라 함수(Method)도 포함할 수 있습니다.

const person = {
    name: "홍길동",
    age: 25,
    greet: function() {
        console.log(`안녕하세요! 저는 ${this.name}입니다.`);
    }
};
person.greet(); // "안녕하세요! 저는 홍길동입니다."

💡 this는 현재 객체(person)를 가리킴!

---

📌 2. 객체 반복(반복문 사용)

✅ for...in 루프 사용

객체의 모든 속성을 반복할 때 사용합니다.

const user = { name: "Jane", age: 22, job: "Designer" };

for (let key in user) {
    console.log(`${key}: ${user[key]}`);
}

📌 출력

name: Jane
age: 22
job: Designer

---

📌 3. 객체 키 & 값만 가져오기

✅ Object.keys() → 키 배열 반환

console.log(Object.keys(user)); // ["name", "age", "job"]

✅ Object.values() → 값 배열 반환

console.log(Object.values(user)); // ["Jane", 22, "Designer"]

✅ Object.entries() → 키-값 배열 반환

console.log(Object.entries(user)); // [["name", "Jane"], ["age", 22], ["job", "Designer"]]

---

📌 4. 객체 복사 (Spread 연산자)

✅ ... (Spread) 사용

const user1 = { name: "Alex", age: 30 };
const user2 = { ...user1 }; // 복사됨
user2.age = 31;

console.log(user1.age); // 30 (원본 유지)
console.log(user2.age); // 31 (새 객체 변경)

💡 주의:

'='로 객체를 할당하면 참조(reference)가 복사되므로, 원본이 변경될 수 있음.

⇒ 내용을 복사해오는 것이 아닌, 주소값을 복사해오는 것.

---

📌 5. 객체 합치기 (Object.assign())

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 3, c: 4 }

💡 obj2의 b가 obj1의 b를 덮어씁니다.

---

📌 6. 객체 비교하기

객체는 참조 타입이므로 직접 비교하면 false가 나올 수 있습니다.

const a = { name: "Kim" };
const b = { name: "Kim" };

console.log(a === b); // false (메모리 주소가 다름)

❗ 객체의 내용이 같은지 비교하려면 JSON 변환을 활용

console.log(JSON.stringify(a) === JSON.stringify(b)); // true

---

✅ 마무리 & 정리

🎯 객체란?

• Key-Value 구조로 데이터를 저장하는 자료형
• 여러 개의 값을 하나로 묶어 관리 가능

🎯 객체 사용법

✔️ {} 또는 new Object()로 선언

✔️ . 또는 []으로 값 접근

✔️ delete로 속성 제거

✔️ for...in, Object.keys(), Object.values() 활용 가능

✔️ ...spread, Object.assign()으로 복사 및 병합