[JavaScript] 자바스크립트 메서드 (Method) 가볍게 이해하기

메서드(method)란?

때로는 메소드라고 불리기도 하는 메서드는 어떤 객체가 가지고 있는 어떤 동작을 말한다.

언어마다 조금씩 의미가 다르긴 하지만 자바스크립트에서는 일반적으로 객체 안에 프로퍼티로 정의된 함수를 메서드라고 부른다.

 

메서드 만들기

객체 안에 메서드를 만들어 보자. 메서드는 간단하게 [JavaScript] 자바스크립트 객체(Object) 이해하기 - 1에서 정리한 것 처럼 객체를 정의할 때 프로퍼티 값으로 함수를 선언하는 것으로 만들 수 있다.

const bigtop = {
    sayHi: function() {
    	console.log('Hi!?');
    }
};

당연히 화살표 함수로도 정의할 수 있다.

const bigtop = {
  sayHi: () => {
    console.log('Hi!?');
  }
};

혹은 아예 key를 생략하고 function 키워드를 제외한 함수 선언문으로도 메서드를 만들 수도 있다. 

const bigtop = {
  sayHi() {
    console.log('Hi!?');
  }
};

 

그리고, [JavaScript] 자바스크립트 객체(Object) 이해하기 - 2에서 정리한 것 처럼 객체를 정의하고 이후에 프로퍼티 값을 추가하는 식으로도 만들 수 있다.

const bigtop = {};

bigtop.sayHi = function () {
    console.log('Hi!?');
};

화살표 함수로는 아래와 같이 만들 수 있다.

const bigtop = {};

bigtop.sayHi = () => {
    console.log('Hi!?');
}

 

 

메서드 호출

이렇게 만들어진 메서드는 객체의 프로퍼티에 접근하고, 그 뒤에 소괄호를 붙여 메서드를 호출할 수 있다.

const bigtop = {
    sayHi: function() {
    	console.log('Hi!?');
    }
};

bigtop.sayHi(); // Hi!?

만약 소괄호를 붙이지 않으면 메서드를 호출한 게 아니라 그냥 메서드에 접근만 한 것이기 때문에 함수를 선언한 내용이 반환된다.

const bigtop = {
    sayHi: function() {
    	console.log('Hi!?');
    }
};

bigtop.sayHi; // ƒ () { console.log('Hi!?'); }

대괄호 표기법도 마찬가지다. 하지만 대괄호 표기법은 아래 Error로 코멘트 처리한 방식처럼 사용하지 않도록 주의해야 한다.

const bigtop = {
    sayHi: function() {
    	console.log('Hi!?');
    }
};

bigtop["sayHi"](); // Hi!?
bigtop["sayHi"]; // function () { console.log('Hi!?'); }

bigtop["sayHi"()]; // Error
bigtop[sayHi()]; // Error

 

마무리

결국은 함수이지 않냐라고 생각할 수도 있겠지만, 어떤 문법적인 내용들을 설명하거나 때로는 여러 사람들과의 소통을 위해서라도 구분이 가능한 용어들은 명확하게 구분할 필요가 있다. 

이번 포스트에서 정리하진 않았지만, 사실 메서드가 가지는 몇 가지 특징들이 있는데, 그런 부분들은 다음에 정리해야겠다.