#14. 자바스크립트(javascript) - getter 와 setter

# 클래스 내부에서 사용되는 get 함수와 set 함수에 대해서 알아보도록 하겠습니다.
# getter :: property를 읽을 때 동작합니다.
# setter :: property에 값을 쓸 때 호출됩니다.

# 비전공자가 이해한 Javascript

 

---

1. Getter와 Setter

getter :: property를 읽을 때 동작합니다.
setter :: property에 값을 쓸 때 호출됩니다.

 

---

 

1) Getter

getter는 어떤 프로퍼티(property)에 접근할 때마다 그 값을 계산하도록 해야 하거나 내부 변수의 상태를 명시적인 함수 호출 없이 보여주고 싶을 때 Javascript의 getter를 이용할 수 있습니다.

바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위를 의미합니다. 예를 들어 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바로 바인딩입니다.

프로퍼티(property)는 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형입니다. 프로퍼티의 읽기와 쓰기는 일반적으로 게터(getter)와 세터(setter) 메소드 호출로 변환됩니다.

 

---

 

2) Setter

자바스크립트에서 setter는 특정한 속성에 값이 변경될 때마다 함수를 실행하는데 사용될 수 있습니다. Setter는 유사 property 타입을 생성하는 getter와 함께 사용됩니다. 

getter와 setter는 class를 사용하는 사용자가 잘못 사용해도 오류를 방어할 수 있도록 할 수 있습니다.
아래 예시에서 확인해보도록 하겠습니다.

 

---

2. 예시

 

---

예시 1.

class User {
  constructor(firstname, lastname, age) {
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age;
  }

  get age() {
    // getter, User.age를 실행할 때 실행되는 코드
    this._age = this._age + 1;
    return this._age;
  }

  set age(value) {
    // setter, User.age = value 를 실행할 때 실행되는 코드
    if (value < 0) {
      throw Error('age can not be negative');
    }
    this._age = value;
  }
}

const user1 = new User('Steve', 'Job', 15);
console.log(user1.age);

위의 코드는 User를 설정하는 코드입니다. 클래스를 호출할 때 firstname, lastname, age를 받습니다. 따라서 처음 클래스를 호출할 때 'Steve', 'Job', 15 순으로 받아 이를 user1에 할당합니다.

그림1

그림1 부분은 class를 정의한 부분입니다. 이 부분은 class를 호출할 때 입력 받을 인자들을 명시합니다.

그림2

그림2는 Getter 부분입니다. 이 부분에서는 입력 받은 인자를 호출할 때마다 age를 1씩 높여주는 부분입니다.
해당 class에서는 console.log(User.age);와 같은 방식으로 호출할 때마다 age를 1씩 높여줍니다.

이 부분에서 _age로 변수명이 바뀐 것을 알 수 있는데, 그 이유에 대해서는 잠시 후 setter 부분을 설명하면서 함께 설명하도록 하겠습니다.

그림3

그림3은 Setter 부분입니다. 이 부분은 User.age = value; 를 실행할 때마다 발생하는 부분입니다. set 함수의 함수명과 동일한 User 클래스의 변수명에 value값이 부여되면 실행됩니다.

set 함수의 함수명이 age이고 User 클래스의 변수명이 age이기 때문에 User.age에 value값이 주어지면 set함수가 실행됩니다. 밑에서부터 얘기하는 "변수명 = set함수의 함수명"과 같은 말이라고 할 수 있습니다.

현재 작성된 그림3의 코드는 User.age = value; 가 실행될 때마다 유효값을 확인합니다. 만약 들어온 value 값이 나이로 사용될 수 없는 음수값이 들어오면 Error를 발생시킵니다.

set함수에서 this._age로 사용하는 이유에 대해 설명드리도록 하겠습니다.

위에서 말씀드린 대로 setter(set 함수)는
클래스명.변수명(set 함수의 함수명) = value;
가 실행될 때마다 실행됩니다.

즉, 처음 class를 호출하면서 age에 대한 인자를 주게 되면 클래스명.변수명 = value; 가 실행되는 겁니다.
아래 그림4와 그림5를 참고하시면 조금 더 쉽게 이해하실 수 있으실겁니다.

그림4

그럼4의 코드는 User 클래스를 호출합니다.
호출하면서 인자를 각각 firstname은 Steve, lastname은 Job, age는 15로 부여했습니다.

그림5

그림4를 풀어 쓰면 그림5 코드와 같은 모습입니다. 즉, 클래스명.변수명 = value; 조건을 충족(user1.age = 15;)하게 됩니다. 그러면 set 함수(set age)가 자동으로 실행됩니다. 여기서 set 함수는 value 값으로 user1.age 값을 자동으로 받아오게 됩니다.

바로 그림6과 같은 모양인 것이죠. 15를 받아 이 15가 0보다 작은지를 확인하고, 0보다 작은 값이면 Error 코드를 호출합니다.

그림6

**여기서 전체 코드와는 다르게 this.age = 15; 로 코드를 적었습니다.
**그 이유는 왜 변수명이 _age로 바뀌게 되었는지 설명 드리기 위함입니다.

15가 0보다 크기 때문에 this.age = 15; 를 실행하게 됩니다. 여기서 사용된 this는 자기 자신을 가리킵니다. 즉, this = user1 또는 this = User인 것이죠.

user1.age = 15; 가 다시 성립되게 됩니다. 결국 다시 set함수를 실행시키고 이것은 무한 루프로 빠져나오지 못하게 됩니다. 그림7과 같은 모양입니다.

그림7

이제 그림8과 같이set에 있는 age를 _age로 변경해보도록 하겠습니다. 다음과 같이 앞에 "_"를 붙임으로써

user1.age = value;
↓
user1._age = value;

로 set age를 호출하지 않도록 했습니다. 이제 그림9와 같이 루프에서 계속 돌지 않고 다음 과정이 진행되도록 했습니다.

그림8

그림9

이로써 set age를 호출하더라도 유효값만 확인하고 루프를 빠져나오도록 했습니다. 만약 마지막 빨간박스의 set age 함수에 있는 user1._age 를 다시 user1.age로 바꿀 경우 다시 무한루프에 빠지게 됩니다.

위의 상태로 아래 코드를 실행해보면 다음과 같은 결과값을 확인하실 수 있습니다.

const user1 = new User('Steve', 'Job', 15);
console.log(user1);

처음 값을 설정할 때 this.age = age;에서 age가 this.age에 할당되지 않고 set 함수가 실행됩니다. set함수 내부에서 this._age = value; (*여기서 value 값은 15 입니다.) 로 할당되기 때문에 결과값이 _age: 15 가 나오게 됩니다.

이후 set함수와 get함수를 호출하면 정상적으로 한번씩 값을 계산하는 것을 확인할 수 있습니다.

---

예시 2.

class player {
  constructor(lastname, middlename, firstname) {
    this.firstname = firstname;
    this.middlename = middlename
    this.lastname = lastname;
  }

  get fullname() {
    return `${this.lastname} ${this.middlename} ${this.firstname}`;
  }

  set fullname(value) {
    [this.lastname, this.middlename, this.firstname] = value.split(" ");
  }
}

const player1 = new player('Monkey', 'D', 'Loopy');
console.log(player1.fullname);

player1.fullname = 'Monkey D Dragon';
console.log(player1.fullname);

해당 코드가 같은 변수명을 썼음에도 예시 1.과는 다르게 무한루프를 돌지 않는 이유는 constructor에서 this.fullname = value; 를 충족하는 코드가 없기 때문입니다.

 

---

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# Javascript Web browser에서 보는 방법: console.log 사용
# MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

 

JavaScript | MDN