자바스크립트 static의 모든 것

자바스크립트 Class 실습하다가 문득 static이 무엇인지 궁금해졌습니다. APP 클래스를 만들고, APP 클래스를 시작하기 위해 App.init()을 하는데, 여기에 사용된 static 개념을 정리하는 글을 작성해 봅니다. 

class App {
  static init() { }
}

App.init();

자바스크립트 static

static 키워드는 정적 메서드(static method)나 정적 프로퍼티(ststic property)를 정의하기 위해 사용합니다. static으로 만들어진 메서드, 프로퍼티는 클래스의 인스턴스에서 호출될 수 없고, 클래스 자체에서 호출될 수 있습니다. 

class App {
  static init() {   
    console.log("static init called");
  }
}

//App 인스턴스 생성
const appInstance = new App();
//appInstance.init()을 실행했을 때, init()은 정적 메서드이고,
//appInstance는 APP의 인스턴스이기 때문에 error가 발생합니다. 
// error Uncaught TypeError: appInstance.init is not a function
console.log(appInstance.init()); 

//클래스에서 호출할 때 init() 메서드가 실행됩니다. 
App.init(); //static init called

---

Static을 사용하는 이유

자바스크립트에서 Static 키워드를 사용하는 이유는 복제가 필요 없는 데이터를 다루기에 효과적이기 때문입니다. 위 APP 클래스의 init() 메서드처럼, 코드에서 한 번만 사용되는데 인스턴스를 생성하면 추가적인 데이터 공간이 낭비되기도 하고, 코드 길이가 조금 더 길어집니다. 여기서 static을 사용하면 따로 인스턴스를 만들지 않고 메서드를 실행할 수 있다는 점에서 좋습니다. 

 

---

Static 메서드, 프로퍼티 연습

기본 Class Orange와 Orange를 상속받은 SpainOrange 클래스를 만들어 static을 활용하는 예제를 작성해 보았습니다.

 

Javascript static

class Orange{
  //class 정적 프로퍼티 추가 
 static weight = 100;
 static description ="I'm an Orange";
 //static 메서드 추가 
 static joke(){
  console.log("Orange를 먹은지 얼마나 오랜지");
 } 
}

class SpainOrange extends Orange{
  static location ='spain';
  static joke(){
    super.joke();
    console.log("I'm a spainOrange, Ha, Ha, Ha");
  }
}

//static property 출력 
console.log(Orange.weight); //100
//static method 출력
console.log(Orange.joke()); //Orange를 먹은지 얼마나 오랜지
//static property 출력
console.log(SpainOrange.location); //spain
//static method 출력
console.log(SpainOrange.joke());//Orange를 먹은지 얼마나 오랜지
                                //I'm a spainOrange, Ha, Ha, Ha

const orange = new Orange();
console.log(orange.joke()); //Uncaught TypeError: orange.joke is not a function

orange 인스턴스를 만들어 static 메서드를 호출하면 에러가 발생합니다. 

---

인스턴스 Instance 뜻 

Instance를 네이버 영어 사전에 검색해보면 '사례, 경우'라는 뜻이 나옵니다. 위키백과에서는 '일반적으로 실행 중인 임의의 프로세스, 클래스의 현재 생성된 오브젝트'라고 정의하고요. 즉, 인스턴스는 '클래스(청사진)를 통해 만들어진 객체'를 의미합니다. 위의 예시에서는 orange를 인스턴스라고 말할 수 있어요.