[TIL]05.자바스크립트 Class의 Getter,Setter / Static 정적메서드

Class에 Property를 은닉하는 방법, 그리고 정적메서드

현재까지 학습한 내용을 바탕으로 class를 선언하면 다음과 같다.

class Person {
	constructor (name, age) {
    	this.name = name;
        this.age = age;
    }
    
   get name () {
       return this.name;
   }
   
   set name (value) {
   	  this.name = value;
   }
}

Person이란 class를 만들고 생성자로 name, age를 받는다. 여기에 Getter, Setter를 추가했다. 

기존처럼 property에 직접 접근해서 가져오거나 할당하면 되는데 왜 Getter, Setter를 만들어서 만들어서 사용할까????

1. property 세팅되는 값을 원하는 대로 통제하기 위해서이다

// age가 무슨값이든 무족건 할당된다.
// age가 숫자가 아닌값이 올수도 있다!!
set age (value) {
 this.age = value;
}

// 이런식으로 조건을 추가해서 의도하는 값으로 세팅될수 있도록 한다.
// (쉬운 예시를 위해 간단한 조건만 검사했다)
set age (value) {
 if (typeof value === 'Number') this.age = value;
}

2. property 값을 가공하고 일반 property처럼 사용할 수 있게 된다.

// return 할때 프로퍼티를 가공해서 가져갈수 있도록한다.
get name () {
 return `이름은 ${this.name} 이고 나이는 ${this.age} 입니다.`;
}

// 사용할때 일반 프로퍼티를 접근할때처럼 사용가능하다.
person1.name // 결과 => 이름은 홍길동 이고 나이는 20 입니다.

 

그러나 위처럼 사용하면 치명적인 오류가 발생한다.

// Getter, Setter를 호출할때는 메서드 이름으로 호출된다 ex) person.name 하면 getter가 호출됨
class Person {
	constructor (name, age) {
    	this.name = name;
        this.age = age;
    }
    
   get name () {
   	// 프로퍼티 이름과 getter 이름이 같아서 무한루프가 된다.
    // 그래서 프로퍼티 이름을 바꿔준다 관행적으로 _ 를붙힌다.
       return this.name;
   }
   
   set name (value) {
   	  this.name = value;
   }
}

// 수정후
class Person {
	constructor (name, age) {
    	this._name = name;
        this._age = age;
    }
    
   get name () {
       return this._name;
   }
   
   set name (value) {
   	  this._name = value;
   }
}

 

정적 메서드 (Static)

계산기 Class가 있다고 해보자. 우리가 계산기 속 더하기 기능을 사용한다고 했을 때 더하기를 사용하려고 인스턴스화시키는 건 

낭비가 될수도 있다. 정적메서드를 통해 인스턴스화 없이 메서드를 사용해 보자

// 정적메서드가 없으면 인스턴스화 시켜서 사용해야한다.
class Calulator {
  add (a, b) {
    return a + b;
  }
}

const cal1 = new Calulator();
cal1.add(10, 20);


// 정적메서드를 사용해서 add메서드를 구현해보자
class Calulator {
  static add (a, b) {
    return a + b;
  }
}

Calulator.add(10, 20);