[JS] 함수와 메서드의 차이에 대해서 설명해보세요.

함수와 메서드

함수와 메서드의 차이점은 호출 방식에 따라 다르다.

함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수라고 말한다.

let obj = {
  show1: function() {
    console.log('show1() 메서드 호출');
  }
}

function show2() {
  console.log('show2() 함수 호출');
}

obj.show1();// 메서드
show2();// 함수

위 예제에서 show1() 함수는 객체 obj의 프로퍼티이며, obj 객체를 통해 호출했으므로 메서드이다.

반면에 show2() 함수는 객체를 생성하지 않고 직접 호출했으므로 함수이다.

---

함수를 호출하는 전역 객체

위 예제에서 show2() 함수는 객체 없이 호출되는 것처럼 보이지만, 사실 show2() 함수를 호출하는 객체가 존재한다.

전역 범위에서 함수가 선언되는 경우 전역 객체인 window의 프로퍼티가 된다.

따라서, show2() 함수를 전역 범위에서 선언하는 경우 다음 예제처럼 window 객체로 호출할 수 있다.

function show2() {
  console.log('show2() 함수 호출');
};

show2();
window.show2();

[실행 결과]

Chrome 개발자 도구의 콘솔 탭에서 위 예제를 실행한 결과이다.

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은 함수이다.

---

함수와 메서드의 차이점 정리

함수(Function) 메서드(Method)

함수는 특정 작업을 수행하기 위해 설계된 기능	메서드는 객체의 프로퍼티가 함수인 경우
함수는 직접 호출할 수 있음	메서드는 점 표기법 또는 대괄호 표기법을 사용하여 호출할 수 있음
재사용 가능	함수에 비해 재사용하기 어려움
함수는 자체적으로 존재	메서드는 객체와 연결되어 있음