본문 바로가기

JavaScript

JavaScript 객체 속성 이해하기

반응형

자바스크립트 객체 프로퍼티란?

객체 프로퍼티는 키와 값 쌍으로 이루어진 정보입니다. 키는 문자열이나 심볼이 될 수 있으며, 값은 어떠한 자료형도 가능합니다. 프로퍼티는 객체의 상태를 나타내며, 그 객체의 특성을 기술합니다.

프로퍼티의 종류

데이터 프로퍼티: 값을 저장하는 일반적인 프로퍼티입니다.
접근자 프로퍼티: get, set을 사용하여 값을 가져오거나 설정하는 프로퍼티입니다.

프로퍼티 접근 방법

점 표기법: 객체.프로퍼티이름
대괄호 표기법: 객체['프로퍼티이름']

예제:

let car = {
brand: 'Toyota',
model: 'Camry',
year: 2020
};

// 점 표기법
console.log(car.brand); // 'Toyota'

// 대괄호 표기법
console.log(car['model']); // 'Camry'

프로퍼티 추가, 수정, 삭제

추가: 존재하지 않는 프로퍼티 이름에 값을 할당하면 새로운 프로퍼티가 생성됩니다.
수정: 이미 있는 프로퍼티에 새로운 값을 할당하면 값이 수정됩니다.
삭제: delete 연산자를 사용해 프로퍼티를 삭제합니다.

예제:


// 프로퍼티 추가
car.color = 'Blue';
console.log(car.color); // 'Blue'

// 프로퍼티 수정
car.year = 2021;
console.log(car.year); // 2021

// 프로퍼티 삭제
delete car.model;
console.log(car.model); // undefined

접근자 프로퍼티 (getter와 setter)

특정 프로퍼티에 대한 접근과 할당을 제어하고 싶을 때 사용합니다.

예제:

let person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(value) {
[this.firstName, this.lastName] = value.split(' ');
}
};

console.log(person.fullName); // 'John Doe'
person.fullName = 'Jane Smith';
console.log(person.firstName); // 'Jane'

중첩 (Nesting)

객체 중첩이란 객체 내부에 또 다른 객체 또는 배열을 포함시키는 것을 의미합니다. 이렇게 하면 복잡한 데이터 구조를 생성할 수 있으며, 현실 세계의 관계를 더 정확하게 모델링 할 수 있습니다.

예제:

let person = {
name: 'John',
address: { // 중첩 객체
city: 'New York',
street: '123 Main St',
coordinates: { // 또 다른 중첩 객체
lat: 40.730610,
lng: -73.935242
}
}
};

중복 (Duplication)

중복은 동일한 구조 또는 값을 여러 위치에 반복하는 것을 의미합니다. 이는 유지보수를 어렵게 만들 수 있으므로 피해야 하는 것이 일반적입니다. 중복을 최소화하면 코드를 더 쉽게 관리하고 오류를 줄일 수 있습니다.

예제:

// 중복된 코드
let address1 = { city: 'New York', street: '123 Main St' };
let address2 = { city: 'New York', street: '123 Main St' };
// ...

// 중복을 피하기 위한 코드
let commonAddress = { city: 'New York', street: '123 Main St' };
let address1 = commonAddress;
let address2 = commonAddress;
// ...

중첩과 중복을 함께 사용하기

때로는 중첩과 중복이 함께 사용될 수 있습니다. 이 경우 중첩된 객체의 일부가 여러 위치에서 중복될 수 있으므로 주의가 필요합니다.

예제:

let commonAddress = { city: 'New York', street: '123 Main St' };

let person1 = {
name: 'John',
address: commonAddress // 중첩과 중복 사용
};

let person2 = {
name: 'Jane',
address: commonAddress // 중첩과 중복 사용
};

반응형