[JavaScript] this 키워드 알아보기

📒 왜? 

◼ JavaScript를 사용하면서 this를 사용했을 때, 어떤 경우에는 {window}가, 또 다른 경우에는 Object가 출력되었다.

◼ 이에 this에 대해 정리하고자 글을 작성한다.

---

📒 this 키워드

◼ this는 상황에 따라서 뜻이 3~4 가지로 변경된다.

 

✔ 최상위 this & function에서 this 사용

<script>
  console.log(this);
</script>

<script>
  function test() {
    console.log(this);
  }
  test();
</script>

◼ 출력 결과는 window에 대한 정보가 표시된다.

◼ window는 전역 변수 보관소이다.

 

✔ strict mode에서 function에서 this 사용

<script>
  "use strict";
  function test() {
    console.log(this);
  }
  test();
</script>

◼ strict mode (엄격한 실행)에서 일반 함수 안에 this를 사용하면 undefined가 출력된다.

 

✔ Object 안의 function에서 this 실행

<script>
  var obj = {
    name: "kim",
    func: function () {
      console.log(this);
    },
  };

  obj.func();
</script>

◼ Object 안의 함수에서 this를 실행하면, Object가 출력된다.

 

✔ Object 안의 Object 안의 function에서 this 실행

<script>
  var obj = {
    data: {
      func: function () {
        console.log(this);
      },
    },
  };

  obj.data.func();
</script>

◼ obj.data Object의 내용이 출력된다.

 

✔ Object 안의 Arrow function에서 this 실행

<script>
  var obj = {
    func: () => {
      console.log(this);
    },
  };

  obj.func();
</script>

◼ 출력 결과는 window에 대한 정보가 표시된다.

◼ Arrow Function의 특징은 내부 this 값을 변화시키지 않고 바로 밖의 this를 그대로 사용한다.

---

💥 이런 결과가 발생하는 이유

<script>
  function test() {
    console.log(this);
  }

  test(); // 1번
  window.test(); // 2번
</script>

JavaScript에서는 함수나 변수를 전역 공간에서 만들면 {window}에 보관하기 때문에, 전역 공간에서 this를 출력하면 {window} 내용이 출력된다. 따라서, 1번 코드나 2번 코드 형식으로 test라는 함수를 사용할 수 있다.

 

즉, this는 나를 담고 있는 Object의 정보를 출력하기 때문에,  전역 공간에서 this를 출력하면 {window}가 출력되고 obj라는 Object에서 this를 출력하면 {obj}가 출력된다.

 

✔ contructor에서 this 사용하기

<script>
  function test() {
    this.name = "hi";
  }

  var testObj = new test();
  console.log(testObj);
</script>

◼ 여기서 사용되는 this는 새로 생성되는 Object의 instance이다.

 

✔ EventListener에 등록하는 function에서 this 사용하기

<div>
  <button id="btn">버튼</button>
</div>

<script>
  document.getElementById("btn").addEventListener("click", function (e) {
    console.log(this);
  });
</script>

◼ 여기서 사용되는 this는 document.getElementById()로 찾은 태그이다.

◼ e.currentTarget이랑 동일한 출력 값을 나타낸다.

 

✔ EventListener에 등록하는 Arrow function에서 this 사용하기

<div>
  <button id="btn">버튼</button>
</div>

<script>
  document.getElementById("btn").addEventListener("click", () => {
    console.log(this);
  });
</script>

◼ Arrow Function의 특징으로 this가 재정의 되지 않아, this 값이 {window}로 출력된다.

 

✔ Object안의 function안의 Array ForEach에 등록한 function에서 this 사용하기

<script>
  var obj = {
    func: function () {
      var arr = [1, 2, 3];
      arr.forEach(function () {
        console.log(this);
      });
    },
  };

  obj.func();
</script>

◼ {window}가 출력된다. 

◼ this를 출력하는 function은 연결되어 있지 않고, 콜백 함수로 등록하는 function 이기에 {window}가 출력된다.

 

✔ Object안의 function안의 Array ForEach에 등록한 Arrow function에서 this 사용하기

<script>
  var obj = {
    func: function () {
      var arr = [1, 2, 3];
      arr.forEach(() => {
        console.log(this);
      });
    },
  };

  obj.func();
</script>

◼ {obj}가 출력된다.

◼ Arrow Function은 this를 재정의 하지 않고 바로 밖의 this를 그대로 사용하기 때문에, func의 this 출력 값이 그대로 출력된다.

---

💥 function과 Arrow function 언제 사용할까?

✔ function 사용 예제

<script>
  var obj = {
    name: "kim",
    say: function () {
      console.log(`나는 ${this.name}입니다.`);
    },
  };

  obj.say();
</script>

◼ this 값을 재정의하여 사용해야 할 때, function을 사용하여 함수를 작성한다.

  ❗ 상위 오브젝트의 값으로 재정의해서 사용해야 하는 경우

 

✔ Array function 사용 예제

<button id="btn">버튼</button>

<script>
  document.getElementById("btn").addEventListener("click", function () {
    setTimeout(() => {
      console.log(this.innerHTML);
    }, 1000);
  });
</script>

◼ this 값을 재정의하지 않고 사용해야 할 때, Arrow function을 사용하여 함수를 작성한다.

  ❗ 일반 함수로써 사용되어, 상위 Object 값을 사용해야 하는 경우