JS_기본 문법 (28)_ Arrow function

JS의 Arrow function에 대해서 알아보자.

 

1. Arrow Function 이란?

화살표 함수는 아래와 같이 사용한다.

let a = ()=> {
  ...
}

a();

 

기존의 function( ){ ... } 과 다르게

=>(화살표)를 이용하여 함수를 만든다.

 

2.  Arrow Function의 장점

화살표 함수를 사용하는 이유는 무엇일까?

 

먼저 함수를 어떠한 경우에 만들어서 사용하는지 살펴보면

1. 코드들을 기능으로 묶고 싶을 때 / 2. 입출력 기능을 만들 때

사용한다.

 

1) 입출력 기능을 잘 표현하는 문법이다.

arrow function은 함수의 기능 중 입출력 기능을 잘 표현해주는 장점이 있다.

 

let func = (x, y) => { return x + y } // x, y를 넣으면 두 값을 더해준다!

 

2) 파라미터가 하나일 경우 소괄호 생략 가능

파라미터가 하나만 존재할 경우에는 소괄호를 생략하고 사용할 수 있다.

let func2 = i => {return i + 10}

 

3) 코드가 한 줄로 끝날 경우 중괄호 생략 가능

함수의 본문이 한 줄로 끝나는 경우에는 중괄호를 생략할 수 있다.

let func2 = i => return i + 10;

 

이때 return 하나만 존재할 경우에는 return도 생략이 가능하다.

let func2 = i => i + 10;

 

func2(1); //11
func2(10); //20

 

 

예시

let arr = [1,2,3];

arr.forEach( a => console.log(a) );

========
1
2
3

 

4) 외부의 this 값을 그대로 사용가능

Arrow Function의 주요 특징은

함수 내에서 this는 외부의 this를 그대로 가져오는 것이다.

//case 1. 이벤트 리스너 안 function(){}
document.getElementsByClassName("box")[0].addEventListener("click",
  function(e){
    console.log(this)
  }
)

//case 2. 이벤트 리스너 안 Arrow Func
document.getElementsByClassName("box")[1].addEventListener("click",
  e => console.log(this)
)

//case 3. 이벤트 리스너 안 콜백함수로 ArrowFunc
document.getElementsByClassName("box")[2].addEventListener("click", function(e){
  let arr = [1];
  arr.forEach( a => console.log(this) );
})

 

 

case1과 2를 비교해보았을때

1의 경우에는 이벤트 리스너 내에서 this이므로 e.currentTarget을 반환하였다.

반면 2는 이벤트 리스너 외부의 window를 반환하는 것을 알 수 있다.

 

case3처럼 이벤트 리스너 내에서 콜백함수를

일반적인 function( ){ ... } 로 한 경우, 일반 함수이므로 window를 반환하지만

Arrow Function은 콜백 함수 외부인 이벤트 리스너에서의 this 즉, e.currentTarget을 반환한다.