객체란
객체는 여러 데이터를 키-값 쌍으로 구성된 프로퍼티의 집합입니다. 원시형과 달리 객체는 복합적인 정보를 저장할 수 있으므로, 데이터 구조를 표현할 때 유용합니다.
객체 생성 방법
객체 생성자 사용
let user = new Object();
user.name = "Lee";
user.age = 25;
객체 리터널 사용
let user = {
name: "Lee",
age: 25
};
프로퍼티 접근과 수정
프로퍼티 접근
점 표기법
user.name = "Lee";
console.log(user.name); // 출력: Lee
대괄호 표기법
user["name"] = "Lee";
console.log(user["name"]); // 출력: Lee
대괄호 표기법은 키가 공백이나 특수 문자를 포함할 때, 또는 동적으로 키를 사용할 때 유용합니다.
공백의 키 포함
user["likes coffee"] = true;
console.log(user["likes coffee"]); // 출력: true
키 동적 생성
let key = "hobby";
user[key] = "reading";
console.log(user.hobby); // 출력: reading
프로퍼티 삭제
delete 연산자를 사용하여 프로퍼티를 삭제할 수 있습니다.
delete user.age;
console.log(user.age); // 출력: undefined
복잡한 표현식 키 생성
let base = "score";
let student = {
[base + "_math"]: 95,
[base + "_english"]: 88
};
console.log(student.score_math); // 95
console.log(student["score_english"]); // 88
단축 프로퍼티
객체의 프로퍼티 이름과 변수 이름이 동일할 때, 코드를 단축할 수 있습니다.
function createUser(name, age) {
return { name, age };
}
let newUser = createUser("Lee", 35);
console.log(newUser); // { name: "Lee", age: 35 }
객체의 상수
const 키워드로 선언된 객체는 재할당은 불가능하지만 내부 프로퍼티는 수정할 수 있습니다.
const person = { name: "Lee" };
person.name = "soo"; // 가능
// person = {}; // 오류 발생
객체의 구조도 수정할 수 없게 할려면 Object.freeze()를 사용해야 합니다.
const person = {
name: 'Lee',
age: 30
};
// 객체의 속성을 잠급니다.
Object.freeze(person);
// 속성을 추가하려고 하면 에러가 발생합니다.
person.city = 'Seoul';
// 속성의 값을 변경하려고 하면 에러가 발생합니다.
person.age = 31; // TypeError
// 속성을 삭제하려고 하면 에러가 발생합니다.
delete person.age; // TypeError
프로퍼티 존재 여부 확인
in 연산자 활용
let user = {
name: "Lee"
}
console.log("name" in user) // true
console.log("age" in user) // false
객체의 모든 프로퍼티 순회
for...in 반복문을 사용하여 모든 프로퍼티를 순회할 수 있습니다.
let user = {
name: "Lee",
age: 23
}
for (let key in user) {
console.log(`${key}: ${user[key]}`);
}
// name: Lee
// age: 23
객체의 메서드
let calculator = {
add: function(a, b) {
return a + b;
}
};
// 또는
let calculator = {
add(a, b) {
return a + b;
}
};
프로퍼티 정렬 방식
객체 프로퍼티는 기본적으로 추가된 순서대로 순회되지만, 정수 프로퍼티의 경우 내부적으로 오름차순으로 정렬됩니다.
let countryCodes = {
"44": "UK",
"1": "USA",
"49": "Germany",
"41": "Switzerland"
};
for (let code in countryCodes) {
console.log(code);
}
// 출력 결과: 1, 41, 44, 49 (정수형 키로 취급되어 정렬됨)
'JavaScript' 카테고리의 다른 글
[JavaScript] 메서드 호출 시 this 바인딩 규칙 (0) | 2025.02.11 |
---|---|
[JavaScript] 객체 복사하기 (0) | 2025.02.11 |
[JavaScript] 웹 호환성 문제 : 폴리필과 바벨 (1) | 2025.02.11 |
[JavaScript] 화살표 함수 (0) | 2025.02.11 |
[JavaScript] 함수 표현식 (0) | 2025.02.11 |