Javascript Object Accessors

ECMAScript 5 (2009)는 Getter 및 Setters를 도입했습니다.

Getter 및 Setter를 사용하면 오브젝트 접근자(계산된 프로퍼티)를 정의할 수 있습니다.

다음 예제에서는 lang 속성을 사용하여 language 프로퍼티의 값을 가져옵니다(get).

// Create an object
let person = {
  firstName: "John",
  lastName: "Doe",
  language: "en",
  get lang() {
    return this.language;
  }
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;  // en

다음 예제에서는 lang 속성을 사용하여 language 프로퍼티의 값을 설정합니다( set).

// Create an obejct
let person = {
  firstName: "John",
  lastName: "Doe",
  language: "No",
  set lang(value) {
    this.language = value;
  }
};
console.log(person);  // {firstName: "John", lastName: "Doe", language: "No"}
// Set a property using set:
person.lang = "French";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;  // French
console.log(person);  // {firstName: "John", lastName: "Doe", language: "French"}

다음 2 예제의 차이점은 무엇입니까?

// Create an object;
let person = {
  firstName: "Emile",
  lastName: "Darwin",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object using a method;
document.getElementById("demo").innerHTML = person.fullName();  // Emile Darwin

// Create an object;
let person = {
  firstName: "Emile",
  lastName: "Darwin",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object using a getter;
document.getElementById("demo").innerHTML = person.fullName;  // Emile Darwin

Example 1은 함수: person.fullName()로 fullName에 액세스합니다.

Example 2는 프로퍼티: person.fullName로 fullName에 액세스합니다.

두 번째 예제는 더 간단한 구문을 제공합니다.

JavaScript는 getter 및 setter를 사용할 때 더 좋은 데이터 품질을 보장할 수 있습니다.

다음 예제에서, lang 프로퍼티를 사용하면 대문자로 language 프로퍼티 값을 반환합니다.

// Create an object:
let person = {
  firstName: "Elizabeth",
  lastName: "Taylor",
  language: "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// Display dafta from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;  // EN

다음 예제에서는 lang 프로퍼티를 사용하여 language 속성에 대문자 값을 저장합니다.

// Create an object:
let person = {
  firstName: "Elizabeth",
  lastName: "Taylor",
  language: "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// Set a property using set:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;  // EN

• 더 간단한 구문을 제공합니다.
• 프로퍼티 및 메서드에 대해 동일한 구문을 허용합니다.
• 더 좋은 데이터 품질을 확보할 수 있습니다.
• behind-the-scenes에서 작업하는 데 유용합니다.

Object.defineProperty() 메서드를 사용하여 Getter 및 Setter를 추가할 수도 있습니다:

// Define an object
let obj = { counter: 0 };
 
// Define Setters and Getters
Object.defineProperty(obj, "reset", {
  get: function () { this.counter = 0; }
});
 
Object.defineProperty(obj, "increment", {
  get: function () { this.counter++; }
});
 
Object.defineProperty(obj, "decrement", {
  get: function () { this.counter--; }
});
 
Object.defineProperty(obj, "add", {
  set: function (value) { this.counter += value; }
});
 
Object.defineProperty(obj, "subtract", {
  set: function (value) { this.counter -= value; }
});
 
// Play with counter:
obj.reset;
console.log(obj); // {counter: 0}
 
obj.add = 5;
console.log(obj); // {counter: 5}
 
obj.subtract = 1;
console.log(obj); // {counter: 4}
 
obj.increment;
console.log(obj); // {counter: 5}
 
obj.decrement;
console.log(obj); // {counter: 4}
 
document.getElementById("demo").innerHTML = obj.counter;  // 4