js - 재사용성을 높이는 방법

static - 정적 프로퍼티(정적 메서드)

• 프로토타입이 아닌 클래스 함수 자체에도 메서드를 설정할 수 있다. 이런 메서드를 정적(static) 메서드라고 한다.

  즉 정적 메서드는 인스턴스 없이 클래스에서 바로 호출이 가능하고 이런 특성 때문에 유틸리티 함수를 만드는데 유용하게 사용된다.
  정적 메서드를 선언하는 방법은 아주 간단하다. 메서드 앞에 static키워드를 붙여 선언할 수 있다.

• 정적 메서드는 메서드를 프로퍼티 형태로 직접 할당하는 것과 비슷한 역할을 한다. 그렇기 때문에 staticMethod를 호출하면 this는 클래스 생성자인 User자체가 된다. (소유하고 있는 객체)
• 정적 메서드는 어떤 특정한 객체가 아닌 클래스에 속한 함수를 구현하고자 할 때 주로 사용된다.

class Fruit {
  // **정적(클래스) 레벨의 프로퍼티**
  static MAX_FRUITS = 4;

// **인스턴스 레벨의 프로퍼티**
  constructor(name, emoji) {
  this._name = name;
  this._emoji = emoji;
  }

// **정적(클래스) 레벨의 메서드**
  static makeRandomFruit() {
    return new Fruit('banana', '🍌')
  }

// **인스턴스 레벨의 메서드**

  display = () => {
    console.log(`${this._name}: ${this._emoji}`); 
}
}

// 위에 클래스 안에서 프로퍼티는 앞에 static이 붙지 않았으므로 인스턴트 레벨의 속성과 인스턴트레벨의 메서드이므로 클래스 이름 자체로는 접근이 안된다.
// 클래스 자체에는 데이터들이 채워져 있지 않은 상태, 즉 템플릿 상태이기 때문에 이 자체만으로는 호출이 불가능하다.
// 하지만 클래스 내부의 static속성이나 함수에는 고정된 값이 있으므로 클래스 이름으로 접근이 가능하다.

// console.log(Fruit.name); ❌
// Fruit.display(); ❌

클래스 레벨의 함수는 클래스 이름으로 접근이 가능하고, 인스턴스 레벨의 프로퍼티와 함수는 만들어진 인스턴스를 통해서 접근이 가능하다.

static이란 키워드를 붙이면 클래스 레벨로 만들 수 있고 함수 앞에 붙이면 클래스 레벨의 메서드고 속성 앞에 붙으면 클래스레벨의 프로퍼티이다.

//클래스를 이용해서 인스턴스를 찍어낼 수 있는데 이때 동일한 프로퍼티와 메소드가 들어가는데 이것들을 인스턴트 레벨의 프로퍼티와 인스턴트레벨의 메소드라고 한다.
// 
console.clear();
class Character {
  // 1. 생성자
	constructor(name) {
		this.name = name;
		this.level = 1;
		this.job = 'adventurer';
	}
// 2. 프로토타입 메서드
	introduce() {
		console.log('!');
		return `Hello, I'm ${this.name} and my level is ${this.level}!`;
	}
// 3. 정적 메서드
	static complain() {
		return `Oh nam! What is that smell?`;
	}
}

// 프로토타입 메소드는 인스턴스로 호출한다.
const user = new Character('Bongpal');
console.log(user); // output: Character { name: 'Bongpal', level: 1, job: 'adventurer' }
user.introduce(); // output: !
console.log(user.introduce()); /** output: !
                                           Hello, I'm Bongpal and my level is 1! */


// 정적 메소드는 클래스로 호출한다.
console.log(Character.complain()); // output: Oh nam! What is that smell?