# Arrow function

⭐️ Arrow function은 function을 대체하는 문법이 아니다.

함수를 만드는 이유

1. 큰 기능을 만들 떄
2. 입출력 기계를 만들 때

함수 만드는 방법

1. 기존 방식

function 함수명(){

}

혹은

var 함수명 = function() {

}

2. arrow function

function 키워드 대신 => 사용

function 키워드 대신 => 사용
var 함수명 = () => {

}

arrow function의 장점

1. 입출력 기계를 보다 직관적으로 작성할 수 있음

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

2. parameter가 1개면 소괄호 생략 가능

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

3. 코드가 한 줄이면 중괄호도 생략 가능(+ return도)

ex) var 함수 = a => a + 10

예제)

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

arrow function의 특징

: 바깥에 있던 this 값을 내부에서 그대로 사용.

• 함수 내의 this 값을 변경시키지 않음.
• 잘못 사용하면 의도와 다르게 적용될 수 있음!

예제 1)

document.getElementById('버튼').addEventListener('click', (e) => {
this;
})

• 일반 함수로 썼다면 this는 event listener에 의해 e.currentTarget(즉, button)이어야 하지만, 화살표 함수로 썼기 때문에 바깥에 있는 this 값이 적용되어 window가 됨.
• 화살표 함수를 유지하면서 이벤트 적용 대상을 가져오고 싶을 때는 this 대신 e.currentTarget 사용.
  
  

예제2)

object 안에 함수를 만들 때 화살표 함수로 만들어도 되는가?

정답 : 된다. 하지만 위와 마찬가지로 화살표 함수를 썼을 때는 바깥에 있는 this 값이 적용되므로, this가 해당 함수의 상위 오브젝트를 나타내게 하고 싶을 때는 일반 함수로 써준다.

출처 : 코딩애플 | 매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법