ES6 Arrow Function

🔎 사전 개념

⭐ 함수를 사용하는 경우

• 코드들을 기능으로 묶고 싶을 때
• 입출력 기계를 만들고 싶을 때

---

➡️ Arrow function의 장점

• 입출력 기계를 만들 때 보기 쉽다. 좀 더 직관적이다.

var 함수 = (a) => { return a + 10 }

• 파라미터가 1개인 경우 소괄호를 생략할 수 있다.

var 함수 = a => { return a + 10 }

• 코드가 한 줄이면 중괄호도 생략할 수 있다.

var 함수 = a => return a + 10

⬅️ Arrow function 예시

• forEach 콜백함수

// before
 [1, 2, 3, 4].forEach(function (a) {
    console.log(a);
 });

// after(괄호 다 생략)
[1, 2, 3, 4].forEach(a => console.log(a));

• 이벤트 리스너

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

// after
document.getElementById("버튼").addEventListener("click", (e) => {
  e.currentTarget;
});

주의 할 점은 arrow function은 바깥에 있던 this 값을 그대로 사용하는 특성 때문에
⚠️ arrow function을 쓰면서 이벤트 리스너 내부에서 e.currectTarget을 사용하고 싶은 경우 this를 쓰면 안됨.

• Object 안의 함수

// before
var 오브젝트 = {
   함수: function () {
     console.log(this); // { 함수 : f }
   },
 };

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

⚠️ 얘도 this 주의

---

✍️ Arrow function & this 연습 문제

Q. setTimeout을 이용해서 1초 후에 this.innerHTML을 콘솔창에 출력하고 싶으면 어떻게 코드를 수정해야할까요?

<button id="버튼">버튼이에요</button>

<script>

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

</script>

정답

<button id="버튼">버튼이에요</button>

<script>
  document.getElementById("버튼").addEventListener("click", function () {
    setTimeout(() => {
      console.log(this.innerHTML);
    }, 1000);
  });
</script>

✨ 이벤트 리스너 안의 함수는 구 문법, setTimeout 안의 함수는 화살표 함수를 사용했는데 이는 this가 e.currentTarget 값을 유지하게 하기 위해서다.