자바스크립트 게터 및 세터

getter 및 setter는 개체 속성에 액세스하고 캡슐화된 방식으로 개체 속성을 조작하는 데 유용합니다. 이러한 방법을 자세히 살펴보겠습니다.

얻는 사람

get 키워드는 계산된 값을 반환하는 getter 함수를 만드는 데 사용됩니다. 일반 함수와 달리 getter 함수를 호출할 필요가 없습니다. 대신 이름으로 직접 액세스할 수 있습니다.

const person = {
  first_name: 'Peter',
  last_name: 'Parker',
  get full_name() {
      return `${this.first_name} ${this.last_name}`
  }
}

console.log(person.full_name); // Peter Parker

get 키워드는 getter 함수를 동일한 이름의 개체 속성과 바인딩합니다. 이 개체 속성에 액세스하면 getter 함수 결과가 반환됩니다.

개체 속성에 액세스할 때까지 그 값이 계산되지 않는다는 점을 기억하십시오. 즉, getter 함수를 실행하지 않고 반환된 값을 개체 속성에 미리 할당하지 않습니다.

게터를 만들 때 기억해야 할 사항

매개변수가 없어야 합니다.

같은 이름을 가진 다른 데이터 속성이나 getter가 있으면 안 됩니다.

데이터 속성과 마찬가지로 게터도 삭제할 수 있습니다.

const obj = {
  get data() {
      return 'jscurious';
  }
}
delete obj.data;
console.log(obj.data); // undefined

세터

set 키워드는 setter 함수를 만드는 데 사용됩니다. set 키워드는 setter 함수를 동일한 이름의 개체 속성과 바인딩합니다. 따라서 이 개체 속성의 값을 변경하려고 할 때마다 setter 함수가 실행됩니다.

const obj = {
  msg: '',
  set message(value) {
    this.msg = value;
  }
}
obj.message = 'Hello';
console.log(obj.msg); // Hello

세터를 만들 때 기억해야 할 사항

정확히 하나의 매개변수가 있어야 합니다.

같은 이름을 가진 다른 데이터 속성이나 setter가 있으면 안 됩니다. 그러나 getter와 setter는 모두 같은 이름을 가질 수 있습니다.

데이터 속성과 마찬가지로 setter도 삭제할 수 있습니다.

const obj = {
  msg: '',
  set message(value) {
    this.msg = value;
  }
}
delete obj.message;

클래스 내에서 getter 및 setter 사용

캡슐화된 클래스를 하나 만들어 봅시다. 클래스에는 setter 및 getter를 통해서만 액세스할 수 있는 하나의 전용 필드가 있습니다.

class Square {
  #side_value;

  set side(value) {
    this.#side_value = value;
  }
  get side() {
    return this.#side_value;
  }
  get area() {
    return this.#side_value ** 2;
  }
}

const sq = new Square();
sq.side = 25;
console.log(sq.side); // 25
console.log(sq.area); // 625

당신은 또한 좋아할 수 있습니다

JavaScript Set object to store unique values

Generator functions in JavaScript

A brief guide to Object.defineProperty() method

The Vibration API in JavaScript

JavaScript Fetch API to make HTTP requests

Object.freeze() vs Object.seal() vs Object.preventExtensions()

20+ JavaScript shorthand coding tricks

시간 내주셔서 감사합니다 ❤️
웹 개발 블로그jscurious.com에서 내 글을 더 찾아보십시오.