JavaScript
에서의 함수와 메서드는 비슷해 보이지만 다른 개념이다.
따라서, 이번 포스팅에서는 JavaScript에서 함수와 메서드의 차이를 알아보자.
함수(Function) | 메서드(Method) |
---|---|
함수는 특정 작업을 수행하기 위해 설계된 기능입니다. | 메서드는 객체의 프로퍼티가 함수인 경우입니다. |
함수는 직접 호출할 수 있습니다. | 메서드는 점 표기법 또는 대괄호 표기법을 사용하여 호출할 수 있습니다. |
재사용 가능합니다. | 함수에 비해 재사용하기 어렵습니다. |
함수는 자체적으로 존재합니다. | 메서드는 객체와 연결되어 있습니다. |
함수와 메서드의 차이점은 호출 방식에 따라 다르다. 함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수라고 말한다.
다음 예제를 통해 알아봅시다.
let obj = {
show1: function() {
console.log('show1() 메서드 호출');
}
}
function show2() {
console.log('show2() 함수 호출');
}
obj.show1(); // 메서드
show2(); // 함수
위 예제에서 show1()
함수는 객체 obj의 프로퍼티이며, obj 객체를 통해 호출했으므로 메서드이다.
반면에 show2()
함수는 객체를 생성하지 않고 직접 호출했으므로 함수이다.
위 예제에서 show2()
함수는 객체 없이 호출되는 것처럼 보이지만, 사실 show2()
함수를 호출하는 객체가 존재합니다. 전역 범위에서 함수가 선언되는 경우 전역 객체인 window
의 프로퍼티가 됩니다.
function show2() {
console.log('show2() 함수 호출');
};
show2();
window.show2();
따라서, show2()
함수를 전역 범위에서 선언하는 경우 다음 예제처럼 window
객체로 호출할 수 있습니다.
❓ 전역 객체인 window 객체로 show2() 함수를 호출했으므로 show2() 함수는 메서드가 아닌가요?
JavaScript
에서 메서드라는 개념은 사용자가 정의한 객체의 프로퍼티가 함수인 경우입니다. 따라서show2()
함수는 메서드가 아니라 함수입니다.
JavaScript
에서 함수는 변수에 할당할 수 있으므로 함수를 변수처럼 사용할 수 있습니다. 즉, 메서드도 변수에 할당할 수 있다는 의미입니다.
다음 예제는 obj
객체의 메서드를 변수에 할당합니다.
let obj = {
show1: function() {
console.log('show1() 메서드 호출');
}
}
obj.show1(); // 메서드
let funcCall = obj.show1;
funcCall(); // 함수
변수 funcCall
에 obj 객체의 show1()
메서드를 할당하였다. 따라서, funcCall
은 함수처럼 사용할 수 있다.
funcCall
에 메서드를 할당했지만, funcCall
을 호출하는 객체가 존재하지 않으므로 funcCall
은 함수이다.