JavaScript - 정적(Static) Method 에 관하여

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는정적 Method 에 관하여 알아보도록 하겠습니다.

Class 에서 사용하는 이 Static method 는 필요에 따라 사용하게 될 상황이 발생 할 겁니다.

이에 대해서 어떠한 용도인지, 어떻게 작성하는지에 대해서 알아보도록 하겠습니다.

 

============

1. Static Method 기본

2. Static Method 사용해보기

============

1. Static Method 기본

Class 내에서 사용하는 Static, 즉 정적 method 는 "Prototype" 이 아니라, Class 자체에서 Method 를 설정하는 것을 나타냅니다.

기초적으로는 아래와 같이 작성하면, 지정한 "method" 는 "정적" method 로 적용됩니다.

기본 작성은 아래와 같이 합니다.

//작성방법

Static [methodName](){
	return function
}

Class Hynn {
	static TestMethod(){
    	console.log('test')
    }
}

위의 예시 문법을 보면, TestMethod 는 Static method, 즉 정적 메소드로 부여가 되었습니다. 

여기서는 "This" 가 뜻하는것이 바뀔 수 있기 때문에 주의가 필요합니다.

이 정적 메소드는, 특정한 객체를 가르키는 것이 아니라, 바로 "Class" 자체를 지칭하고 있습니다.

 

즉 이 Static Method, 정적 메소드는 "Class" 내에 속한 함수를 구현할 때 사용합니다.

 

2. Static Method 사용해보기

 

이 Static method 를 사용하기 위해 간단한 Class 문법을 하나 작성해보도록 하겠습니다.

'use strict';

class CarInfo{
    constructor(model,year,company){
        this.model = model;
        this.year = year;
        this.company = company;
        // console.log('test3', this);
    }

    static getMoney(money,value){
        return money*value
    }

    getDays(date,value){
        return date-value
    }
}

const a = new CarInfo('Morning',2022, "Hyundai");
const result = CarInfo.getMoney(25000,255);
const result2 = CarInfo.getDays(255,20);
console.log('test', a);
console.log('test2', result);
console.log('test3', result2);

위의 코드는 결과적으로 "일부"는 동작하지 않습니다.

바로 result2 가 동작하지 않는 코드입니다. 

 

"getMoney" 와 "getDays" 는 같은 Class 안에 속한 method 이지만, Static 을 지정한 "getMoney" 는 정상적으로 동작이 됩니다.

하지만 "getDays" 는 동작하지 않습니다.

이게 정적 method 와 Instance method 와의 차이라고 보셔야 합니다.  동적(Dynamic) 과 인스턴스(Instance) 는 문맥에 따라 다르기 때문에, Class 에서는 동적이라기보다는, Instance 라고 지칭합니다.

 

여기서 Static 은 정적 method이기때문에, "CarInfo" 라는 이 Class에 속한 method 입니다. 

따라서 CarInfo 내에서 직접 호출을 해야만 getMoney 는 사용이 가능한 method 가 됩니다.

 

하지만 getDays 의 경우 인스턴스 method 이므로, CarInfo 라는 Class 의, Instance 를 호출해야만 사용이 가능합니다.

따라서, 위의 코드 예제에서는 밑에 별도로 선언한 "a" 라는 Instance 에서 "."표기법을 사용해서, 호출해야 사용이 가능해집니다.

위 사항을 적용하면 아래와 같이 변경이 가능합니다.

 

'use strict';

class CarInfo{
    constructor(model,year,company){
        this.model = model;
        this.year = year;
        this.company = company;
        // console.log('test3', this);
    }

    static getMoney(money,value){
        return money*value
    }

    getDays(date,value){
        return date-value
    }
}

const a = new CarInfo('Morning',2022, "Hyundai");
const result = CarInfo.getMoney(25000,255);
const result2 = a.getDays(255,20);
console.log('test', a);
console.log('test2', result);
console.log('test3', result2);

 

위의 사항을 자주 사용하게 되는 "this" 의 개념을 대입해보면,

getMoney method 내에서 this 를 사용하게 될 경우, this 가 가르키는 대상은 "CarInfo" 를 나타냅니다.

하지만 getDays method 에서 "this" 를 사용하게 될 경우,  생성된 "Class" 의 "Instance" 를 지칭합니다.

 

이 차이는 실제 코드를 작성시에 결과물이 바뀌고,  Import/Export 를 하게 될 경우, 예상과 다르게 동작 될 수 있습니다.

정적 method 의 경우, 어떠한 호출을 하더라도, 항상 "Class" 를 지칭하므로, 상황에 따라 적용시 이를 올바르게 작성해야 합니다.

 

왜냐면, 정적 method가 아닌 Instance method 의 경우, Instance Object 를 사용하여 호출하지 않을 경우에는 항상 전역 객체인 

"Window", 를 참조하기 때문에, 의도한 결과와 다른 결과물이 출력될 수 있기 때문입니다.

 

감사합니다