220922_TIL

오늘 한 일

• this와 arrow function

---

• this를 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻한다. window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체다. *전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수. 그냥 script태그 내에 쌩으로 var 변수 하나 만들면 그건 자연스레 전역변수가 된다.
  strict mode일 때 함수 안에서 쓰면 this는 undefined가 된다. IE 10버전 이상에선 ‘use strict’라는 키워드를 페이지 최상단에 추가하면 strict mode로 자바스크립트를 작성 할 수 있다.
  strict mode에선 var 키워드 없이 변수를 선언하거나, 변수를 arguments라는 이상한 키워드로 선언하거나 그런 실수를 방지해줌 strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제로 지정한다.
  this는 오브젝트 내 메소드 안에서 사용하게 되면 해당 메소드를 감싸고 있는 오브젝트를 뜻한다. 즉 this는 자신의 위치를 기준으로 포함하고 있는 오브젝트를 뜻한다. 그렇기 때문에 그냥 this를 쓰거나 함수 내에서 this를 사용하면 전역변수인 window라는 오브젝트를 뜻하게 되는 것이고, 오브젝트를 따로 만들어서 그 안에 메소드에서 this를 사용한다면 해당 오브젝트를 뜻하게 되는 것이다.
  이런 this는 constructor 안에서 쓰면 또 다른 역할을 수행한다.

  function 기계() {
    this.이름 = 'Kim';
  }
  

  여기서의 this는 기계로부터 새로 생성될 오브젝트를 의미하고 이걸 인스턴스라고 한다.
  this를 eventlistner 안에서 사용하면 또 다른 의미를 가진다. 여기서의 this는 e.currentTarget과 같은 의미를 가진다. e.currentTarget은 지금 이벤트가 동작하는 곳을 뜻한다. 매우 간단히 설명하면 지금 addEventListener 부착된 HTML 요소를 뜻한다고 보면 됨.

  
  this는 콜백함수 안에서 사용할 땐 어떤 함수의 위치에 있는지 파악하는게 중요하다. 쌩으로 있는 콜백함수라면 window를 뜻하게 된다. 그리고 메소드를 arrow function(화살표함수) 로 표현했을 때에는 또 의미가 달라진다. 화살표함수는 기존 function() {}과 같은 기능을 한다고 보긴 어렵다. 화살표함수는 어느 위치에 있던 내부의 this 값을 변환하지 않는다.
  

  var 오브젝트1 = {
    함수: () => {
      console.log(this);
    },
  };
  
  오브젝트1.함수();
  

  이렇게 호출을 하면 화살표함수는 this의 값을 변환하지 않기 때문에 현재 위치보다 밖에 있는 위치의 this값을 가정하여 출력한다. 그래서 위 호출값은 window가 나온다.
  화살표함수는 기존 function함수보다 입출력을 보여주는데 있어서 직관적이라는 장점이 있고 축약되어 쓰기 때문에 편하다라는 장점이 있지만 위에 this의 경우처럼 일반 fucntion과 용도가 완전 같지는 않다는 점. 일반 function을 항상 대체 할 수 있는 문법이 아니라는 점이 중요하다.