200921 TIL JS Object Getters and Setters

journey·2020년 9월 21일
0

아래 코드를 살펴보자

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example uses a lang property to get the value of the language property.</p>

<p id="demo"></p>

<script>
// Create an object:
var 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;
</script>

person 이라는 객체 안에 4가지가 담겨져 있다.
firstName, lastName, language, lang.

lang은 get keyword에 의해 선언된 method(객체 안의 함수)이다.
this 객체, person의 language의 value를 출력한다.

syntax: person.lang;

이번에는 setter를 살펴보자.

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example uses a lang property to set the value of the language property.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "NO",
  set lang(value) {
    this.language = value;
  }
};
// Set a property using set:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>

person이라는 객체에 4가지 값이 저장되어 있다.
firstName, lastName, language, lang.

set에 의해 선언된 lang method는 이름이 value인 인자를 1개 가진다.
this 객체, person의 language의 값을 입력되는 인자로 지정한다.

아래 두 경우를 비교해보자.

1. get으로 선언된 method fullName

<h2>JavaScript Object Method</h2>

<p>Object data can be accessed using a getter.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
</script>

2. keyword fullName에 함수가 값으로 지정된 method fullName

<h2>JavaScript Object Method</h2>

<p>Object data can be accessed using property stored as a function.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();
</script>

위의 두 경우 모두, person 객체 안에 fullName이라는 이름의 동일한 기능을 하는 method가 존재한다. 차이점은 syntax의 간결함에 있다. 첫 번째 get으로 선언된 경우, person.fullName;으로써 실행시킬 수 있고, 두 번째의 경우, person.fullName();으로 method를 실행시킬 수 있다.

get, set을 활용한 예시를 살펴보자.

<h2>JavaScript Getters and Setters</h2>

<p>Perfect for creating counters:</p>

<p id="demo"></p>

<script>
// Define an object
var 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;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
document.getElementById("demo").innerHTML = obj.counter;
</script>

참고)W3schools.com

profile
J for Journey

0개의 댓글