게터 및 세터: 자바스크립트에서 게터 및 세터는 무엇입니까?

소개:

프로그래머는 게터와 세터를 자주 사용하며 코드에서 볼 수 있습니다. 게터와 세터를 이해하는 데 어려움을 겪고 있다면 이해할 수 있도록 설명하겠습니다.
이 기사에서는 게터와 세터가 무엇인지, 그리고 object.defineproperty() 에 대해 살펴보겠습니다.

게터 및 세터란 무엇입니까?

Getter 및 Setter는 값에 액세스하는 데 사용되는 함수입니다.
Getter 및 Setter를 접근자 속성이라고 합니다. JavaScript에는 데이터 속성과 접근자 속성이라는 두 가지 객체 속성이 있습니다.
우리는 일반적으로 개체에서 데이터 속성을 사용합니다. 예를 들어,

const names = {
    myName: 'Ezinne';
};

위의 코드는 데이터 속성의 예입니다. 데이터를 가져오고 console.log가 사용되면 출력을 제공합니다.

게터와 세터는 데이터를 가져올 수 있으며 해당 데이터의 값에 액세스하거나 조작할 수도 있습니다. 사용 사례가 다르기 때문에 서로 다릅니다.

게터는 이름에서 알 수 있듯이 속성 값을 가져올 수 있습니다. 위에서 공유한 예제 코드에서 getter를 사용하여 변수 값myName을 가져올 수 있습니다. 예를 들면 다음과 같습니다.

const  names = {
    myName: 'Ezinne',

    //using get to access the value
    get getmyName() {
        return this.myName;
    }
};
console.log(names.getmyName);

이제 getter 메서드를 기록하는 콘솔을 통해 이름 개체의 값을 검색할 수 있습니다.

참고: getmyName 이외의 다른 이름을 사용할 수 있습니다.

다른 예를 살펴보겠습니다.

const topics = {
    arrays: "reduce",
    objects: "literals",

    get someTopics() {
        return `${this.arrays} ${this.objects}`;
    }
};
console.log(topics.someTopics);

이 예제에서 getter는 두 값을 읽는 데 사용됩니다. 더 많은 값을 추가할 수 있습니다. 그러나 게터가 매개변수를 사용하지 않기 때문에 새 값을 할당할 수 없습니다. 세터가 들어오는 곳입니다.

세터는 단순히 값을 설정하거나 변경할 수 있는 메서드로 정의됩니다. 예상되는 변경 사항인 매개변수를 사용합니다.
첫 번째 예에서 변수myName에 새 이름을 지정하려면 setter를 사용해야 합니다.

const  names = {
  myName: 'Ezinne',
//using get to access the value
get getmyName() {
  return this.myName;
},
//using set to change the value
set changeMyName(newName) {
  this.myName = newName;
 }
};
console.log(names.getmyName);
names.changeMyName = 'Anna';
console.log(names.myName);

Object.Define 속성 정의

getter 및 setter를 추가하는 데 사용되는 속성입니다.

구문은 다음과 같습니다.Object.defineProperty(obj, prop, descriptor)
이전 예제에서 Object.defineProperty를 적용하려면,

const topics = {
  arrays: "reduce",
  objects: "literals",
};

Object.defineProperty(topics, 'someTopics', {
  get () {
    return `${this.arrays} ${this.objects}`;
  },
});

Object.defineProperty(topics, 'otherTopics', {
  set (otherTopics) {
    [this.arrays, this.objects] = otherTopics;
 }
});

console.log(topics.someTopics);
topics.otherTopics = ['variables','symbols'];
console.log(topics.arrays);
console.log(topics.objects);

Object.defineProperty에서 getter를 사용할 때 getTopics와 같은 이름을 사용하지 않고 예제에서 볼 수 있듯이 setter는 매개 변수만 사용합니다.

Object.defineProperty는 세 가지 인수를 사용합니다.
첫 번째 인수는 개체의 이름입니다. 이 예에서는 주제입니다. 두 번째 인수는 someTopics인 속성의 이름이고 세 번째 인수는 설명입니다. 여기에는 이 경우에 사용되는 getter 및 setter가 포함됩니다.

또 다른 예

const game = {
  player1: "dreadking",
  player2: "invincible",
};

Object.defineProperty(game, 'players', {
  get () {
    return `${this.player1} ${this.player2}`
  },
});

Object.defineProperty(game, "new Players", {
  set (newPlayers) {
    [this.player1,this.player2] = [newPlayers];
  }
});

console.log(game.players)
game.newPlayers = ['tigerarrow', 'fiercely'];
console.log(`new player: ${game.player1}`);
console.log(`new player: ${game.player2}`);

이 예제에서는 게터를 사용하여 콘솔에 기록하여 게임에서 플레이어의 이름을 반환하는 간단한 게임 애플리케이션을 작성하고 있습니다. 세터를 사용하여 해당 플레이어의 이름을 변경하고 콘솔에도 기록할 수 있습니다.

Getter와 Setter를 사용하는 이유는 무엇인가요?

getter 및 setter를 사용하여 개체 속성에 액세스합니다.

코드에 더 많은 논리를 추가하려는 경우 getter 및 setter를 사용합니다.

객체 지향 프로그래밍(OOP)에서는 코드의 복잡성을 숨기기 위해 캡슐화에 사용합니다.

결론

이제 getter 및 setter, Object.defineProperty 및 사용 시기를 배웠습니다. 또한 우리의 두뇌가 주제를 이해하는 데 약간의 인지적 노력을 기울일 수 있도록 몇 가지 연습을 했습니다.

읽어주셔서 감사하고 더 많은 배움을 응원합니다