4-4

method

JS에서는 객체의 property에 함수가 올 수 있다.

메서드 생성

• 형태 1 :

객체명.메서드명 = function() {
  ...
};
  
객체명.메서드명(); // -> 함수 실행됨

• 형태 2.

// 함수 선언
function 함수명() {
  ...
}
  
// 함수를 객체의 메서드로 등록
객체명.메서드명 = 함수명;

• 형태 3.
  객체 리터럴 내부에서 함수 선언 시,

객체명 = {
  키 : function() {
    ...
  }
};

• 형태 4.
  객체 리터럴 내부에서 단축 구문 사용하여 함수 선언

객체명 = {
  키() {		// 키 : function() 과 동일
    ...
  }
};

this

객체 내 메서드는 객체 내 데이터에 접근해야할 때가 많다.
객체 내 메서드 내부에서 같은 객체 내 다른 property를 사용할 땐,
this로 접근한다.

this : 현재 객체

let 객체명 = {
  키1 : 값1,
  키2 : 값2,
  
  키3() {
    alert(this.키1);
  }
};

객체명. 키3(); 	//값1 출력

• 오류 발생을 방지하기 위해, 객체 내부 메서드에서 객체명.키 로 접근하는 방식은 지양하자!

JS만의 this

JS의 this는 다른 프로그래밍 언어의 this보다 쓰임이 더 자유롭다.

• 동일한 함수를 서로 다른 각각의 객체가 메서드로 추가하면, 각 객체의 메서드 내부의 this는 다른 객체를 가리킨다. 즉 자신이 포함되어있는 객체를 가리킨다.

예시 :

// 서로 다른 두 객체
let user = { name: "John" };
let admin = { name: "Admin" };

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

// 동일한 함수를 각각의 객체 내부 메서드로 추가함
user.f = sayHi;
admin.f = sayHi;

user.f(); // John  (user 객체의 name 값 출력)
admin.f(); // Admin  (admin 객체의 name 값 출력)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

---

🙉 오늘의 TL;DR

• 객체 property로 함수가 올 수 있다 : 메서드
• 메서드 내에선 this를 통해 현재 속한 객체를 가리킬 수 있다.