static

class Fruit{
	this.name
	this.emoji
	display(){}
}

let apple = {
	name:'apple',
	uppercase:'APPLE',
	display(){}
}

let orange = {
	name:'orange',
	uppercase:'ORANGE',
	display(){}
}

지금까지 클래스를 정할때의 프로퍼티와 메소드는 인스턴스 레벨의 프로퍼티와 메소드라고 할 수 있습니다.

이말은 클래스를 통해서 만든 인스턴스에 클래스에서 정의한 프로퍼티와 함수들이 중복적으로 만들어집니다.

지금까지는 key의 value가 다르기 때문에 이렇게 해주는게 맞았지만 모든 객체마다 동일하게 참조해야하는 속성이나 행동이 있다면 어떻게 해야할까요?

바로 클래스 레벨의 프로퍼티와 메서드를 사용하면 됩니다.

class Fruit{
	this.name
	this.emoji
	static make(){}
}
let apple = {
	name:'apple',
	uppercase:'APPLE',
}
Fruit.make()
let orange = {
	name:'orange',
	uppercase:'ORANGE',
}
Fruit.make()

이렇게 클래스 안에 static을 프러퍼티나 메서드 앞에 붙일 수 있는데요

static이 붙은 프로퍼티나 메서드는 만들어진 인스턴스에 포함되지 않고 클래스에 그대로 남아있게 됩니다.

그래서 클래스 레벨에 있는 메서드를 통해 호출할 수 있습니다.

class Fruit {
  static MAX_FRUITS = 4
  constructor(name, upercase) {
    this.name = name
    this.upercase = upercase
  }

  // 클래스 레벨의 메서드
  static makeRandomFruit() {
    // 클래스 레벨의 메서드에서는 this를 참조할 수 없음
    // 왜냐하면 클래스 레벨은 아무것도 채워지지않은 템플릿 상태이기 때문
    return new Fruit('banana', 'BANANA')
  }
  // 인스턴스 레벨의 메서드
  display = () => {
    console.log(`${this.name}: ${this.upercase}`)
  }
}

const banana = Fruit.makeRandomFruit()
console.log(banana)

console.log(Fruit.MAX_FRUITS)

const apple = new Fruit('apple', 'APPLE')
const orange = new Fruit('orange', 'ORANGE')
console.log(orange.display) // Fruit { display: [Function: display], name: 'orange', upercase: 'ORANGE'}

만들어진 인스턴스 안에는 display와 upercase, name은 들어있지만 static은 인스턴스 안에 들어있지 않습니다.