this... 단어의 뜻은 알겠어 근데 활용을 못하겠어...

내가 this라는 단어를 알게된지 20년은 된듯하다. 근데 20년동안 알고지낸 this라는 단어 때문에 지금 내가 블로깅까지 하고있다. 그만큼 현재 나에게 너무나도 중요한 개념이라는 느낌적인 느낌? 거기서 찾아오는 모르면 안된다는 불안감이 나를 이 자리까지 이끈 것 같다. 그렇다면 this가 무엇인지, 어떤식으로 사용되는지 예제 등을 살펴보며 이해해보자.

this란?

• JavaScript의 예약어
• 자신이 속한 객체나 자신이 생성하게 될 인스턴스를 가리키는 자기 참조 변수이다.
  인스턴스 : 우리는 생성자 함수를 이용하여 보다 쉽게 다양한 객체를 생성해낼 수 있는데, 여기서 생성 된 객체 하나하나를 인스턴스라고 한다.
  <예시> : 생성자 함수(거푸집), 인스턴스(거푸집으로 만든 결과물)
• this를 이용하여 자신이 속한 객체, 자신이 생성할 인스턴스의 프로퍼티, 메소드를 참조할 수 있다.
  프로퍼티 : 해당하는 Object의 특징, 즉 기본적으로 값을 나타내고 있는데 예시를 보면 이해가 쉽다.
  <예시> : 아래 코드를 보면 'abcd' 문자열을 품는 str 변수의 길이를 length라는 코드로 확인할 수 있다. 여기서 length가 바로 str이라는 문자열(String)의 안에 있는 문자의 양을 정수로 나타낸 값을 담고있으며 이를 프로퍼티라고 이해할 수 있다.

  <script>
    const str = 'abcd'
    console.log(str.length)  ---> 4
    </script>

  아래 userInfo 객체 안에서는 name, age, occupation 모두 프로퍼티이며, eventHandler 또한 함수를 담고있기에 메소드이면서도 프로퍼티라고 할 수 있다.

  <script>
    let userInfo = {
      name : 'hskim',
      age : 25,
      occupation : 'student',
      eventHandler : function() {
         return "name":this.name + "age":this.age + "ocu":this.occupation;
      }
    }
  </script>

• this는 javascript의 엔진에 의해서 암묵적으로 생성된다.
• this는 객체의 프로퍼티 또는 메소드를 참조하기 위한 자기 참조 변수이므로, 해당 객체가 품고있는 메소드 또는 생성자 함수 내부에서만 의미가 있다.
• 함수를 호출할 경우 암묵적으로 함수 내부에는 함수의 인자값과 this가 전달 된다. 위 userInfo객체의 eventHandle부분을 참고할 수 있을듯 하다.