🎇 메서드

객체의 속성 중 함수 자료형인 속성을 메서드 method 라고 한다.

let user = {
  name : "bo",
  age : 2,
  height : 168,
  like : function(animal) { 
  	alert(" 모든 덩물 ");
  }
};

user.sayHi = function() { // 메서드 만들기 
  alert( "안녕" );
}; 

user.like(); // 객체 user에서 메서드 like 호출하기

이렇게 객체 프로퍼티에 할당된 함수를 메서드라고 한다.
위 예시에서는 user 에 할당된 like 와 sayHi 가 메서드이다.

▪ 메서드 단축 구문

객체 리터럴 안에 메서드 선언할 때 사용할 수 있는 단축 구문이다.

user = {
  like() {
    alert( "모든 덩물" ); // like : function() 과 동일하다. 
  }
}; 
    

---

🔗 메서드와 this

메서드 내에서 자기 자신이 가진 프로퍼티를 출력하고 싶을 때에는
자신이 가진 프로퍼티임을 분명하게 표시해야 한다.

이럴 때 자기 자신이 가진 프로퍼티라는 것을 표시할 때 this 키워드를 사용한다.

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있다.
메서드 내부에서 this 키워드를 사용하여 객체에 접근할 수 있고,
이 때 점 앞의 this 는 메서드를 호출할 때 사용된 객체를 나타낸다.

let pet = {
  name : "오동이",
  eat : function (food) {
    alert(this.name + '은/는' + food + '을/를 먹는다.');
  }
}; 

pet.eat('블루베리'); 
// this 키워드를 사용해 pet, 자기 자신이 가진 프로퍼티 name을 가져온다.
// 오동이은/는 블루베리 을/를 먹는다. 

pet.eat('블루베리') 가 실행되는 동안에 this 는 pet 을 나타낸다.

this 대신 외부 변수를 참조하여 객체에 접근하는 것도 가능하다.

alert(pet.name + '은/는' + food + '을/를 먹는다.');
this 대신 pet 을 사용했다.

그런데 이렇게 외부 변수를 사용해 객체를 참조하면 에러가 발생할 수 있다.
pet 을 복사하여 다른 변수( another )에 할당하고, pet 은 전혀 다른 값( null )으로 덮어썼다고 가정했을 때, eat() 은 원치 않는 값( null )을 참조할 것이다.

let pet = {
  name : "오동이",
  eat : function (food) {
    alert(pet.name + '은/는' + food + '을/를 먹는다.');
    // Uncaught TypeError: Cannot read properties of null (reading 'name')
  }
}; 

let another = pet; 
pet = null; // pet을 null로 덮어쓴다. 

another.eat('블루베리'); 

여기서 this 를 썼다면 정상적으로 복사된 변수의 name 을 잘 읽었을 것이다.

---

🧝‍♀️ 'this' of JS is free!

JS의 this 는 다른 프로그래밍 언어의 this 와 동작 방식이 다르다.
JS에서는 모든 함수에 this 를 사용할 수 있다.

this 값은 런타임에 결정된다. 동일한 함수라도 다른 객체에서 호출했다면 this 가 참조하는 값이 달라진다.

let user = { name : "bo" };
let pet = { name : "오동이" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수 사용
user.hi = sayHi;
pet.hi = sayHi;

// this는 점 앞의 객체를 참조한다. 
user.hi(); // bo (this == user)
pet.hi();  // 오동이 (this == pet)

간단히 this 는 메서드를 호출하는 동안의 사용되는 객체를 참조한다.

❕ 객체 없이 호출하면 this == undefined

function sayHp() {
  alert(this);
}
sayHo(); // undefined

엄격 모드에서 객체 없이 함수만을 호출하면 this 는 undefined 가 된다.
엄격 모드가 아닐 때는 this 가 전역 객체를 참조한다.
그런데 이런 식으로 굳이굳이 코드를 쓰지 않는다고 한다.