[JS] Class(Getter & Setter)

요들레이후·2022년 3월 30일
0

Javascript

목록 보기
4/11
post-thumbnail

드림코딩 by 엘리 : 자바스크립트 기초 강의 (ES5+)

📌 Class

1. Class declarations

class Person {
  constructor(name, age) {
    // fields
    this.name = name;
    this.age = age;
  }

  // methods
  speak() {
    console.log(`${this.name}: hello!`);
  }
}

const hashin = new Person("hashin", 20);
console.log(hashin.name); // hashin
console.log(hashin.age); // 20
hashin.speak(); // hashin: hello!
  • constructor : 생성자, object를 만들 때 필요한 데이터 전달
  • fields : 전달받은 데이터를 class에 존재하는 fields에 할당

2. Getter and Setters

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  get age() {
    return this._age;
  }

  set age(value) {
    this._age = value < 0 ? 0 : value;
  }
}

const user1 = new User("Steve", "Job", -1);
console.log(user1.age); // 0

위의 코드는 User를 설정하는 코드, 클래스를 호출할 때 firstname, lastname, age를 받는다. 처음 클래스를 호출할 때 'Steve', 'Job', -1 순으로 받아 이를 user1에 할당한다.


2-1. Getter

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

바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위를 의미한다. 예를 들어 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바로 바인딩이다.
프로퍼티(property)는 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형이다. 프로퍼티의 읽기와 쓰기는 일반적으로 게터(getter)와 세터(setter) 메소드 호출로 변환된다.

get age() {
    return this._age;
  }

입력 받은 인자를 호출할 때마다 age를 반환해준다.


2-2. Setter

Javascript에서 setter는 특정한 속성에 값이 변경될 때마다 함수를 실행하는데 사용될 수 있다. Setter는 유사 property 타입을 생성하는 getter와 함께 사용된다.
gettersetter는 class를 사용하는 사용자가 잘못 사용해도 오류를 방어할 수 있도록 할 수 있다.

set age(value) {
    this._age = value < 0 ? 0 : value;
  }

User.age = value;를 실행할 때마다 발생하는 부분이다. set함수의 함수명과 동일한 User 클래스의 변수명에 value값이 부여되면 실행된다.
위의 코드는 User.age = value;가 실행될 때마다 유효값을 확인한다. 만약 들어온 value값이 음수이면 0을 반환하고, 양수이면 value를 반환한다.

set함수의 함수명이 age이고 User클래스의 변수명이 age이기 때문에 User.age에 value값이 주어지면 set함수가 실행된다.
setter(set함수)클래스명.변수명(set함수의 변수명) = value;가 실행될 때마다 실행된다.
👉"변수명 = set함수의 함수명"


2-3. this._age 변수명 지정 이유

처음 class를 호출하면서 age에 대한 인자를 주게 되면 클래스명.변수면 = value;가 실행된다.

const user1 = new User("Steve", "Job", -1);

위의 코드는 User클래스를 호출한다. 풀어쓰면 다음과 같다.

user1.firstname = "Steve";
user1.lastname = "Job";
user1.age = -1;

클래스명.변수명 = value;조건을 충족하게 된다. 그러면 set함수(set age)가 자동으로 실행된다. 여기서 set함수는 value값으로 user1.age값을 자동으로 받아오게 된다.

set age(value) {
    this.age = value < 0 ? 0 : value;
  }

여기서 사용된 this는 자기 자신을 가리킨다. 즉, this = user1 또는 this = User인 것이다.

getter를 정의하는 순간, this.age는 메모리에 올라가있는 데이터를 읽어오는 것이 아니라, getter를 호출한다. 마찬가지로 setter를 정의하는 순간 전달된 value를 this.age에 할당할 때 메모리에 값을 업데이트 하는 것이 아니라 setter를 호출하게 된다.

이렇게 되면 user1.age = -1;가 다시 성립되게 된다. 결국 다시 set함수를 실행시키고 이것은 무한 루프로 빠져나오지 못하게 된다.


이것을 방지하기 위해 gettersetter에 사용되는 변수명을 다르게 정의한다.
보통 변수명 앞에 _를 붙이는 것이 관습이다.

참조 : https://axce.tistory.com/59

profile
성공 = 무한도전 + 무한실패

0개의 댓글