프론트엔드/JavaScript

[모던 자바스크립트 Deep Dive] 10장 - 객체

개발찾아 삼만리 2024. 12. 17. 20:14

1. 객체란?

자바스크립트의 객체는 관련된 데이터와 함수의 집합입니다. 객체는 프로퍼티(속성)와 메서드로 구성됩니다.

const person = {
    name: 'Lee',     // 프로퍼티
    age: 20,         // 프로퍼티
    sayHello() {     // 메서드
        console.log(`Hello, I'm ${this.name}`);
    }
};

 


 

2. 객체 생성 방법

2.1 객체 리터럴

가장 일반적이고 간단한 방법입니다.

const obj = {
    property1: 'value1',
    property2: 'value2'
};

2.2 Object 생성자 함수

const obj = new Object();
obj.property1 = 'value1';
obj.property2 = 'value2';

2.3 생성자 함수

여러 유사한 객체를 생성할 때 유용합니다.

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

const person1 = new Person('Lee', 20);

 


 

3. 프로퍼티

3.1 프로퍼티 접근

const person = {
    name: 'Lee'
};

// 두 가지 방법으로 접근 가능
console.log(person.name);      // 마침표 표기법
console.log(person['name']);   // 대괄호 표기법

3.2 프로퍼티 동적 생성 및 삭제

const obj = {};

// 동적 생성
obj.newProp = 'new value';

// 삭제
delete obj.newProp;

 


 

4. 객체 순회

4.1 for...in 문

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

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

4.2 Object.keys, values, entries

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

console.log(Object.keys(person));    // ['name', 'age']
console.log(Object.values(person));  // ['Lee', 20]
console.log(Object.entries(person)); // [['name','Lee'], ['age',20]]

 


 

5. 객체의 중요한 특징

5.1 참조 타입

객체는 참조 타입으로, 변수에는 객체의 메모리 주소가 저장됩니다.

const obj1 = { value: 10 };
const obj2 = obj1;

obj2.value = 20;
console.log(obj1.value); // 20

5.2 얕은 복사와 깊은 복사

// 얕은 복사
const original = { value: 10 };
const shallow = Object.assign({}, original);

// 깊은 복사
const deep = JSON.parse(JSON.stringify(original));

 


 

6. 객체의 변경 방지

6.1 객체 확장 금지

const person = { name: 'Lee' };
Object.preventExtensions(person);
person.age = 20; // 무시됨

6.2 객체 밀봉

const person = { name: 'Lee' };
Object.seal(person);
delete person.name; // 무시됨

6.3 객체 동결

const person = { name: 'Lee' };
Object.freeze(person);
person.name = 'Kim'; // 무시됨

 


 

정리

  • 객체는 자바스크립트에서 가장 기본적인 데이터 구조입니다.
  • `프로퍼티`와 `메서드`로 구성되며, 다양한 방법으로 생성할 수 있습니다.
  • `참조 타입`이므로 복사와 비교 시 주의가 필요합니다.
  • `Object.freeze()`, `Object.seal()` 등으로 객체의 변경을 제한할 수 있습니다.