JS - this

This keyword.

it indicates Object, which contains "this" keyword in function

1. This in Object.

오브젝트 내의 메소드(함수)에서 사용했을 때, 그 메소드를 담고 있는오브젝트를 출력해준다

A오브젝트안에 console.log(this)를 출력하는 함수가 있다면, this는 그 A오브젝트를 가르킨다.

<script>
const aObj = {
	 randomFunc : function(){ console.log(this) } 
}
<script>


// print "aObj" in console.

2. This in Global function.

<script>
function hi() => {
	console.log(this)
}

hi();
<script>

// print "window" in console.

All the global function will be stored in "window" global obj.

Window obj.
All the global function will be stored in "window" global obj.

3. This in constructor.

constructor로 새로생성되는 오브젝트를 뜻합니다.

4. This in eventlistener.

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

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

// console
<button id="btn">btn</button>
<button id="btn">btn</button>

In eventlistner,
this and e.currentTarget are same.

---

💨 This in Callback function

case1. This in callback function of event listener.

<script>
 document.getElementById('버튼').addEventListener('click', function(e){
  var arr = [1,2,3];
  arr.forEach(**function(){
    console.log(this)**
  });
});
</script>

• 위 콜백함수는 엄밀히 따지면 global function임. 따라서
• this > window 출력.

case2. This in callback function in Object

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

. this > window 출력.

case3. arrow fuction ?

<script>
  var obj1 = {
    nums: [1, 2, 3],
    함수: function () {
      obj.nums.forEach(**() => {
        console.log(this);
      }**);
    },
  };
  obj.함수();
  
  // Arrow function
  // console prints obj1.
  // this값 재설정 하지않아도되고, 위의 값 그대로 물려받음

  var obj2 = {
    nums2: [1, 2, 3],
    함수: function () {
      obj2.nums2.forEach(**function () {
        console.log(this);
      }**);
    },
  };
  obj2.함수();
  
  // console print window.
</script>

마무리

'This' value is chaning depends on function's position.

따라서 this값은 function을 만날 때마다 바뀔 수 있기 때문에

내가 원하는 this를 쓰기 힘든 경우가 있다.

arrow function을 쓰면 내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용합니다.

함수가 쓰인 위치에 따라서 내부의 this값이 변한다.
근데 arrow function은 어디서 쓰든간에 내부의 this 값을 변화시키지 않습니다.
그러니까 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function 이라는 함수
( arrow function을 쓰는 핵심 이유입니다.)

In order to get "this" I want, not window obj, use arrow function instead.

참고 : 코딩애플 es6 강의