자바스크립트에서 static 메서드 내부에 객체를 직접 사용하려고 하면 기대한 결과를 얻을 수 없습니다. 하지만 객체를 매개변수(parameter)로 전달하면 정상적으로 접근할 수 있습니다. 지금부터 그 이유와 해결 방법을 간단히 살펴보겠습니다.
static 메서드의 특징
static 키워드로 선언된 메서드는 클래스의 개별 인스턴스가 아니라 클래스 자체에 속합니다. 따라서 생성된 객체를 통해 호출할 수 없으며, 반드시 Company.comp()처럼 클래스 이름을 통해 호출해야 합니다. 이 특성을 이해하면 아래 두 예제의 차이를 쉽게 파악할 수 있습니다.
예제 1 – 잘못된 사용법
아래 예제에서는 객체 "myComp"를 매개변수로 전달하지 않고 인스턴스를 통해 직접 호출하고 있습니다. 이 경우 어떤 결과도 얻지 못하며, 브라우저 콘솔을 열어보면 "myComp.comp() is not a function"이라는 오류가 표시됩니다. 인스턴스에는 static 메서드가 존재하지 않기 때문입니다. 실제 결과를 얻으려면 예제 2에서 보여주듯이 객체를 매개변수로 전달해야 합니다.
<html>
<body>
<p id="method"></p>
<script>
class Company {
constructor(branch) {
this.name = branch;
}
static comp() {
return "Tutorix is the best e-learning platform"
}
}
myComp = new Company("Tesla");
document.getElementById("method").innerHTML = myComp.comp();
</script>
</body>
</html>예제 2 – 올바른 사용법
다음 예제에서는 객체를 매개변수로 전달하고, static 메서드를 클래스 이름(Company.comp())으로 호출합니다. 이렇게 하면 static 메서드 내부에서 전달받은 객체의 속성(val.name)에 정상적으로 접근할 수 있으며, 아래 출력과 같은 결과를 얻게 됩니다.
<html>
<body>
<p id="method"></p>
<script>
class Company {
constructor(branch) {
this.name = branch;
}
static comp(val) {
return "Elon musk is the head of " + val.name
}
}
myComp = new Company("Tesla");
document.getElementById("method").innerHTML = Company.comp(myComp);
</script>
</body>
</html>출력
Elon musk is the head of Tesla