[Javascript] Arrow function은 function을 대체하는 신문법이 아니다

보통 모르고 arrow function 을 사용했을 때는 간단하게 코드를 축약 시켜서 쓴다고 생각했는데 arrow function 의 차이점을 제대로 알게 되었다.

함수 쓰는이유

1. 기능을 축약하고 싶을때
2. 입출력 기계를 만들고 싶을때

arrow function 장점

1. 입출력기계 만들때 보기 쉬움
2. 파라미터 1개면 소괄호 생략 가능 / 한줄밖에 없으면 중괄호 생략 가능
3. 직관적으로 반복문을 사용할 수 있음

이런식으로 줄여서 사용하기 가능

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

[1, 2, 3, 4].array.forEach(a => console.log(a));

다른 this

버튼을 클릭하면 아래이쓴 코드를 출력하게 하는 구문 작성 축약을 하면 this 가 가리키는 값이 다르게 나옴

document.getElementById('버튼').addEventListener('click', function (e) {
  this //  e.currentTarget
})

document.getElementById('버튼').addEventListener('click', (e) => {
  this //  바깥 this 값
})


let 오브젝트 = {
  함수: () => {
    return this // window 나옴 
  }
}