21. 객체의 메서드와 this

객체는 실제 세상에서 존재하는 개체를 표현하고자 할 때 사용한다.

나라는 사람을 객체로 표현하기 위해서는

let human = {
  name: 'quakka',
  age: 29,
  birthday: 1993.01.01,
  ...
  ...
}

이런식으로 표현할 수 있다.
하지만 이러한 정적인 정보만이 아닌 어떠한 행동 행위도 할 수있도록
메서드라는것을 만들어 줄 수 있다.

메서드는 앞에서 내가 배웠던 함수가 객체의 프로퍼티 값으로 들어갔을 때 메서드라고 부를수 있다.

메서드를 만드는 방법은 아래와 같다.

let quakka= {
  name: 'quakka',
  age: 29,
  sayHello: function() {
    console.log('반갑습니다!');
  }
}

sayHello라는 프로퍼티는 값으로 함수를 가지고 있다.
그래서

quakka.sayHello()

이렇게 해당 프로퍼티를 호출하면 정의된 함수가 실행이 된다.
이것을 객체의 메서드라고 할수 있다.

메서드는 정의되어있는 함수를 이용해서도 만들 수 있다.

let user = {
  name: 'quakka'
};

function sayHello(){
  console.log('하이!');
}

user.sayhello = sayHello;
user.sayhello(); // 하이!

이렇게 객체를 사용하여 개체를 표현하는 방식을
객체지향 프로그래밍(OOP)라고도 한다.

메서드와 this

메서드는 객체의 프로퍼티를 이용할 수 있다.
그렇다면 본인의 객체에 있는 정보에 제대로 접근할 수 있어야 한다.
메서드 내부에서 this키워드를 사용하면 객체에 접근할 수 있다.

let user = {
  name: 'quakka',
  age: 29,
  
  sayHello: function() {
    // 여기서 사용되는 this는 user객체를 가르킴
    console.log(this.name); // user.name
  }
};

user.sayHello(); // 'quakka'

이상하게 작동하는 this..?

자바스크립트의 this는 다른 언어의 this와 동작 방식이 다르다.
자바스크립트에서는 모든 함수에 this를 사용할 수 있다.

아래와 같은 코드를 봐도 이상없이 동작한다.

function tmap() {
  console.log(this.name);
}

저 함수가 호출되는 순간의 this를 참조하기 때문이다.
자바스크립트는 this값이 런타임되는 순간수간에 결정된다.
같은 함수를 사용하더라도 호출하여 참조되는 객체에 따라 변하기 때문이다.

let teacher = {
  name: 'quakka'
};
let student = {
  name: 'acorn'
};

function sayMyName() {
  console.log(this.name);
}

teacher.sayFunc = sayMyName;
student.sayFunc = sayMyName;

teacher.sayFunc(); // this는 teacher -> 'quakka'
student.sayFunc(); // this는 student -> 'acorn'
}

자바스크립트에서는 this가 런타임에 결정되기 때문에, 메서드가 어디에 정의되었는지는 상관없이 .앞에 객체가 무엇인지에 따라 자유롭게 결정 된다.
이것은 장점이자 단점이 될 수 있다. 하나의 메서드를 여러 객체에서 사용할 수 있지만, 쉽게 실수할 수 있기때문에 장점이자 단점이다. 장단점을 따지는것 보다는 this를 확실히 이해하여 사용하는것에 목적을 두는것이 내 생각이다.