728x90
반응형
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()` 등으로 객체의 변경을 제한할 수 있습니다.
728x90
반응형
'프론트엔드 > JavaScript' 카테고리의 다른 글
[모던 자바스크립트 Deep Dive] 08장 - 제어문 (3) | 2024.12.09 |
---|---|
견고한 JS 소프트웨어 만들기(1) (1) | 2024.12.03 |
[모던 자바스크립트 Deep Dive] 07장 - 연산자 (3) | 2024.11.19 |
[모던 자바스크립트 Deep Dive] 06장 - 데이터 타입 (2) | 2024.11.18 |
디바운스(Debounce), 쓰로틀(Throttle) (0) | 2024.11.17 |