JavaScript 문법 : this, Arrow Function

📎 JavaScript를 쓰는 이유 : HTML을 조작하기 위해 사용한다.

📎 'use strict'; (strict mode)

• 자바스크립트를 엄격하게 실행할 수 있도록 상단에 작성해준다.

📕 this Keyword

<script>
	console.log(this); // 콘솔창에 this 키워드 출력

	function printThis (){
    	console.log(this);
	}
	printThis(); // 콘솔창에 this 키워드를 출력하는 함수 실행
</script>

✔️ this 값은 window{...} 라고 출력된다. 즉, 나를 담고있는 {object}를 출력한다.
📎 window

• 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체(오브젝트)입니다.
  ** 전역변수 란 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수입니다.

✔️ strict mode에서 일반 함수 내에서 this를 출력을 쓰면 undefined 가 출력된다.
✔️ 함수나 변수를 <script></script> 안의 전역공간에서 만들면 {window}라는 전역 Object에 보관된다.

<script>
  window: {
    함수 () {
      console.log();
    }
  }
</script>

✔️ Constructor(Object 생성 기계) 안에서 this를 사용하면 instance(새로 생성되는 object)를 뜻한다.

<script>

  function Machine(){ //constructor
    this.name = 'kim';
  }
  
  var newObject = new Machine(); //new object, instance
  
</script>

✔️ this를 addEventListener 안에서 사용하면 e.currentTarget와 동일하게 지금 이벤트가 동작하는 곳을 뜻한다.

<script>

  document.getElementById('btn').addEventListener('click', function(e){
    console.log(this); // id가 btn인 HTML
    console.log(e.currentTarget); // 위와 동일한 결과
  })
  
</script>

🔎 CASE 1 : EventListener 안에서 Callback 함수를 쓴다면 this는?

<script>

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

함수 안에 들어가는 함수를 콜백함수라고 부른다. 즉, 함수 안에서 파라미터 역할로 들어가는 함수를 뜻한다.
✔️ forEach라는 함수 안에 function(){} 콜백함수를 넣어서 사용한다.
✔️ 결과

Callback 함수는 그냥 일반 함수와 같기 때문에 {window} 객체가 출력된다.

🔎 CASE 2 : Object 안에서 Callback 함수를 쓴다면 this는?

<script>

var newObject = {
  names : ['Kim', 'Lee', 'Park'];
  printThis : function(){
      newObject.names.forEach(function(){
        console.log(this)
      });
  }
}

</script>

✔️ 결과

forEach함수 안에 Callback 함수는 그냥 일반 함수와 같기 때문에 {window} 객체가 출력된다.

🔎 CASE 3 : Object 안에서 Callback 함수를 arrow function으로 쓴다면 this는?

<script>

var newObject = {
  names : ['Kim', 'Lee', 'Park'];
  printThis : function(){
  	  console.log(this);
      newObject.names.forEach(() => {
        console.log(this)
      });
  }
}

</script>

✔️ arrow function 특징 : 내부의 this 값을 변화시키지 않고 외부 this 값 그대로 재사용 가능하다.

✔️ 결과

상위 코드의 this값을 그대로 물려받아서 사용하기 때문에 {names} 가 출력된다.

📗 Arrow Function

기존 문법 : function() {} → 신 문법 : () => {}
✔️ 신문법의 특징은 this 값을 함수 밖에 있던걸 그대로 씀
✔️ Object 내 this 출력하는 명령을 하는 함수를 실행했을 때, 기존문법에서는 그 함수를 포함하고 있는 Object가 출력됨
✔️ Object 내 this 출력하는 명령을 하는 함수를 실행했을 때, 신문법에서는 window{...} 가 출력됨