메서드와 this

자바스크립트에서는 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다.

객체 user에세 인사할 수 있는 능력을 부여해보자 =>

const user = {
	name:"존",
  	age:13
}

user.sayHi = ()=>{
  alert("안녕!!");
}

user.sayHi(); // => 안녕!!

함수를 만들고, 객체 프로퍼티 user.sayHi에 할당해주었다.

객체에 할당된 함수를 호출하면 user가 인사를 한다.

이렇게 객체 프로퍼티에 할당된 함수를 메서드 라고 한다.

여기서는 user에 할당된 sayHi가 메서드 이다.

메서드는 정의된 함수를 사용할 수도 있다.

 const sayHi = ()=>{
  alert("안녕!!");
}
// 선언된 함수를 메서드로 등록 // user라는 객체에 sayHi라는 키로 sayHi라는 선언되어있는 함수를 넣어줌
user.sayHi = sayHi;

user.sayHi(); // 안녕!

객체 지향 프로그래밍(OOP)
객체를 사용하여 개체를 표현하는 방식을 의미.
OOP는 자체만으로도 학문의 분야를 만드는 중요한 주제이다.
올바른 개체를 선택하거나 개체 사이의 상호작용을 나타내는 방법등의 의사결정은 객체 지향 설계를 기반으로 이루어진다.

메서드 단축구문

// 아래 두 객체는 동일하게 동작합니다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

functon을 사용하지 않아도 메서드 정의가 가능하다

메서드와 this

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할이 가능하다.
모든 메서드가 그렇지는 않으나 대부분의 메서드는 객체의 프로퍼티의 값을 활용한다.

메서드 내부에서 this라는 키워드를 사용하면 자신을 둘러싼 객체에 접근이 가능하다.
이 this는 메서드를 호출할 때 사용된 객체이다.

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // John

this를 사용해 객체에 접근 할 수 있지만 외부변수를 참조해 객체에 접근할 수도 있다.

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(user.name); // 'this' 대신 'user'를 이용함
  }

};

이렇게 외부변수를 사용해 참조할 수 있다.
그런데 외부변수를 사용해 객체를 참조하는 방식은 예상치 못한 에러가 발생할 수 있다.

user을 복사해 다른 변수에 할당하였고, user는 다른값으로 덮어쓰였다면 sayHi()는 원치않는 값 null을 참조할 것이다.

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert( user.name ); // Error: Cannot read property 'name' of null
  }

};


let admin = user;
user = null; // user를 null로 덮어씁니다.

admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러가 발생했습니다.

this를 사용하면 이런 에러가 발생되지 않는다.

자바스크립트에서는 모든 함수에 this를 사용할 수 있다.

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

let user = { name: "John" };
let admin = { name: "Admin" };

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

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

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

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

객체가 없어도 함수를 호출하는것이 가능하다. 단순히 함수 안에서 this를 호출한다면 엄격모드에서는 this에는 undefined가 할당이 되나,
엄격모드가 아닐 경우에는 this는 전역객체를 참조한다.
브라우저 환경에서는 window라는 전역객체를 참조하는것이다.

주로 이런식의 코드는 실수로 작성된 경우이다.
만일 함수 본문에 this가 있다면 객체 컨텍스트 내에서 함수를 호출할 것이라고 예상하자!!

---

요약

• 객체 프로퍼티에 할당된 함수는 메서드이다.