📌 class레벨에서는 접근❌

class Fruits {
	constructor(name, color){
		this.name = name;
		this.color = color;
	}
	display = () => {
		console.log(`${this.name}: ${this.color}`);
	};
} 

const apple = new Fruit("apple", "red");
const orange = new Fruit("orange", "orange");

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

• class 이름으로는 접근이 불가능하다. (class 레벨)
• class 자체에서는 아직 data들이 채워져있지 않은 template 상태이다.(내용 없이 “틀”만 있는 상태)
• 인스턴스 레벨의 프로퍼티 또는 매소드는 반드시 “생성된 인스턴스”를 통해서 접근과 호출이 가능하다.

📌static

class Fruits {
	static MAX_FRUITS = 100;
	constructor(name, color){
		this.name = name;
		this.color = color;
	}
	static makeRandomFruits() {
    return new Fruit("melon", "green");
    //새로운 object를 만들어서 반환하는 함수
  }
	display = () => {
		console.log(`${this.name}: ${this.color}`);
	};
} 

console.log(Fruits.MAX_FRUITS); //100

const melon = Fruits.makeRandomFruits();
console.log(melon);
//Fruit { display: [Function: display], name: 'melon', color: 'green' }

🚩 만들어진 object에서 호출하는 것이 아니라, class이름으로 바로 사용할 수 있다.

✏ static MAX_FRUITS

• 프로퍼티에서도 static을 사용할 수 있다.

✏ static makeRandomFruits()

• 공통적으로 사용할 수 있고, 만들어진 인스턴스를 참조할 필요가 없는 경우라면, “static”으로 만들 수 있다.
• 클래스 레벨의 매소드
• 클래스 레벨의 매소드의 경우, 주어진 data가 정해져있지 않은 상태이기 때문에(=template) this를 참조할 수 없다.

✏ display = () =>

• 만들어진 object의 주어진 data를 접근해서 무언가를 출력하는 매소드이므로(=this.name, =this.color) “인스턴스 레벨”로 남겨두는 것이 맞다.