(JavaScript) Arrow function

Arrow function

기본 함수 작성법은 이렇게 작성한다.

(1)
function 함수(){
  //어쩌구
}

(2)
var 함수 = function(){
  //어쩌구
}

하지만, ES6 신문법으로 이렇게 사용할 수도 있다.

var 함수 = () => {
  //어쩌구
}

Arrow function으로 쓰면 좋은 장점

1. 함수 본연의 기능을 아주 잘 표현하는 문법이다.
특히, 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해준다.

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

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

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

• 장점1 : 함수 표현식 자체가 x가 x * 2가 됩니다~ 라고 말하는 것 같아서 매우 이해하기 쉬워진다.

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

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

• 장점2 : 파라미터가 1개면 소괄호 생략이 가능하다.
  ((a, b) => { return a + 2 } 이럴땐 소괄호 생략x)

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

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

• 장점3 : 코드가 한줄이면 중괄호 생략이 가능하다.
  생략하니 이제 x가 어떻게 변하는 함수인지 입출력기능이 바로 한눈에 들어온다.

• 장점4 : arrow function을 쓰면 내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용한다.
  원래 함수를 쓸 때 함수가 쓰인 위치에 따라서 내부의 this값이 변하는데, arrow function은 어디서 쓰든간에 내부의 this 값을 변화시키지 않는다.
  
  
  그러니까 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function 이라는 함수이다. (arrow function을 쓰는 핵심 이유!!)

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

오브젝트1.함수()

함수()를 가지고 있는 오브젝트인 오브젝트1이 콘솔창에 출력될 것이다.

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

오브젝트1.함수()

이건 window라는게 출력될 것이다.

왜 함수의 주인인 오브젝트1이 출력되지 않냐면,
this값은 함수를 만나면 항상 변하는데 arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 쓰기 때문이다. (오브젝트 밖에 있던 this는 window)

arrow function은 외부에 있던 this를 그대로 내부로 가져와서 사용하는 함수기 때문에
내가 예측하던 this값과 달라질 수도 있는 단점이 될 수 있다.
하지만 this의 뜻이 달라지는 것 처럼 일반 function과 용도가 완전 같지 않기 때문에
일반 function을 항상 대체할 수 있는 문법이 아니다. 주의하기!