[JS] 자바스크립트 객체 프로퍼티 설명자 / 플래그 / 옵서버 패턴

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요

 

프로퍼티 플래그

---

객체는 값(value) 외에도 플래그(flag)라는 특별상 속성이 있다. 플래그는 아래 3가지 종류가 있다. 일반적으로 객체를 선언하면(객체 리터럴 혹은 Object 생성자 함수 사용) 프로퍼티의 플래그는 `true`를 기본값으로 가진다.

	프로퍼티 값 수정	프로퍼티 삭제	반복문 나열	플래그 수정
`writable: false`	❌	✅	✅	✅
`enumerable: false`	✅	✅	❌	✅
`configurable: false`	✅	❌	✅	❌

 

1. writable (수정)
   • `true` : 프로퍼티 값 수정 가능
   • `false` : 프로퍼티 값 수정 불가 (프로퍼티 삭제는 가능)
2. enumerable (열거)
   • `true` : 반복문으로 나열 가능
   • `false` : 반복문으로 나열 불가
3. configurable
   • `true` : 프로퍼티 삭제 / 플래그 수정 가능
   • `false` : 프로퍼티 삭제(프로퍼티 값 수정은 가능) / 플래그 수정 불가

 

프로퍼티 설명자 객체 — Object.getOwnPropertyDescriptor

프로퍼티에 대한 정보는 Object.getOwnPropertyDescriptor 메서드를 이용해 얻을 수 있다. 이 메서드를 호출하면 프로퍼티 설명자(descriptor)라는 객체가 반환된다. 이 설명자 객체에 플래그 정보가 담겨있다.

Object.getOwnPropertyDescriptor(obj, property)

 

const user = { name: 'john', age: 30 };
const descriptor = Object.getOwnPropertyDescriptor(user, 'name');

console.log(descriptor);
// {value: 'john', writable: true, enumerable: true, configurable: true}

 

프로퍼티 / 플래그 정의 및 변경 — Object.defineProperty

객체 리터럴, 객체 복사(Object.assign, 전개연산자)등으로 만든 객체의 모든 플래그 기본값은 `true`
`Object.defineProperty`로 프로퍼티를 추가할 때 명시하지 않은 모든 플래그 기본값은 `false`

 

Object.defineProperty 메서드를 사용하면 객체의 플래그를 변경할 수 있다. 인자로 넘겨받은 정보를 이용해 새로운 프로퍼티를 생성해준다. 이때 플래그 정보를 명시하지 않으면 플래그 값은 자동으로 `false`가 된다.

Object.defineProperty(obj, property, descriptors)

 

const user = {};
Object.defineProperty(user, 'name', {
  value: 'johan',
});

console.log(user); // {name: 'johan'}
console.log(Object.getOwnPropertyDescriptor(user, 'name'));
// {value: 'johan', writable: false, enumerable: false, configurable: false}

 

writable 플래그

writable 플래그를 이용해 객체의 특정 속성의 값을 쓰지 못하도록(non-writable) 할 수 있다. 에러는 엄격 모드("use strict")에서만 발생한다.

const user = { name: 'john' };

Object.defineProperty(user, 'name', {
  writable: false,
});

user.name = 'smith'; // Error: Cannot assign to read only property 'name'
console.log(user); // {name: 'john'}

 

아래는 defineProperty 메서드를 이용해 프로퍼티 값을 직접 할당해준 예시. 위 예제와 동일하다.

const user = Object.defineProperty({}, 'name', {
  value: 'john',
  enumerable: true,
  configurable: true,
});

console.log(user.name); // john
user.name = 'smith'; // Error

 

enumerable 플래그

user 객체에 toString이라는 커스텀 메서드를 추가했다. for in문으로 돌려보면 key 이름이 잘 출력된다. 객체 리터럴로 생성한 객체의 모든 플래그는 true가 기본값이므로 enumerable 플래그도 true이다.

const user = {
  name: 'john',
  toString() {
    return this.name;
  },
};

Object.getOwnPropertyDescriptors(user);
// name: {value: 'john', writable: true, enumerable: true, configurable: true}
// toString: {writable: true, enumerable: true, configurable: true, value: ƒ}

for (const key in user) console.log(key); // name, toString
Object.keys(user); // ['name', 'toString']

 

enumerable 플래그 값을 false로 변경하면 for in문이나 Object.keys() 같은 열거(반복)가 이뤄지는 곳에 사용해도 나타나지 않는다. 아래에선 toString 프로퍼티(key)의 enumerable 플래그 값을 false로 설정했으므로 for in문 및 Object.keys에선 출력되지 않고 있다.

const user = {
  name: 'john',
  toString() {
    return this.name;
  },
};

Object.defineProperty(user, 'toString', {
  enumerable: false,
});

for (const key in user) console.log(key); // name
Object.keys(user); // ['name']

 

configurable 플래그

구성 가능 여부를 설정하는 configurable 플래그는 일부 내장 객체 / 프로퍼티에 false가 기본으로 설정되어 있다. 어떤 프로퍼티에서 configurable 플래그가 false라면 해당 프로퍼티는 삭제할 수 없다. Math 객체의 PI 프로퍼티가 그 예다.

console.log(Object.getOwnPropertyDescriptor(Math, 'PI'));
// {value: 3.141592653589793, writable: false, enumerable: false, configurable: false}
// Math.PI는 쓰기, 열거, 구성이 불가능하다.
// 따라서 Math.PI = 88 처럼 값을 변경하거나 덮어쓰는 것도 불가능하다.

 

configurable: false의 제약사항은 아래와 같다. 특정 프로퍼티의 configurable 플래그를 false로 설정하면 더이상 true로 만들 수 없다. 💡 configurable: false이면 플래그 수정 / 프로퍼티 삭제는 할 수 없지만, 프로퍼티 값은 변경할 수 있다(writable 플래그가 true일때).

 

1. configurable 플래그 수정 불가
2. enumerable 플래그 수정 불가
3. writable: false 값을 true 로 변경 불가(true → false 변경은 가능)
4. 접근자 프로퍼티 get, set 변경 불가(새로 만드는건 가능)

 

const user = { name: 'john', age: 30 };

delete user.age; // true (age 프로퍼티 삭제됨)
Object.defineProperty(user, 'name', { configurable: false });
delete user.name; // false (삭제 불가)
Object.defineProperty(user, 'name', { writable: false }); // true → false로 바꾸는건 가능
Object.defineProperty(user, 'name', { writable: true }); // Error, Cannot redefine property

 

여러 프로퍼티 정의 — Object.defineProperties

Object.defineProperties 메서드로 여러 프로퍼티를 한 번에 정의할 수 있다

Object.defineProperties(obj, descriptors)

 

const user = Object.defineProperties(
  {},
  {
    name: { value: 'john', writable: false },
    age: { value: 30, writable: false },
  },
);

console.log(user); // {name: 'john', age: 30}
user.name = 'smith'; // Error

 

여러 프로퍼티 설명자 조회 — Object.getOwnPropertyDescriptors

Object.getOwnPropertyDescriptors 메서드로 설명자를 모두 가져올 수 있다. defineProperties를 사용해서 객체 복사시 플래그도 함께 복사할 수 있다(반복문을 사용하거나 전개연산자 / Object.assign()을 사용한 객체 복사는 플래그를 복사하지 않는다).

const user = { name: 'john', age: 30 };
const copiedObj = Object.defineProperties(
  {},
  Object.getOwnPropertyDescriptors(user),
);

 

객체 수정을 방지하는 메서드들

---

	`Object.preventExtensions`	`Object.seal`	`Object.freeze`
프로퍼티 추가	❌	❌	❌
프로퍼티 삭제	✅	❌	❌
프로퍼티 수정	✅	✅	❌
적용 여부 확인	`Object.isExtensible`	`Object.isSealed`	`Object.isFrozen`

 

1. `Object.preventExtensions(obj)`
   • 새로운 프로퍼티 추가 방지
   • 적용 여부 확인: `Object.isExtensible(obj)` — 적용 안했으면 `true`
2. `Object.seal(obj)`
   • 새로운 프로퍼티 추가 / 기존 프로퍼티 삭제 방지
   • 프로퍼티 전체에 `configurable: false` 설정하는 것과 동일
   • 적용 여부 확인: `Object.isSealed(obj)` — 적용 안했으면 `false`
3. `Object.freeze(obj)`
   • 새로운 프로퍼티 추가 / 기존 프로퍼티 삭제 및 수정 방지
   • 프로퍼티 전체에 `configurable: false` (삭제), `writable: false`(수정) 설정하는 것과 동일
   • 적용 여부 확인: `Object.isFrozen(obj)` — 적용 안했으면 `false`

 

⭐️ 접근자 프로퍼티와 Object.defineProperty 활용

---

객체 프로퍼티는 ➊데이터 프로퍼티 ➋접근자 프로퍼티 2종류로 나뉜다. 접근자 프로퍼티를 제외한 모든 프로퍼티는 데이터 프로퍼티다. 접근자 프로퍼티는 함수로 볼 수 있으며, 값을 획득(get)하고 설정(set)하는 역할을 담당한다. 외부 코드에선 함수가 아닌 일반 프로퍼티처럼 보인다

 

데이터 프로퍼티의 설명자와 접근자 프로퍼티의 설명자는 다르다. 접근자 프로퍼티엔 value writable 설명자가 없는 대신, get set이라는 함수가 있다. getter, setter 관련 노트는 링크 참고.

 

접근자 프로퍼티는 아래 설명자를 갖는다.

get	인자가 없는 함수. 프로퍼티를 읽을 때 사용
set	인자가 하나인 함수. 프로퍼티 값을 쓸 때 사용
enumerable	데이터 프로퍼티와 동일
configurable	데이터 프로퍼티와 동일

 

defineProperty() 설명자 파라미터에 get set(설명자)를 전달하여 아래처럼 활용할 수 있다.

const user = { firstName: 'Color', lastName: 'Filter' };

Object.defineProperty(user, 'fullName', {
  // get() 함수엔 return 문이 있어야 한다. 메서드 호출이므로 this는 객체(user)
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(value) {
    [this.firstName, this.lastName] = value.split(' ');
  },
});

console.log(user.fullName); // [get] 'Color Filter'
user.fullName = 'Jack Ma'; // [set]
console.log(user.fullName); // [get] 'Jack Ma'

for (const key in user) console.log(key); // 'firstName', 'lastName'

 

❗️ 프로퍼티는 접근자 프로퍼티(get/set)나 데이터 프로퍼티(value)중 한 종류에만 속할 수 있다. 한 프로퍼티에 ➊get 혹은 set과 ➋value를 동시에 설정하면 에러가 발생한다.

// Error: Invalid property descriptor.
// name 프로퍼티에 접근자 프로퍼티(get)와 데이터 프로퍼티(value)를 동시에 설정했으므로 에러 발생
Object.defineProperty({}, 'name', {
  get() {
    return 1;
  },
  value: 1,
});

 

아래처럼 생성자 함수에서 사용할 수도 있다.

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  Object.defineProperty(this, 'age', {
    // 여기서 this는 인스턴스
    get() {
      let todayYear = new Date().getFullYear(); // 2021
      return todayYear - this.birthday.getFullYear();
    },
  });
}

const smith = new User('Smith', new Date(1988, 8, 8));
smith.age; // 33

 

읽기 전용 객체 만들기

---

아래 같은 원본 객체(데이터)가 있을 때, ➊원본 객체 자체를 읽기 전용으로 만들거나, ➋원본 객체를 참조하는 읽기 전용 객체를 별도로 만들수도 있다.

const state = { name: 'johan', age: 30 };

 

원본 객체를 읽기전용 객체로 만들기

Object.defineProperty() 메서드에 플래그 정보를 명시하지 않으면 플래그 값은 모두 false가 된다. 이 방법을 이용해 데이터 프로퍼티(value)를 명시하지 않고 get 설명자(접근자 프로퍼티)만 남기는 방법이다. 데이터 프로퍼티가 없으면 writable 플래그도 존재하지 않게 된다.

Object.keys(state).forEach((key) => {
  const _value = state[key];
  Object.defineProperty(state, key, {
    get() {
      return _value;
    },
  });
});

state; // {} 데이터 프로퍼티(value)가 없으므로 빈 객체로 나옴
state.name; // [get] 'johan'
state.name = 'smith'; // [set] set 설명자가 없으므로 값이 변경되지 않음
state.name; // [get] 'johan'

Object.getOwnPropertyDescriptors(state);
// age: {set: undefined, enumerable: true, configurable: true, get: ƒ}
// name: {set: undefined, enumerable: true, configurable: true, get: ƒ}

 

원본 객체의 writable 플래그를 false로 변경하는 방법도 있다. 프로퍼티 추가/삭제/수정까지 모두 방지하고 싶으면 `Object.freeze()` 를 쓰면 된다.

Object.keys(state).forEach((key) => {
  Object.defineProperty(state, key, {
    writable: false,
  });
});

state; // {name: 'johan', age: 30}
state.name; // [[Get]] 'johan'
state.name = 'smith'; // [[Set]] writable 플래그가 false이므로 값이 변경되지 않음
state.name; // [[Get]] 'johan'

Object.getOwnPropertyDescriptors(state);
// age: {value: 30, writable: false, enumerable: true, configurable: true}
// name: {value: 'johan', writable: false, enumerable: true, configurable: true}

 

원본 객체를 참조하는 읽기 전용 객체 만들기

원본 객체 state를 참조하는 frozenState는 getter 접근자만 있으므로 읽기만 가능하고, 쓰기는 불가하다.

const frozenState = {}; // 읽기 전용으로 만들 객체

Object.keys(state).forEach((key) => {
  Object.defineProperty(frozenState, key, {
    get() {
      return state[key];
    },
  });
});

frozenState; // {} 데이터 프로퍼티(value)가 없으므로 빈 객체로 나옴
frozenState.name; // [get] 'johan'
frozenState.name = 'smith'; // [set] set 설명자가 없으므로 값이 변경되지 않음
frozenState.name; // [get] 'johan'

 

⭐️ 옵서버 패턴

---

옵서버 패턴을 이용해 화면을 렌더링하는 옵서버 함수를 등록하고, 상태의 값이 변경될 때마다 옵서버 함수를 실행하여 리렌더 되도록 할 수 있다. Vanilla JavaScript로 React, Vue 같은 프레임워크를 구현할 때 활용할 수 있는 패턴.

 

기본

Object.defineProperty 메서드를 이용해 객체에 변화가 생길 때 특정 액션을 취하도록 할 수 있다. 아래처럼 이미 존재하는 객체의 값을 조회하거나 변경하는 행동을 getter와 setter가 통제 하도록 하고, 실질적인 값(데이터)는 내부 변수인 _value에 저장된다.

 

아래 코드에서 값이 변경될 때마다 observer 함수가 실행된다. observer는 객체의 값 변경을 감시하는 역할을 하며, 이를 활용해 observer 함수에 다양한 액션을 추가할 수 있다.

 

코드 참고: 개발자 황준일

const state = {
  a: 10,
  b: 20,
};

const stateKeys = Object.keys(state); // ['a', 'b']
const observer = () => console.log(`a + b = ${state.a + state.b}`);

for (const key of stateKeys) {
  let _value = state[key]; // state['a']/['b'] 값을 _value에 할당
  Object.defineProperty(state, key, {
    get() {
      return _value;
    },
    set(value) {
      _value = value;
      observer(); // 값이 변경될 때마다 observer 함수 실행
    },
  });
}

console.log(state.a); // [get] 10
state.a = 100; // [set] a + b = 120
state.b = 200; // [set] a + b = 300

 

다수의 observer 관리

아래 코드의 핵심은 addNum 혹은 subNum 함수를 실행할 때 currentObserver가 실행중인 함수를 참조하도록 만드는 것. `observers`는 Set 자료구조를 사용하므로 중복을 허용하지 않는다. 따라서 프로퍼티 값을 조회할 때 이미 `observers`에 추가했던 함수라면 중복해서 추가되지 않는다.

 

• `state`의 프로퍼티 값을 조회(get)할 때 `currentObserver`가 참조하는 함수를 `observers`에 등록한다.
• `state`의 프로퍼티 값을 변경(set)할 때 `observers`에 등록된 모든 옵서버 함수를 실행한다.

 

코드 참고: 개발자 황준일

let currentObserver = null;

const state = {
  a: 10,
  b: 20,
};

const stateKeys = Object.keys(state);

for (const key of stateKeys) {
  let _value = state[key];
  const observers = new Set();

  Object.defineProperty(state, key, {
    get() {
      if (currentObserver) observers.add(currentObserver); // 옵서버 함수 등록(addNum, subNum)
      return _value;
    },
    set(value) {
      _value = value;
      observers.forEach(observer => observer()); // 옵서버 함수 실행(addNum, subNum)
    },
  });
}

const addNum = () => {
  // 옵서버 함수
  currentObserver = addNum;
  console.log(`a + b = ${state.a + state.b}`);
};

const subNum = () => {
  // 옵서버 함수
  currentObserver = subNum;
  console.log(`a - b = ${state.a - state.b}`);
};

addNum(); // [get] a + b = 30 (값을 조회할 때 addNum 옵서버 함수가 등록됨)
state.a = 100; // [set] a + b = 120 (값이 변경되고, 등록한 옵서버 함수가 실행됨)
subNum(); // [get] a - b = 80 (값을 조회할 때 subNum 옵서버 함수가 등록됨)
state.b = 25; // [set] a + b = 125(addNum 옵서버 함수 실행), a - b = 75(subNum 옵서버 함수 실행)

 

⭐️ 재사용을 위한 함수화

여러 옵서버 함수를 받을 수 있도록 observe 함수를 분리하고, observable 함수는 데이터(상태) 객체를 인자로 받아 값을 조회할 땐 옵서버 함수를 등록하고, 값을 변경할 땐 등록한 옵서버 함수가 실행되도록 한다.

 

• `observe` : 옵서버 함수를 등록하는 역할
• `observable` : 데이터(객체)를 관찰 가능한 상태로 변경하는 역할

 

코드 참고: 개발자 황준일

let currentObserver = null;

const observe = (fn) => {
  currentObserver = fn;
  fn();
  currentObserver = null;
};

const observable = (obj) => {
  Object.keys(obj).forEach((key) => {
    let _value = obj[key];
    const observers = new Set(); // 각 key가 observers(Set 객체)를 하나씩 가진다

    Object.defineProperty(obj, key, {
      get() {
        if (currentObserver) observers.add(currentObserver); // 옵서버 함수 등록
        return _value;
      },

      set(value) {
        _value = value;
        observers.forEach(observer => observer()); // 등록한 옵서버 함수 모두 실행
      },
    });
  });
  return obj;
};

const state = observable({ a: 10, b: 20 }); // 데이터(객체)를 관찰 가능한 상태로 변경
observe(() => console.log(`a + b = ${state.a + state.b}`)); // [get] 옵서버 함수 1 등록
state.a = 100; // [set] a + b = 120(옵서버 함수 1 실행)

observe(() => console.log(`a - b = ${state.a - state.b}`)); // [get] 옵서버 함수 2 등록
state.b = 50; // [set] a + b = 150(옵서버 함수 1 실행), a - b = 50(옵서버 함수 2 실행)

 

1. `observable({ a: 10, b: 20 })`
   객체(데이터)의 모든 프로퍼티를 관찰 가능한 상태로 변경 — 모든 프로퍼티가 `observers` 객체를 가짐
2. `observe(() => console.log(...))`
   • `observe` 함수가 파라미터로 받은 옵서버 함수를 `currentObserver` 변수에 등록
   • 옵서버 함수 실행
     • 옵서버 함수에서 프로퍼티 값을 조회하므로 해당 프로퍼티의 `get()` 메서드 실행
     • `currentObserver` 변수에 옵서버 함수가 등록되어 있으므로 `observers` 객체에 옵서버 등록
     • 프로퍼티 값 반환
   • `currentObserver` 변수 `null`로 변경
3. `state.a = 100`
   • `a` 프로퍼티 값 변경
   • 등록한 옵서버 함수 모두 실행

 

⭐️ Proxy를 사용한 옵서버 패턴

Proxy를 사용하면 observable 함수를 더 깔끔하게 작성할 수 있다.

// ...생략

const observable = (obj) => {
  const observerMap = {}; // { a: Set(...), b: Set(...) } 옵서버 객체

  return new Proxy(obj, {
    get(target, prop) {
      observerMap[prop] = observerMap[prop] || new Set();
      // 모든 prop이 옵서버(Set) 객체를 가진다
      if (currentObserver) observerMap[prop].add(currentObserver);
      return target[prop];
    },
    set(target, prop, value) {
      target[prop] = value;
      observerMap[prop].forEach(fn => fn()); // Set 객체 자체적으로 forEach 메서드를 제공한다
      return true; // set 트랩을 사용할 땐 항상 true(성공) 혹은 false(실패)를 반환해야 한다
    },
  });
};

🔍 Symbol은 변경 불가능한 원시 타입이다. 호출할 때마다 고유한 Symbol 값을 생성한다. `Symbol()` 인자에 넘긴 문자열은 Symbol 생성에 아무런 영향도 주지 않는다(디버깅 용도로만 사용).

 

Proxy를 이용해 전달받은 객체를 관찰 가능하도록(observable) 만들 수 있다. 아래 예제는 객체 프로퍼티 값을 변경할 때마다 `observe` 메서드에 넘긴 콜백을 실행해서 프로퍼티 `key`, `value`(변경후)를 출력한다. 

 

1. `user` 객체에 `observe` 함수 등록 → `obj[handlers]` 배열에 함수 저장
2. `user.name` 값 쓰기 시도
3. `set` 트랩 실행 후 `name` 프로퍼티 값 변경
4. `obj[handlers]` 배열에 저장한 콜백 실행

코드 참고 JavaScript Info

const handlers = Symbol('handlers');

function makeObservable(obj) {
  obj[handlers] = []; // observe 메서드가 받은 handler 함수를 저장할 배열
  obj.observe = (handler) => {
    // 전달 받은 handler 인자 타입이 함수일때만 obj[handlers] 배열에 저장
    if (typeof handler === 'function') obj[handlers].push(handler);
  };

  return new Proxy(obj, {
    // 프로퍼티 값 읽기(get 트랩)도 아래(set 트랩)와 비슷한 방법으로 작성할 수 있다
    set(target, prop, value, receiver) {
      const success = Reflect.set(target, prop, value, receiver); // 타겟 객체에 동작 전달
      if (success) target[handlers].forEach((handler) => handler(prop, value));
      return success; // 프로퍼티 쓰기 성공시 true, 실패시 false
    },
  });
}

const user = makeObservable({});

user.observe((key, value) => console.log(`SET ${key} = ${value}`));
user.name = 'Johan'; // SET name = Johan
user.name = 'Smith'; // SET name = Smith

 

옵서버 함수의 불필요한 실행 방지

옵서버 패턴을 사용하면 값 변화가 일어날 때마다 등록한 옵서버 함수를 모두 실행한다. 만약 옵서버 함수가 렌더링을 수행한다면 옵서버 함수의 불필요한 실행을 줄이는게 유리하다. 아래처럼 값을 쓸 때(set) 새로 입력받은 값이 기존에 있던 값과 동일하다면 옵서버 함수를 실행하지 않도록 해서 최적화할 수 있다.

 

`Object.definedProperty` 사용 시

set(value) {
  if (_value === value) return; // 원시형
  if (JSON.stringify(_value) === JSON.stringify(value)) return; // 참조형
    // ...
},

 

Proxy 사용 시

set(target, prop, value) {
  if (target[prop] === value) return true; // 원시형
  if (JSON.stringify(target[prop]) === JSON.stringify(value)) return true; // 참조형
    // ...
},

 

레퍼런스

---

• 프로퍼티 플래그와 설명자
• Vanilla Javascript로 상태관리 시스템 만들기 | 개발자 황준일