[자바스크립트] 정적 메소드

정적(Static) 메소드

자바스크립트의 메소드를 사용하다보면, 어떤 메소드는 생성한 인스턴스를 통해서 사용하고 어떤 메소드는 클래스 자체를 호출하여 사용을 한다.

// 생성한 인스턴스를 통해 메소드 호출
const arr = [1, 2, 3];
arr.forEach(el => console.log(el));


// 클래스를 통해 메소드 호출
const obj = {
    1 : 'java',
    2 : 'javascript',
    length : 2
}
Array.from(obj);

 

이러한 호출의 차이가 발생하는 이유는, 바로 메소드의 선언 방식의 차이 때문이다. 클래스를 생성할 때, 메소드를 정적(static)으로 선언하게 되면, 클래스 자체에서 메소드를 호출해야 되지만 정적으로 선언하지 않은 메소드는 생성한 객체를 통해 호출해주어야 하기 때문이다.

 

왜 이런 차이가 발생할까? 이를 간단하게 이해하기 위해서는, 정적 메소드는 클래스 선언 시 자기 공간을 바로 할당 받고 그렇지 않은 클래스는 객체 생성 시 자기 공간을 할당 받는 다고 이해하면 된다. 그렇기 때문에 정적 메소드는 생성한 객체의 자신의 공간이 있는 것이 아닌 클래스내에 자신의 공간이 있기 때문에 클래스 자체에서 접근하여 호출할 수 있는 것이다.

 

 

 

정적 메소드 생성

자바스크립트에서 정적 메소드를 생성하기 위해서는 클래스 함수 내에서 static 키워드를 통해 메소드를 선언해주면 된다. (이와 같은 방법으로 프로퍼티도 정적으로 생성할 수 있다.)

 

이 때, 주의 깊게 살펴볼 점은 객체의 구조이다. 일반 메소드를 선언시에 해당 메소드가 어디에 위치하는지 브라우저의 콘솔창을 통해 보면 아래와 같은 결과를 볼 수 있다.

 

위의 예제에서 printInfo 메소드를 정적 메소드로 선언해보겠다.

 

이 전과는 달라진 결과를 볼 수 있는데, 해당 결과의 의미를 간단하게 말하면 person이라는 객체는 class Person의 constructor를 통해 생성된 객체이고 class Person은 printInfo라는 정적 메소드를 가지고 있음을 말한다.

 

이를 통해 알 수 있는 사실은, 정적 메소드로 선언된 메소드는 class 내에 위치하게 되고, 일반 메소드는 객체 내에 위치할 수 있음을 알 수 있다. 그렇기 때문에 정적 메소드는 생성된 객체가 아닌 클래스 자체에서 접근하여 호출하여야 하는 것이다. 

 

해당 방법으로, 위의 예시로 사용하였던 Array.from 메소드를 찾아보면 아래와 같이 constructor가 Array로 명시되어 있고, 그 아래에 from 정적 메소드를 발견할 수 있다. (배열은 Array 클래스의 constructor로 생성되는 것도...)

 

 

 

Static을 사용하는 이유

자바스크립트에서 Static 키워드를 사용하는 이유는 복제가 필요 없는 데이터를 다루기에 효과적이기 때문이다. 코드에서 한 번만 사용되는데 인스턴스를 생성하면 추가적인 데이터 공간이 낭비되기도 하고, 코드 길이가 조금 더 길어진다. 여기서 static을 사용하면 따로 인스턴스를 만들지 않고 메서드를 실행할 수 있기 때문에 데이터 공간의 낭비를 줄이면서 코드도 간결해진다. 

 

 

 

사용 예제

정적 메소드와 클래스의 간단한 사용 예제를 살펴보고 포스팅을 마무리 하겠다.

class Practice {
    // 정적 메소드
    static printStatic() {
        console.log(`정적 메소드 호출됨`)
    }

    // 일반 메소드
    printNormal() {
        console.log(`일반 메소드 호출됨`)
    }
}

const practice = new Practice('kim', 26);

// 잘못된 접근 => 오류 발생!!!
// practice.printStatic(); 
// Practice.printNormal()

// 이렇게 사용
Practice.printStatic();
practice.printNormal();

/*
정적 메소드 호출됨
일반 메소드 호출됨
*/