ECMAScript6 - arrow function, () => {}

기본 형태 () => { };



1. 함수 블록 { } 사용하지 않은 형태,


2. 파라미터가 한 개의 형태



3. 파라미터가 없는 형태



4. 오브젝트를 리턴 할 경우
4-1 { }가 함수 블록인지 오브젝트를 의미하는것인지 헷갈리기 때문에 ( ) 감싸주는것 같다.

4-2 아니면 아래와 같이 명시적으로 return문을 작성해준다.



5. arguments 사용 불가

function 키워드로 선언한 함수를 sports(1,2) 형태로 호출하면 함수의 arguments에 1과 2가 설정된다.
반면 화살표 함수에는 arguments가 존재하지 않는다. 화살표 함수블록에서 arguments를 사용하면 ReferenceError가 발생한다.

ES6에서는 arguments 대신에 rest 파라미터를 사용한다.
rest 파라미터는 "let sports = (...rest) => {code}" 형태와 같이 소괄호 () 안에 점(.)을 세 개 작성하고 이어서 파라미터 이름을 작성한다.
sports(1 ,2)로 호출하면 1과 2가 rest 파라미터에 배열로 설정된다.

arguments는 Argument 오브젝트를 대신하는 프로퍼티로 함수가 호출되면 Argument오브젝트를 생성하고 함수 실행이 끝나 빠져나올 때 삭제한다.
함수를 100번 호출하면 100번 Argument 오브젝트를 생성하고 삭제하므로 효율이 떨어진다.
rest 파라미터는 Argument 오브젝트를 생성하지 않으므로 효율이 높다.
이런 점을 고려하여 Argument 오브젝트를 생성하지 않는 것으로 간주된다.



6. this와 setTimeout()

setTimeout()가 window 오브젝트 함수이므로
setTimeout()안 this가 window 오브젝트를 참조하게 된다.
그래서 콘솔에 true가 출력된다.
여기서 문제는 newSports.get() 형태로 호출했으므로
this가 newSports의 인스턴스를 참조해야 하는데 window 오브젝트를 참조한다.



() => {} 애로우 펑션을 통해서
//new 연산자를 통해 생성한 Sports 인스턴스의 this를 참조하도록 했다.




7. prototype과 arrow function

newSports.add(); 를 호출 했을 때, this는 window 오브젝트의 this이기 때문에
window.count는  undefined이다 따라서
undefined + 1 = NaN(Not a Number)가 출력된다.
newSports.count는 그대로 20이 출력된다.

prototype에 화살표 함수를  연결하면,
this가 메서드를 호출한 인스턴스를 참조하지 않고 window 오브젝트를 참조한다.
따라서 화살표 함수가 아닌 function 키워드 함수를 prototype에 연결해야 한다.