[JavaScript] this와 method 를 알아보자

🔍 this

JavaScript에서 this키워드는 객체 를 나타낸다.

this는 마치 자유로운 여행자 같다. 어디서 호출하는지에 따라 달라진다.
클로저는 선언, this는 호출 코드를 깔끔하게 사용할 수 있다.

• 객체 메서드에서 this는 객체를 참조한다.
• 함수의 염격모드에서 this 는 undefiend 이다
• 이벤트에서 this 이벤트를 수신한 요소를 나타낸다.
• 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다
• 함수에서 호출시 this 해당 함수의 객체가 된다.
• class 내에서 호출시 this 는 해당 인스턴스가 된다.

⚠️ 메서드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않는다.

• 단순객체

• 클로저 모듈패턴 으로 새로운 객체생성 할수있다.

단순객체

let count = {
  data: 0,
  increase: function() {
    this.data++ // 메서드 호출을 할 경우, this는 count을 가리킵니다
  },
  decrease: function() {
    this.data--
  },
  getData: function() {
    return this.data
  }
}

count.increase()
count.increase()
count.increase()
count.decrease()
count.getData() // 2

❗ 클로저로 새로운 객체로 재사용

위의 count는 단 하나의 객체만 만들 수 있습니다. 만약 똑같은 기능을 하는 카운터가 여러 개가 필요하다면, 이 코드를 여러 번 만들어야 할까? 같은 코드를 그대로 복사/붙여넣기 해야 하므로, 재사용성이 떨어진다. 똑같은 기능을 하는 카운터를 여러 개 만드는 방법

클로저모듈패턴

function makeCount() {
  let data = 0;
  return {
    increase: function() {
      data++;
    },
    decrease: function() {
      data--;
    },
    getData: function() {
      return data;
    }
  }
}

let count1 = makeCount()
count.increase()
counter1.getData() // 1

let count2 = makeCount()
count.decrease()
count.decrease()
count.getData() // -2

✅ 메서드 method

JavaScript 메서드는 함수 정의를 포함하는 객체의 속성이다. 메서드는 객체 속성으로 저장된 함수이다.

• 객체 프로퍼티에 저장된 함수를 '메서드
• object.doSomthing() 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다.
• 객체에 대해 수행할 수 있는 작업을 메서드라고 한다.