Arrow Function(화살표 함수)

사용법

기존에 우리는 Function을 만들때

//1
function something(){
	//로직
}

//2
const something = function(){
	//로직
}

이렇게 만들고 somthing();으로 함수를 호출합니다.

 

화살표 함수를 사용하면

const something = ()=> {
	//로직
}

이렇게 간단히 만들 수 있습니다.

 

그래서 이 친구를 왜 쓰냐

 

const multiply2 = (x)=> {return x*2}

지금은 짧아서 체감이 잘 안 될 수 있지만 보기가 더 좋습니다.

 

그리고 파라미터가 하나일때 소괄호 생략도 가능합니다.

const multiply2 = x => {return x*2}

 

중괄호 안에도 return 문 하나밖에 없다면 중괄호까지도 생략이 가능합니다.

const multiply2 = x => return x*2;

중괄호를 생략할땐 ;을 붙여주면 끝. 굉장히 간결해졌습니다.

 

사용시 생각해야할 것

우리가 함수를 쓸 때 함수가 쓰인 위치에 따라 내부의 this값이 변한다고 알고 있습니다. 

근데 arrow function은 어디서 쓰던 내부의 this 값을 변화시키지 않습니다. 

그러니까 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function 이라는 함수입니다.

 

const object1 ={
	A : function(){console.log(this)}
}

object1.A()

//출력결과 : object1

const object2 ={
	A : ()=>{console.log(this)}
}

object2.A()

//출력결과: window

 

왜 화살표 함수를 쓰면 window가 나올까요

 

왜냐면 arrow function은 외부에 있던 this를 그대로 내부로 가져와서 사용하는 함수기 때문입니다. 

항상 장점은 아닙니다. 내가 예측하던 this값과 달라질 수도 있으니 단점이 될 수 있습니다.