this3 : Arrow function

✔️ 함수는 언제 사용할까?

1. 긴 코드 축약해서 기능으로 만들고 싶을 때
2. 특정 입력값에 대응하는 결과값 뱉는 기계 만들고 싶을 때

✔️ 함수 만드는 방법

1. 함수 바로 정의

function 함수명 () {
    실행코드내용
  }

2. 변수에 함수 할당하기

var 함수명 = function () { 실행코드내용 }

Arrow function 장점

1. 파라미터 사용 시 직관적이다
2. 때에 따라 축약 가능하다
   1) 파라미터 한 개일 때 소괄호 생략 가능
   2) return 이하 코드가 한 줄일 때 중괄호 + return 생략 가능
   3) 함수 한 줄이면 중괄호 생략 가능
   

화살표 함수 사용 시 주의점

EventListner/object 내 콜백함수로 Arrow function 사용 시

화살표함수 내에서 this값 재정의X, 상위 객체의 this값 가져온다.
(this = window 객체가 된다)

EventListner에서

---

📌 Callback 함수로 일반 함수 문법 사용 시

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

👀 결과 : this = e.currentTarget 출력 (이벤트 핸들러가 부착된 곳)

📌 Callback 함수로 Arrow Function 사용 시 1

document.getElementById('btn').addEventListener('click', (e) => {
  console.log(this)
})

👀 결과 : this = window 객체 출력

📌 Callback 함수로 Arrow Function 사용 시 2

document.getElementById('버튼').addEventListener('click', function(){
  console.log(this)
  setTimeout( ()=>{ console.log(this.innerHTML) }, 1000 )
})

👀 위 코드에서는 상위 요소의 this값을 받고 싶으므로 Arrow function 문법을 사용하였다.
3행에서 일반 function 문법 사용 시 this가 undefined으로 뜬다
(function(){ console.log(this) } 에서 this에 해당하는, function 메소드를 가지고 있는 객체는 window 객체이므로)

object의 method에서 사용 시

---

this
var obj = {
  name : 'kim',
  sayHi : ()=>{ console.log(this)
  }

👀 결과 : 콘솔에 window객체가 출력된다.

제이쿼리

eventListner사용 시 this
$(this)

console.log($(this).val())