JavaScript 게터 및 세터 소개 👓

JavaScript 개체가 키-값 쌍으로 구성되어 있음을 알고 있으므로 JavaScript 개체가 있다고 가정합니다. 이제 외부에서 객체로 값을 전달해야 하고 그에 따라 객체 값을 변경해야 하는 여러 인스턴스가 있을 수 있으며 객체 외부에서 키 값을 변경하고 싶지 않은 경우도 있을 수 있습니다. 여기에서 JavaScriptGetter 및 Setter가 사용됩니다.

const person = {
  firstName: "John",
  lastName: "Doe"
}

여기서는 firstName 및 lastName 의 두 키-값 쌍이 있는 개체가 있다고 가정합니다. 이제 person의 전체 이름을 표시하려면 아래 표시된 방법 중 하나를 사용할 수 있습니다.

연결 또는 템플릿 리터럴을 사용하여 개체 외부의 전체 이름을 사용할 수 있습니다console.log.

console.log(person.firstName + " " + person.lastName); //John Doe

또는

console.log(`${person.firstName} ${person.lastName}`); //John Doe

코드의 여러 위치에서 전체 이름을 사용하려면console.log 동일한 코드를 여러 번 붙여넣어야 합니다. 우리의 DRY(Don't Repeat Yourself) 규칙에 위배됩니다. 또 다른 방법은 개체에 대한 메서드를 만들고 전체 이름을 얻고 싶을 때마다 메서드를 호출하는 것입니다.

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName () {
      return `${person.firstName} ${person.lastName}` //John Doe
  }
}

이제 메서드를 호출할 수 있습니다.

console.log(person.fullName()); //John Doe

일반적인 함수 호출이 아닌 객체의 속성처럼 메소드를 호출하여 값을 얻고 싶다면 여기서 getter 메소드를 사용해야 합니다. 따라서 코드는

get fullName () {
      return `${person.firstName} ${person.lastName}` //John Doe
  }

메서드 이름 앞의 get 키워드가 중요합니다. 이제 fullName만 사용하여 person.fullName를 호출할 수 있습니다. 끝에 추가 중괄호를 추가할 필요가 없습니다. 또한 이제 외부에서 fullName의 값을 변경할 수 없습니다.



객체 외부에서 fullName를 설정하려고 하면 오류가 발생하지 않고 객체 내부에 설정된 값이 표시됩니다.



개체 외부에서 fullName 값을 전달하고 전달된 firstName 값에 따라 lastName 및 fullName 값을 설정하려고 한다고 가정합니다. person.fullName = "Jane Doe";를 사용하여 초기화하려고 하면 작동하지 않습니다. 여기에 setter 방법이 있습니다. 예를 들어 확인해 보겠습니다.

set fullName (val) {
    const split = val.split(" ");
    this.firstName = split[0];
    this.lastName = split[1]
  }

따라서 val 인수에서 값을 가져온 다음 JavaScriptsplit() 방법을 사용하여 값에 공백이 있는 위치에서 부분으로 분할합니다. split() 메서드는 array 를 반환합니다. array의 첫 번째 요소를 firstName 키에 할당하고 배열의 두 번째 요소를 lastName 키에 할당합니다.



이제 fullName 메서드에 값을 전달하고 그에 따라 firstName 및 lastName 값을 설정할 수 있습니다. 이 get 및 set 메서드는 더 간단하지만 강력한 솔루션이 아닌 여러 기능으로 달성할 수 있습니다.

전체 코드 🚀

const person = {
  firstName: "John",
  lastName: "Doe",
  get fullName () {
      return `${person.firstName} ${person.lastName}`
  },
  set fullName (val) {
    const split = val.split(" ");
    this.firstName = split[0];
    this.lastName = split[1]
  }
}

Getter 및 Setter를 사용하는 이유는 무엇입니까? 🐲

객체 지향 언어에서 중요한 개념은 데이터 은닉입니다. 일반적으로 클래스에는 멤버 노출을 제한하는 public/private와 같은 액세스 한정자가 있습니다. Getter 및 Setter의 가장 중요한 용도 중 하나는 함수를 보다 안전하게 노출하는 것입니다. 예를 들어 get 메서드만 설정하면 멤버의 값은 클래스 외부에서 절대 변경할 수 없습니다.

이에 대해 자세히 알아보려면 이 아름다운 기사here를 확인하십시오.


원래 게시 위치hashnode