[JavaScript] 함수를 간단히, Arrow function

오늘은 Arrow function, 함수를 최대한 간단히 쓸 수 있는 칭구에 대한 정리!

 

우리는 보통 함수를 이렇게 쓴다

(1)
function test(){

}

(2)
var test1 = function(){

}

 

ES6 신문법에서는 간단하게 아래처럼 쓸 수도 있다

var test = () => {
 
}

왜 이렇게 쓸까?

 

arrow function는 함수 본연의 입출력기능을 매우! 직관적으로 보여주기 때문이지

 

만약에 더하기를 하는 함수를 만든다고 생각해보자

그럼 어떻게 쓰냐면..!

function plus(x, y){
  return x + y
}

 

arrow function을 쓰면?

var plue = (x, y) => { return x + y }

console.log( pluetwo(1, 2) );
console.log( pluetwo(2, 2) );

요렇게 쓰면 이해하기 쉽다

몬가 간단해 보이니까

 

파라미터가 하나일 때는 소괄호 생략도 가넝한!

var plue = x => { return x + 1 }

console.log( pluetwo(1) );
console.log( pluetwo(2) );

 

리턴이 한 줄이다?

그럼 중괄호도 생략이 가넝한

var plus = x => x * 2 ;

console.log( plus(1) );
console.log( plus(2) );

 

this랑 이어지는 부분인데 

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

 

arrow function은 외부 this를 그대로 내부로 가져와서 사용하는 함수이기 때문에

항상 주의해서 사용할 것!