[JavaScript] 함수와 메서드

1) 함수(funcrtion)란?

- 독립적으로 실행할 수 있는 코드 블록입니다

- 전역 스코프나 다른 함수 내에서 선언할 수 있습니다

//함수 선언식
function add1(a, b){
  return a + b;
}

//함수 표현식
const add2 = function(a, b){
  return a * b;
}

//화살표 함수
const add3 = (a, b) => a + b;

 

 

 

2) 메서드(Method)란?

- 객체에 속한 함수를 메서드라고 합니다.

- 객체의 프로퍼티로써 존재하며, 해당 객체의 컨텍스트 내에서 실행됩니다. 

const cat = {
  name : '나비',
  // 이것이 메서드입니다.
  sound : function(){
    console.log(this.name + " : 야옹 ");
  }
}

const dog = {
  name : '흰둥이',
  // 이것이 메서드입니다.
  sound : function(){
   console.log(this.name + " : 왈왈 "); 
  }
}

cat.sound();
dog.sound();

 

3) 함수와 메서드 차이점

- 함수는 독립적으로 존재하지만, 메서드는 객체에 종속됩니다.

- 메서드는 자신이 속한 객체를 this로 참조 할 수 있지만, 일반 함수의 this는 호출방식에 따라 달라집니다.

- 함수는 직접 호출하지만, 메서드는 객체를  통해 호출합니다. 

 

이렇게 정리하다보니

const add2 = function(a, b){ return a * b; } 이것도 결국 객체에 속한 함수인 거 아닐까?라는 생각이 들었다. 

const add2 = function(a, b){ return a * b; }

 

add2 변수는 전역객체의 프로퍼티가 될 수 있다. 

 

1. 변수 선언 방식의 차이 

 

//1. var로 선언시 전역 객체의 프로퍼티가 됩니다. 
var add2 = function(a, b){ return a + b; }
console.log(window.add2); // 출력 : ƒ (a,b) {return a+b;}

//2. const 또는 let으로 선언시 전역 객체의 프로퍼티가 되지 않습니다.
const add2 = function(a, b){ return a + b; }
console.log(window.add2); // 출력 : undefined

 

 

2. 메서드로서의 의도 :

// 이것은 명시적으로 객체의 메서드로 정의된 경우입니다
const calculator = {
    add2: function(a, b) { return a + b; }
}

// 이것은 독립적인 함수로 정의된 경우입니다
const add2 = function(a, b) { return a + b; }

 

 

결국 차이점은 "의도"와 "사용 맥락"에 있습니다.

• 특정 객체에 필요한 기능은 그 객체의 메서드로 사용합니다. 
• 함수는 독립적인 기능 단위로 사용하기 위해 정의됩니다

자바스크립트의 특징상 모든 것이 객체이기 때문에, 기술적으로는 모든 함수가 어딘가에 속해있긴 합니다.

하지만 우리가 실제로 코드를 작성할 때는 함수와 메서드로 구분해서 사용합니다.