[모던자바스크립트] 객체 프로퍼티 정리

박재윤·2021년 1월 11일
0

자바스크립트

목록 보기
6/11

객체에는 프로퍼티가 저장되는데 사실 값을 제외하고 특별한 세가지 속성이 저장된다.

  1. writable
  2. enumeralbe
  3. configurable

writable

writable 값이 false이면 프로퍼티에 값을 쓰지 못한다.

enumerable

enumerable이 false이면 열거가 불가능하다. 이것이 true이면 for in 문이나 object.keys에 프로퍼티가 나타난다.

configurable

configurable이 false이면

  1. configurable 플래그를 수정할 수 없음
  2. enumerable 플래그를 수정할 수 없음.
  3. writable: false의 값을 true로 바꿀 수 없음(true를 false로 변경하는 것은 가능함).
  4. 접근자 프로퍼티 get/set을 변경할 수 없음(새롭게 만드는 것은 가능함).

getter와 setter

객체의 프로퍼티 종류는 데이터 프로퍼티접근자 프로퍼티로 나누니다.

접근자 프로퍼티는 getter와 setter 메서드로 표현된다.

let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },

  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};

다음과 같이 가상의 프로퍼티를 만들 수도 있다.

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// 주어진 값을 사용해 set fullName이 실행됩니다.
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

getter와 setter를 사용해서 wrapper를 만들면 프로퍼티 값을 원하는대로 활용할 수 있다.

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      console.log("입력하신 값이 너무 짧습니다. 네 글자 이상으로 구성된 이름을 입력하세요.");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete";
console.log(user.name); // Pete

user.name = ""; // 너무 짧은 이름을 할당하려 함

이거를 근데 getter, setter 프로퍼티 안에 그냥 name을 쓰면 안되나?

let user = {
  get name() {
    return this.name;
  },

  set name(value) {
    if (value.length < 4) {
      console.log("입력하신 값이 너무 짧습니다. 네 글자 이상으로 구성된 이름을 입력하세요.");
      return;
    }
    this.name = value;
  }
};

user.name = "Pete";
console.log(user.name); // Pete

user.name = ""; // 너무 짧은 이름을 할당하려 함

안됨 오류남.

0개의 댓글