Arrow Function

Arrow Fuction

기존의 함수 선언 방식은

(1)
function 함수이름(){
  // 함수 내용
}

(2)
var 함수이름 = function(){
  // 함수 내용
}

이렇게 되었고 함수이름();으로 사용하였다.

var ArrowFunction = () => {
  // 함수 내용
}

이렇게 function 함수 이름() { } 이렇게 하는 것이 아니라
() => { } 으로 간편하게 바꾸는 것이다.

ArrowFunction 사용 이유 1)

-> 함수 본연의 기능을 잘 표현하는 문법이다.

먼저 function문법 사용 이유는
1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을때(그리고 나중에 재사용할 때)
2. 입출력 기능을 만들때
이렇게 두 가지가 있다.

ArrowFunction을 사용하면 입출력 기능을 직관적으로 잘 표현해준다.

// 기존 함수 선언으로 만든 함수

var Double = function(x) {
  return x * 2
}

// ArrowFunction으로 만든 함수

var Double = (x) => { return x * 2 }

이렇게 이해하기 쉬워진다.

ArrowFunction 사용 이유 2)

-> 파라미터가 하나라면 소괄호 생략이 가능해진다.

Double 함수에서 소괄호 생략

var Double = x => { return x * 2 }

ArrowFunction 사용 이유 3)

-> 중괄호 안에 return 한줄 뿐이라면 중괄호와 return도 생략가능하다.

Double 함수에서 중괄호와 return 생략

var double = x => x * 2 ;

입출력기능이 한눈에 들어오는걸 볼 수 있다.
(생략할땐 세미콜론 붙여주자)

ArrowFunction 사용 이유 4)

-> arrow function은 어디서 사용해도 내부의 this값을 변화시키지 않는다.

일반적으로 함수를 사용할 때 함수가 쓰인 위치에 따라서 this값이 변한다고 했다.
그러나 arrow function은 그렇지 않다.

두 코드를 비교해보자

일반적인 함수에서의 this

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

오브젝트1.함수()

여기서 this는 함수()를 가지고있는 오브젝트1이 출력될 것이다.

arrow function에서의 this

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

오브젝트1.함수()

이러면 this값은 window가 출력된다.
왜 그러냐면 this값은 함수를 만나면 항상 변하는데 arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 쓴다.
(밖에 있던 this는 window)

사용시 주의사항

내가 예측하던 this값과 다른 값이 나올 수도 있고
this의 뜻이 달라지는 것 처럼 일반 function과 용도가 완전 같지 않기 때문에

일반 function을 항상 대체할 수 있는 문법이 아닙니다. 그것만 주의할 것