this 키워드를 알아보자 2. event listener와 constructor

저번 시간 this 의미 정리를 하자면

1. 그냥 일반 함수에서 쓰면 window

2. 오브젝트 내의 함수(메소드)에서 쓰면 함수를 동작시키는 오브젝트

가 출력된다고 배워봤습니다. 

---

3. constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트를 뜻합니다. 

기계란?

자바스크립트 함수는 이런 용도로 쓸 수 있다.

오브젝트 반복 생성 기계를 만들 수 있다.

- function 을 이용해서 만들 수 있음.

비슷한 오브젝트를 마구 무한히 생성하고 싶은 경우가 있는데,

저 어쩌구를 복사하는게 아니라 ,

저걸 복사해주는 기계를 만들어서 씀. 

 

자바스크립트에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우

오브젝트를 복사하는게 아니라 constructor라는걸 만들어서 사용합니다.

 

쉽게 말하면 constructor는 오브젝트 복사해서 생성해주는 기계입니다. 

기계를 어떻게 만드는지 알아봅시다.

함수를 만들 때 this 를 써주면 기계가 됨. 

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

이게 기계 만드는 법입니다. 

함수 문법을 이용해서 만드신 후, 안에 this. 어쩌구를 추가해주시면 됩니다. 

여기서의 this는 기계로부터 새로 생성될 오브젝트들을 의미합니다. 

이 함수 안에서 this 를 쓰면,

기계로부터 새로 생성되는 오브젝트를 의미. 

= instance 라고 함. 

 

그럼 this.이름 = 'Kim' 이건 무슨 뜻일까요?

새로생성되는 오브젝트의 이름 key값에 'Kim'이라는 value를 집어넣어주세요

라는 뜻 아닐까요? 

맞습니다. 

 

▼ 이건 참고로 알아두시면 좋은 기계에서 오브젝트 뽑는 법입니다.

오브젝트를 기계에서 새로 뽑아달라는 의미.

저 오브젝트 출력해보기.

콘솔창에 출력했을 경우 저렇게 뜸. 

새로 생성되는 오브젝트의 이름이라는 키 값에는

kim 이라는 value 값을 할당해주세요. 라는 의미. 

function 기계(){
  this.이름 = 'Kim'
}
var 오브젝트 = new 기계();

이렇게 new 키워드를 이용하면 새로운 오브젝트를 꺼낼 수 있습니다. 

그리고 새로운 오브젝트는 {이름 : 'Kim'} 이라는 값을 가지고 있습니다.  (this 라는 키워드 덕분에요)

---

4. eventlistener 안에서 쓰면 this는 e.currentTarget이라는 의미입니다.  

이벤트리스너라는 문법 아시쥬?

html 찾고 클릭하면 안에 있는 코드 실행

상단 html 에 버튼을 추가한 다음,

아이디를 부여해줌.

아이디가 버튼인 걸 찾은 다음에,

거기다가 이벤트 리스너 부여.

여기다가 this 를 쓰면 또 다른 뜻이 됨.

저거 와 똑같은 의미가 된다.

e.currentTarget 쓰려면 저기다가 파라미터 추가해줘야함.

둘 다 출력해서 비교해보기.

버튼을 누를 때마다 출력될 것

html 태그가 나온다.

지금 이벤트가 동작하는 곳을 의미.

지금 클릭이벤트가 일어나고 있는데, 클릭이벤트가 동작하는 html 요소를 출력

저 3개가 거의 똑같은 것.

 

---

document.getElementById('버튼').addEventListener('click', function(e){
  console.log(this)
});

여기서 this를 소환하면 이것은 바로 e.currentTarget이라는 뜻과 똑같은 의미입니다. 

e.currentTarget은 지금 이벤트가 동작하는 곳을 뜻합니다. 

매우 간단히 설명하면 지금 addEventListener 부착된 HTML 요소를 뜻한다고 보시면 됩니다. 

의심되면 e.currentTarget, this, document.getElementById('버튼') 이거 세개를 각각 출력해보시면 됩니다. 

이게 this의 마지막 뜻입니다. 

---

case 1. 이벤트리스너 안에서 콜백함수를 쓴다면 this는? 

버튼을 누르는 순간 반복문을 돌려본다면?

 

이런 코드를 쓴다고 가정해봅시다.

forEach는 소괄호 안에다가 콜백함수를 추가해줘야함.

이렇게 해줘야 반복문 돌릴 수 있음.

파라미터 a 쓰고 출력해보기

반복문은 총 3번 돌게 된다.

= 배열 안 데이터가 3개 있으므로

a 값의 의미.

안에있는 코드 3번 반복해줌.

이런 의미.

a = 어레이 안에있던 하나하나의 데이터.

데이터들 출력되는거 확인.

저건 콜백함수.

forEach 도 함수임.

함수안에 함수를 넣을 수 있다.

= 이 넣은 함수를 콜백함수라고 한다.

순차적으로 실행하고싶을 때 사용.

근데 여기서 this 를 출력한다면?

여기서의 this 가 

이벤트 리스너 안에 있던 this 랑 똑같을까?

반복문이 이벤트 리스너는 아니니까 다를것,

---

document.getElementById('버튼').addEventListener('click', function(e){
  var 어레이 = [1,2,3];
  어레이.forEach(function(){
    console.log(this)
  });
});

이벤트리스너 안에서 forEach() 라는 반복문을 사용했습니다. 

forEach() 반복문을 사용할 땐 안에 function(){} 콜백함수를 집어넣어서 사용하게 되어있습니다. 그래서 넣었습니다. 

(* 콜백함수는 그냥 함수 안에 파라미터역할로 들어가는 함수를 뜻합니다. 그게 다임)

하지만 솔직히 forEach가 무슨 역할을 하는지는 모르셔도 이건 알 수 있습니다. 

 

Q. 위의 코드에서 this를 출력하면 무엇이 나올까요? 

바로 답보지말고 한참동안 생각을 해보도록 합시다.  

생각이 안나시면 지금까지 배웠던 this의 1,2,3,4번 뜻을 각각 대입해보세요. 

그럼 뭡니까.

 

4번뜻에 의하면.. eventlistener 안에서 쓴 건 아닙니다.

eventlistener내부는 맞지만 그 안에서 function을 하나 더 만났기 때문에 의미가 변합니다. 

3번뜻에 의하면.. constructor는 아닌 것 같습니다. 

실은 this의 1번이나 2번뜻이 맞습니다.

저렇게 쌩으로 있는 콜백함수는 그냥 일반함수랑 똑같기 때문에 window가 출력됩니다. 

this의 값은 this가 어떤 함수안에 들어있는지만 잘 체크하시면 바로 아실 수 있습니다. 

[collapse]

---

case 2. 오브젝트 안에서 콜백함수를 쓴다면 this는? 

 

이번엔 이런 코드를 쓴다고 가정해봅시다.

forEach 반복문 사용해줌.

오브젝트 안에 있는 이름들 배열

여기서 this 를  출력할 경우 뭐가 나올까?

우선 저 함수를 실행시켜주기

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
      오브젝트.이름들.forEach(function(){
        console.log(this)
      });
  }
}

오브젝트라는 오브젝트 안에 이름들, 함수라는 자료를 각각 저장했습니다 .

함수라는 자료 안에 forEach 반복문을 돌렸는데,

---

Q .그럼 여기 안에서의 this값을 출력하면 뭐가나올까요?

역시 잘 대입을 해보시면 되겠습니다. 

this값을 판단하실 땐 가장 가까이 있는 함수를 살펴보시면 됩니다. 

 

forEach() 안에 있는 함수에 this가 들어있죠?

근데 이 함수는 무슨 뭐 특별한 역할을 하는 함수인가요?

아닙니다. 그냥 일반 함수일 뿐입니다. 

그래서 이것도 window입니다.

this 를 여기서 출력할경우,

 위에있는 this 는 오브젝트를 출력해줌.

 저 드래그한 함수의 주인을 출력해줌.

= var 오브젝트

 

 

[collapse]

 

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

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

그럴 땐 함수를 arrow function으로 바꿔보시길 바랍니다.

화살표함수는 this 값을 정해주지 않음.

위에 있는 this 값을 그대로 물려받아 쓰세요 라는 의미

이렇게 반복문 때문에 3번 출력되는거 확인 가능.

var 오브젝트 = {
  이름들 : ['김', '이', '박'];
  함수 : function(){
      오브젝트.이름들.forEach(() => {
        console.log(this)
      });
  }
}

자바스크립트 ES6 문법 중,

function () {} 대신 쓸 수 있는 () => {} 이라는 arrow function 문법이 있습니다. 

똑같이 함수 만드는 문법입니다. 

이걸 쓰시면 함수 내부의 this값을 새로 바꿔주지 않기 때문에 this를 사용하실 때 유용합니다. 

심심하면 사용하시길 바랍니다. (아니면 애초에 this 키워드를 쓰지맙시다) 

자세한 arrow function에 관한 내용은 다음 강의에서 설명하기로 합시다.