Arrow function과 function

function을 사용하는 이유

아래 두 가지 상황에서 함수를 써야 한다

1. 여러 가지 기능을 하는 코드를 한 단어로 묶고 싶을 때(그리고 나중에 재사용할 때)
2. 입출력 기능을 만들 때

arrow function을 사용하는 데에는 몇 가지 이유가 있는데
1. 첫번째로 함수 본연의 입출력 기능을 아주 직관적으로 잘 표현해줌

var 두배만들기 = (x) => { return x * 2 };

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

화살표 모양을 사용함으로써 함수의 기능을 파악하는 데에 쉬워짐

2. 두번째로 소괄호 생략이 가능함

var 두배만들기 = x => { return x * 2 };

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

파라미터가 한 개일 경우 소괄호를 생략할 수 있음

3. 세번째로 중괄호 생략이 가능함

중괄호 안에 return 한 줄 뿐이라면 중괄호와 return 모두 생략 가능함

var 두배만들기 = x => x * 3;

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

arrow function을 쓰면 내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용함

arrow function은 어디서 쓰던지 내부의 this값을 변화시키지 않음
따라서 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 arrow function

이것이 네번째 장점이자 arrow function을 사용하는 핵심 이유

var 오브젝트1 = {
  함수 : function(){ console.log(this);
}
  
오브젝트1.함수();

위의 코드를 실행시키면
함수()를 가지고 있는 오브젝트인 오브젝트1이 콘솔창에 출력됨

var 오브젝트1 = {
	함수 : () => { console.log(this); }
}

오브젝트1.함수();

위의 코드를 실행시키면
this의 값으로 window가 나옴

arrow function은 외부에 있던 this를 그대로 내부로 가져와서 사용하는 함수이기 때문에 일반 function과 용도가 다름

일반 function을 대체하여 arrow function을 사용하는 일이 없도록 하기