[JavaScript] 자바스크립트 | 객체 (Object)

이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다.

 

1. 객체(Object)

객체는 JavaScript에서 관련된 데이터와 기능을 묶어서 관리하는 데이터 타입입니다. 즉, 하나의 개체(Entity)를 표현하는 방식으로, 여러 속성(데이터)과 메서드(기능)를 포함할 수 있습니다.

 

📌 객체는 key: value 형태로 구성되며,

. 또는 [] 표기법으로 접근할 수 있습니다.

const obj1 = {};  // 'object literal' (객체 리터럴) 문법
const obj2 = new Object(); // 'object constructor' (객체 생성자) 문법

객체 리터럴 {} vs 객체 생성자 new Object()

• {} 리터럴 방식이 더 직관적이고 간결하여 일반적으로 많이 사용됨.
• new Object()는 덜 사용되며, 필요할 때만 사용됨.

---

2. 객체의 속성(Property) 접근 방법

const ellie = { name: 'ellie', age: 4 };
console.log(ellie.name); // 'ellie' (점 표기법)
console.log(ellie['name']); // 'ellie' (대괄호 표기법)

 

📌 점 표기법(.) vs 대괄호 표기법([])

• obj.key → 점 표기법 (가독성이 좋고 일반적으로 사용됨)
• obj['key'] → 대괄호 표기법 (동적으로 키를 접근할 때 필요)

• 동적으로 키를 접근? 
  • 변수로 키를 지정하여 동적으로 속성에 접근할 수 있음 → 동적인 속성 접근을 활용하면 함수에서 객체의 키를 변경하거나, 반복문에서 여러 속성을 처리할 때 유용함.

function printValue(obj, key) {
  console.log(obj[key]); // 동적으로 키를 접근
}
printValue(ellie, 'name'); // 'ellie'

---

3. 속성 추가 및 삭제

JavaScript 객체는 동적으로 속성을 추가하거나 삭제할 수 있음.

ellie.hasJob = true; // 속성 추가
console.log(ellie.hasJob); // true

delete ellie.hasJob; // 속성 삭제
console.log(ellie.hasJob); // undefined

📌 동적으로 객체 속성을 조작할 수 있는 것이 JavaScript의 유연한 특징 중 하나!

---

4. 객체 생성 단축 문법 (Shorthand Property Value)

객체 생성 시 키와 값이 동일할 경우, 단축 문법을 사용할 수 있습니다.

const name = 'hoon';
const person1 = { name, age: 2 };

✅ 키와 변수명이 같다면 { name } 처럼 축약 가능!

---

5. 생성자 함수 (Constructor Function)

객체를 생성하는 또 다른 방법으로 생성자 함수(Constructor Function) 를 사용할 수 있습니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person4 = new Person('elile', 30);
console.log(person4); // Person { name: 'elile', age: 30 }

📌 new 키워드를 사용하여 생성자 함수를 호출하면 자동으로 새로운 객체가 생성됨.

---

6. in 연산자로 속성 존재 여부 확인

객체 안에 특정 키가 존재하는지 확인할 때 in 연산자를 사용합니다.

console.log('name' in ellie); // true
console.log('age' in ellie); // true
console.log('random' in ellie); // false

✅ 객체에 해당 키가 존재하면 true, 없으면 false 반환.

---

7. 객체 순회 (for..in vs for..of)

for..in 문 (객체의 키 순회)

console.clear();
for (let key in ellie) {
  console.log(key); // 'name', 'age' 출력
}

for..of 문 (배열의 값 순회)

const array = [1, 2, 4, 5];
for (let value of array) {
  console.log(value); // 1, 2, 4, 5 출력
}

✅ for..in 은 객체의 키를 순회하고, for..of 는 배열의 값을 순회합니다.

---

8. 객체 복사 (Cloning)

얕은 복사 (Shallow Copy)

const user = { name: 'ellie', age: '20' };
const user2 = Object.assign({}, user); // 방법1 
const user3 = {...user}; // 방법2

 

깊은 복사 (Deep Copy) → Object.assign()

// 1. JSON 방식 (단, 함수, Date, undefined 등은 복사 불가)
const user3 = JSON.parse(JSON.stringify(user));

// 2. 구조적 복사 structuredClone (최신 브라우저 지원)
const user4 = structuredClone(user);

복사 방식	중첩 객체 복사	함수/날짜 지원	사용 예시
Object.assign()	❌	✅	얕은 복사
{ ...obj }	❌	✅	얕은 복사
JSON.parse()	✅	❌	깊은 복사 (제한 있음)
structuredClone()	✅	✅	깊은 복사 (권장, 최신)

여러 개의 객체 병합

const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);

console.log(mixed.color); // 'blue' (덮어쓰기 됨)
console.log(mixed.size); // 'big'

같은 속성이 있을 경우, 뒤에 오는 객체의 값이 덮어쓰기 됨.

---

✅ 객체는 key: value 쌍으로 구성되며, 동적으로 속성을 추가/삭제할 수 있음.

✅ 속성 접근 방법: obj.key(점 표기법) / obj['key'](대괄호 표기법).

✅ 객체를 복사할 때 Object.assign()을 사용하면 새로운 객체를 생성 가능!

✅ for..in은 객체의 키를, for..of는 배열의 값을 순회.