프로퍼티 어트리뷰트

2025년 12월 6일

객체의 속성이 가지는 숨겨진 내부 상태 값

어트리뷰트들은 프로퍼티의 값자체가 아니라, 그 프로퍼티의 동작 방식을 제어하는 설정값들입니다

데이터 프로퍼티

[[Value]] : 프로퍼티의 실제 값
[[Writable]] : (쓰기 가능 여부) true면 값을 수정할수있고, false면 읽기전용
[[Enumerable]] : (열거 가능 여부) true면 for…in 루프나 Object.keys() 등으로 프로퍼티를 나열할 때 포함됩니다
[[Configurable]] : (재정의 가능 여부) true면 해당 프로퍼티를 삭제하거나, [[Writable]], [[Enumerable]], [[Configurable]] 어트리뷰트 자체를 변경할 수 있습니다. false면 삭제나 어트리뷰트 변경이 불가능합니다

접근자 프로퍼티

값 대신 getter setter 함수를 가지는 프로퍼티입니다 프로퍼티에 접근하거나 값을 할당할때 이 함수들이 대신 호출된다

[[Get]]: 프로퍼티를 읽으려고 할 때 호출되는 함수입니다(getter)
[[Set]]: 프로퍼티에 값을 할당하려고 할 때 호출되는 함수입니다. (setter)
[[Enumerable]]: 데이터 프로퍼티와 동일합니다.
[[Configurable]]: 데이터 프로퍼티와 동일합니다.

이러한 내부 어트리뷰트는 .이나 []로 직접 접근이 불가능해서 특별한 메서드를 사용해야한다

어트리뷰트 확인하기 : Object.getOwnPropertyDescriptor() 특정 프로퍼티의 어트리뷰트 객체를 반환한다

1
const person = {
2
  name: 'Lee'
3
};
4

5
// 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
6
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
7
// {value: "Lee", writable: true, enumerable: true, configurable: true}

어트리뷰트 정의/수정하기: Object.defineProperty()

새로운 프로퍼티를 생성하거나 기존 프로퍼티의 어트리뷰트를 변경할 때 사용

예시: 읽기 전용 프로퍼티 만들기

1
const user = {};
2

3
Object.defineProperty(user, 'id', {
4
  value: 1001,
5
  writable: false,  // 쓰기 금지
6
  enumerable: true,
7
  configurable: false // 삭제 및 재정의 금지
8
});
9

10
console.log(user.id); // 1001
11

12
user.id = 1002; // 값을 변경하려고 시도
13
console.log(user.id); // 1001 (값은 변경되지 않습니다. 'use strict' 모드에서는 에러 발생)
14

15
delete user.id; // 삭제 시도
16
console.log(user.id); // 1001 (삭제되지 않습니다.)

예시: 접근자 프로퍼티(getter/setter) 정의하기

1
const person = {
2
  firstName: 'John',
3
  lastName: 'Doe'
4
};
5

6
Object.defineProperty(person, 'fullName', {
7
  // getter 함수: fullName을 읽을 때 호출됨
8
  get: function() {
9
    return `${this.firstName} ${this.lastName}`;
10
  },
11

12
  // setter 함수: fullName에 값을 할당할 때 호출됨
13
  set: function(name) {
14
    const parts = name.split(' ');
15
    this.firstName = parts[0];
16
    this.lastName = parts[1];
17
  },
18

19
  enumerable: true,
20
  configurable: true
21
});
22

23
console.log(person.fullName); // "John Doe" (get 호출)
24

25
person.fullName = 'Jane Smith'; // set 호출
26
console.log(person.firstName); // "Jane"
27
console.log(person.lastName);  // "Smith"

요약 프로퍼티 어트리뷰트는 객체 프로퍼티의 세부동작(쓰기, 열거, 삭제 등)을 제어하기 위한 메타데이터입니다

Object.defineProperty()나 Object.getOwnPropertyDescriptor()를 통해 이 값들을 확인하고 제어할 수 있습니다.